Next.js 服务器组件中的交互式状态管理：以 Jotai 实现暗模式为例-js教程-PHP中文网

Next.js 服务器组件中的交互式状态管理：以 Jotai 实现暗模式为例

碧海醫心

发布： 2025-11-22 15:52:02

原创

867人浏览过

Next.js 服务器组件中的交互式状态管理：以 Jotai 实现暗模式为例

本文探讨了在 next.js 服务器组件中管理交互式状态的挑战，特别是 `usestate` 的局限性。我们提出并详细演示了如何利用 jotai 这一轻量级状态管理库，在保持应用大部分为服务器组件优势的同时，为客户端组件提供动态的交互功能，例如实现网站的暗模式切换，从而优化性能和用户体验。

理解 Next.js 服务器组件与客户端状态的挑战

Next.js 13 引入的服务器组件（Server Components）是其架构的核心特性之一，旨在提高应用的性能、减少客户端 JavaScript 包大小并改善首次内容绘制（FCP）。然而，服务器组件的一个显著限制是它们无法使用 React Hooks，例如 useState 和 useEffect，这意味着它们不能直接管理客户端状态或处理用户交互。

当我们需要在服务器组件渲染的布局中实现如暗模式切换这类交互功能时，就面临一个选择：是将整个布局标记为客户端组件（通过在文件顶部添加 "use client"），但这会牺牲服务器组件带来的性能优势；还是寻找一种方案，在保持大部分组件为服务器组件的同时，只将必要的交互部分标记为客户端组件并管理其状态。本文将重点介绍后者，通过 Jotai 实现一个优雅的解决方案。

解决方案：利用 Jotai 进行全局状态管理

Jotai 是一个极简且灵活的状态管理库，它基于原子（atom）的概念，非常适合在 React 应用中管理共享状态。Jotai 的核心优势在于其轻量级、高性能以及与 React 的良好集成，使其成为 Next.js 中处理客户端状态的理想选择，尤其是在需要跨越服务器/客户端组件边界时。

通过将 Jotai 的状态管理能力引入到标记为 "use client" 的组件中，我们可以实现全局共享的状态，而无需将整个应用树都转换为客户端组件。

实施步骤：以暗模式切换为例

我们将通过一个暗模式切换的示例，详细展示如何结合 Next.js 服务器组件和 Jotai 来管理交互式状态。

1. 安装 Jotai

首先，在您的 Next.js 项目中安装 Jotai 及其 React 绑定。由于示例中使用了 Radix UI 的 Switch 组件，我们也会一并安装。

npm install jotai @radix-ui/react-switch
# 或者 yarn add jotai @radix-ui/react-switch

登录后复制

2. 定义 Jotai 原子（Atom）

原子是 Jotai 中状态的基本单元。我们将创建一个 darkModeAtom 来存储暗模式的状态。

创建一个 atoms/headerAtoms.ts 文件（或您选择的任何位置）：

AISEO

AI创作对SEO友好的文案和文章

查看详情

// atoms/headerAtoms.ts
import { atom } from "jotai";

export const darkModeAtom = atom(false); // 默认设置为 false (亮模式)

登录后复制

这里我们将 darkModeAtom 初始化为 false，表示默认是亮模式。您可以根据需求设置为 true。

3. 设置 Jotai Provider 和客户端根布局

为了让 Jotai 的状态在组件树中可用，我们需要在应用的根部提供 Provider。由于我们需要在布局中读取和更新暗模式状态，并且布局本身可能包含服务器组件，因此我们将创建一个客户端根布局来包裹整个应用。

修改您的 app/layout.tsx 文件：

// app/layout.tsx
"use client"; // 标记为客户端组件

import { useAtomValue } from "jotai/react";
import { Provider } from "jotai";
import { darkModeAtom } from "../atoms/headerAtoms"; // 导入暗模式原子

// 导入其他组件，例如 Header
import Header from "../components/header/Header";

// 顶层布局组件，负责提供 Jotai Context
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}): JSX.Element {
  return (
    <Provider>
      <App children={children} />
    </Provider>
  );
}

// 实际应用的主体，用于根据 Jotai 状态应用 CSS 类
function App({ children }: { children: React.ReactNode }): JSX.Element {
  const isDarkMode = useAtomValue(darkModeAtom); // 从 Jotai 原子中读取暗模式状态

  return (
    <html lang="en" className={isDarkMode ? "dark" : ""}>
      <body className="bg-neutral-100 dark:bg-neutral-800">
        <Header /> {/* Header 组件可能包含暗模式切换 */}
        <div>{children}</div>
      </body>
    </html>
  );
}

登录后复制

代码解释：

"use client": 这一行至关重要，它将 RootLayout 及其内部的 App 组件标记为客户端组件，允许它们使用 React Hooks 和 Jotai。
Provider: Jotai 的 Provider 组件包裹了整个应用，确保所有子组件都能访问到 Jotai 的状态。
App 组件: 这是一个嵌套在 RootLayout 中的客户端组件。它使用 useAtomValue(darkModeAtom) 来获取当前的暗模式状态，并根据该状态动态地为 <html> 元素添加或移除 dark CSS 类。这样，整个页面的主题就会随之改变。
Header: 这是一个示例组件，它将包含我们的暗模式切换开关。

4. 创建暗模式切换组件

现在，我们来创建实际的暗模式切换 UI。这个组件也需要是客户端组件，因为它需要与用户交互并更新 Jotai 状态。

创建一个 components/header/Header.tsx 文件：

// components/header/Header.tsx
"use client"; // 标记为客户端组件

import React from "react";
import * as Switch from "@radix-ui/react-switch";
import { useAtom } from "jotai/react";
import { darkModeAtom } from "../../atoms/headerAtoms"; // 导入暗模式原子

// 假设这里有一些 FontAwesomeIcon 的导入，根据实际项目调整
// import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
// import { faMoon, faSun } from '@fortawesome/free-solid-svg-icons';

export default function Header(): JSX.Element {
  return (
    <header className="flex justify-between items-center p-4 bg-white dark:bg-gray-900 shadow-md">
      <h1 className="text-xl font-bold text-gray-800 dark:text-white">我的网站</h1>
      <DarkModeToggle /> {/* 包含暗模式切换开关 */}
    </header>
  );
}

function DarkModeToggle(): JSX.Element {
  const [isDarkMode, setIsDarkMode] = useAtom(darkModeAtom); // 读取和更新暗模式状态

  return (
    <form>
      <div className="flex items-center">
        <label htmlFor="dark-mode-switch" className="mr-2 text-gray-700 dark:text-gray-300">
          {isDarkMode ? "暗模式" : "亮模式"}
        </label>
        <Switch.Root
          id="dark-mode-switch"
          checked={isDarkMode}
          onCheckedChange={(): void => setIsDarkMode(!isDarkMode)} // 切换状态
          className="w-16 h-9 rounded-full relative border flex items-center p-1 cursor-pointer
                     data-[state=checked]:bg-blue-600 data-[state=unchecked]:bg-gray-200
                     focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
        >
          <Switch.Thumb
            className={`${
              isDarkMode
                ? "translate-x-7 bg-neutral-700 border-blue-500"
                : "translate-x-0 bg-white border-yellow-500"
            } block w-7 h-7 rounded-full shadow-lg transform ring-0 transition-transform duration-200 ease-in-out
               flex items-center justify-center`}
          >
            {/* 假设这里使用 FontAwesomeIcon，如果未安装则可替换为表情符号 */}
            {/* <FontAwesomeIcon
              icon={isDarkMode ? faMoon : faSun}
              className={isDarkMode ? "text-blue-500" : "text-yellow-500"}
            /> */}
            <span className="text-sm">
              {isDarkMode ? '?' : '☀️'}
            </span>
          </Switch.Thumb>
        </Switch.Root>
      </div>
    </form>
  );
}

登录后复制

代码解释：

"use client": 同样，Header 组件被标记为客户端组件。
useAtom(darkModeAtom): 在 DarkModeToggle 组件中，我们使用 useAtom Hook 来获取 darkModeAtom 的当前值 (isDarkMode) 和一个更新该值的函数 (setIsDarkMode)。
Switch.Root 和 Switch.Thumb: 这些是 @radix-ui/react-switch 提供的无障碍切换组件。当用户点击开关时，onCheckedChange 回调函数会调用 setIsDarkMode(!isDarkMode) 来反转暗模式状态。
样式: 示例中包含了 Tailwind CSS 类的简化版本，用于演示如何根据 isDarkMode 状态来改变切换按钮的样式和位置。