Next.js 13中使用React Context Provider时如何创建layout.js及相关疑问

先直接给你明确结论：

• 不是无需升级文件：如果你要切换到App Router模式，需要用layout.js替代旧的_app.js和_document.js，旧文件在App Router下不会生效（除非你保留Pages Router共存）。
• 不要直接给整个layout.js标记'use client'，最优做法是把Context Provider单独封装成客户端组件，再在layout.js中引入。

为什么要这么做？ #

Next.js 13的App Router里，layout.js默认是服务器组件，服务器组件不能使用React的客户端专属特性——比如Context、useState、useEffect这些。而Context Provider必须在客户端环境中运行，因为它依赖客户端的状态管理能力。

具体怎么实现？ #

1. 单独创建一个客户端组件来封装Context Provider：

// app/context/MyContextProvider.jsx
'use client';

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

const MyContext = createContext();

export function MyContextProvider({ children }) {
  const [user, setUser] = useState(null);
  
  return (
    <MyContext.Provider value={{ user, setUser }}>
      {children}
    </MyContext.Provider>
  );
}

// 导出自定义Hook方便使用
export function useMyContext() {
  return useContext(MyContext);
}

2. 在layout.js中引入这个Provider：

// app/layout.js
// 这里的layout还是默认的服务器组件，不需要加'use client'
import { MyContextProvider } from './context/MyContextProvider';

export default function RootLayout({ children }) {
  return (
    <html lang="zh-CN">
      <body>
        {/* 用客户端Provider包裹所有子组件 */}
        <MyContextProvider>{children}</MyContextProvider>
      </body>
    </html>
  );
}

为什么不直接给layout加'use client'？ #

如果给整个layout.js加'use client'，会把整个根布局变成客户端组件，导致所有依赖这个layout的页面都被迫客户端渲染，浪费了Next.js服务器组件的性能优势。拆分Provider可以让layout的大部分逻辑保持服务器渲染，只把必要的客户端部分隔离出来。

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