Next.js的服务器组件默认在服务器端渲染，无法直接绑定客户端交互事件，这给需要响应用户操作的状态管理带来了挑战。Jotai作为原子化的状态管理工具，支持跨组件共享状态，还能和Next.js的渲染模式良好兼容，非常适合处理这类场景。
核心原理说明
Next.js中服务器组件负责静态内容渲染，客户端组件负责处理交互逻辑。Jotai的原子状态可以在客户端组件中修改，同时服务器组件可以读取状态对应的初始值或者静态快照，实现状态在两种组件类型之间的流转。暗模式切换需要记录用户的模式偏好，并且让所有页面组件都能响应这个状态变化，正好符合这个实现逻辑。
环境准备与依赖安装
首先确保已经创建了Next.js项目，然后安装Jotai相关依赖：
npm install jotai
定义暗模式状态原子
我们需要先创建一个Jotai原子来存储暗模式的状态，这个原子可以在所有需要的组件中被读取和修改：
// atoms/themeAtom.js
import { atom } from 'jotai'
// 定义暗模式状态原子，默认值为false表示亮模式
export const isDarkModeAtom = atom(false)
创建客户端交互组件
因为切换按钮需要绑定点击事件，所以这个组件必须标记为客户端组件，我们在组件内部修改Jotai原子的值：
// components/ThemeToggle.js
'use client'
import { useAtom } from 'jotai'
import { isDarkModeAtom } from '../atoms/themeAtom'
export default function ThemeToggle() {
// 读取和修改暗模式状态
const [isDarkMode, setIsDarkMode] = useAtom(isDarkModeAtom)
return (
<button
onClick={() => setIsDarkMode(prev => !prev)}
style={{
padding: '8px 16px',
borderRadius: '4px',
border: '1px solid #ccc',
backgroundColor: isDarkMode ? '#333' : '#fff',
color: isDarkMode ? '#fff' : '#333'
}}
>
{isDarkMode ? '切换到亮模式' : '切换到暗模式'}
</button>
)
}
服务器组件中读取状态
服务器组件可以读取Jotai原子的初始值，或者通过useAtomValue的服务器端适配方式获取状态，这里我们使用Jotai提供的useHydrateAtoms配合初始值传递，让服务器组件可以拿到初始状态：
// app/page.js
import { isDarkModeAtom } from '../atoms/themeAtom'
import ThemeToggle from '../components/ThemeToggle'
import { HydrateAtoms } from 'jotai/next'
export default function HomePage() {
return (
<HydrateAtoms atoms={[[isDarkModeAtom, false]]}>
<div style={{ padding: '20px' }}>
<h1>Next.js服务器组件Jotai暗模式示例</h1>
<ThemeToggle />
<p>当前页面内容会根据暗模式状态调整样式</p>
</div>
</HydrateAtoms>
)
}
全局样式适配
为了让暗模式切换后整个页面的样式都跟着变化，我们可以在全局样式中根据状态添加对应的类名，这里通过客户端组件监听状态变化后修改根节点的类名实现：
// components/ThemeProvider.js
'use client'
import { useAtom } from 'jotai'
import { isDarkModeAtom } from '../atoms/themeAtom'
import { useEffect } from 'react'
export default function ThemeProvider() {
const [isDarkMode] = useAtom(isDarkModeAtom)
useEffect(() => {
// 修改根节点的类名，用于全局样式适配
if (isDarkMode) {
document.documentElement.classList.add('dark')
} else {
document.documentElement.classList.remove('dark')
}
}, [isDarkMode])
return null
}
然后在全局样式文件中添加对应的样式规则：
/* app/globals.css */
:root {
--bg-color: #ffffff;
--text-color: #333333;
}
.dark {
--bg-color: #1a1a1a;
--text-color: #f0f0f0;
}
body {
background-color: var(--bg-color);
color: var(--text-color);
transition: background-color 0.3s, color 0.3s;
}
完整流程梳理
- 用户在客户端组件
ThemeToggle中点击按钮，触发setIsDarkMode修改Jotai原子状态 ThemeProvider监听到状态变化，修改根节点的类名- 全局CSS变量根据类名切换，所有使用变量的组件样式自动更新
- 服务器组件通过
HydrateAtoms获取初始状态，保证首屏渲染的一致性
注意事项
所有修改Jotai状态的逻辑必须放在客户端组件中，服务器组件只能读取状态，不能执行修改操作。如果需要在服务器组件中获取最新的状态快照，可以结合Next.js的服务器操作或者数据请求逻辑实现，避免直接在服务器组件中调用状态修改方法。
这种实现方式既保留了Next.js服务器组件的渲染优势，又通过Jotai实现了交互式状态的跨组件管理，暗模式只是其中一个应用场景，类似的用户偏好设置、全局弹窗状态等需求都可以用同样的思路实现。