如何在Next.js App Router中使用全局Provider且保留Server Components？

在App Router里直接在根布局加客户端Provider确实会报错，但完全不用放弃服务端组件，核心是把Provider作为客户端边界组件，和服务端组件分层处理，具体方法如下：

1. 单独拆分客户端Provider组件 #

先创建一个专门的Provider文件，比如app/providers.js，明确标记为客户端组件：

"use client";

import { useState, createContext, useContext } from "react";

// 创建Context
const AppContext = createContext();

// 全局Provider组件
export function AppProvider({ children }) {
  const [globalState, setGlobalState] = useState("初始值");
  return (
    <AppContext.Provider value={{ globalState, setGlobalState }}>
      {children}
    </AppContext.Provider>
  );
}

// 自定义Hook，方便组件调用Context
export function useAppContext() {
  return useContext(AppContext);
}

2. 在根布局中嵌套Provider #

根布局app/layout.js默认是服务端组件，不用加"use client"，直接引入上面的Provider包裹子组件即可：

import { AppProvider } from "./providers";

export default function RootLayout({ children }) {
  return (
    <html lang="zh-CN">
      <body>
        <AppProvider>{children}</AppProvider>
      </body>
    </html>
  );
}

这样整个组件树都被Provider包裹，但根布局依然是服务端组件，只有Provider本身是客户端组件，不会影响其他服务端组件的渲染。

3. 仅在客户端组件中使用Context #

服务端组件不能直接调用Context，但你可以把需要访问全局状态的部分拆成客户端组件，嵌入到服务端组件里。比如：

服务端页面组件app/page.js（依然保持服务端特性，可做服务端数据获取）：

import ClientPart from "./client-part";

export default async function HomePage() {
  // 服务端数据请求
  const serverData = await fetch("https://api.example.com/data").then(res => res.json());
  
  return (
    <div>
      <h2>服务端渲染内容：{serverData.title}</h2>
      {/* 只有这个子组件是客户端组件，能访问全局Context */}
      <ClientPart />
    </div>
  );
}

客户端子组件app/client-part.js：

"use client";

import { useAppContext } from "./providers";

export default function ClientPart() {
  const { globalState, setGlobalState } = useAppContext();
  return (
    <div>
      <p>全局状态：{globalState}</p>
      <button onClick={() => setGlobalState("更新后的值")}>修改状态</button>
    </div>
  );
}

关键注意点 #

• 服务端组件本身不能依赖客户端状态或Context，所以只在需要交互的客户端组件中使用Context即可
• 这种方式既实现了全局Provider的效果，又保留了服务端组件的所有优势（比如服务端数据获取、静态渲染等）

内容的提问来源于stack exchange，提问作者Farouk M