Next.js 13.4迁移至App Router：_app.js的props在layout.js中如何处理？

App Router 和 Page Router 的核心机制不一样，layout.js 里没有直接对应 Component 和 pageProps 的参数，下面给你讲清楚怎么替代原来的逻辑：

核心差异说明 #

原来的 _app.jsx 是所有页面的统一 wrapper，接收当前页面组件 Component 和数据 props pageProps 来渲染；而 App Router 里的 layout.js 接收的 children，已经是当前路由对应的页面组件（并且已经自动注入了它需要的所有 props），不需要你手动传递组件或 props。

具体场景的替代方案 #

1. 基础页面渲染（对应原 return <Component {...pageProps} />） #

直接在 layout 里渲染 children 就行，它就是已经处理好的页面内容：

// app/layout.jsx
export default function RootLayout({ children }) {
  return (
    <html lang="zh-CN">
      <body>
        {/* 直接渲染children即可，等价于原来的<Component {...pageProps} /> */}
        {children}
      </body>
    </html>
  );
}

2. 全局逻辑包裹（比如全局状态、样式、公共组件） #

原来在 _app.jsx 里加的全局逻辑（比如全局样式、状态管理 Provider），直接搬到 layout 里包裹 children：

// app/layout.jsx
import { Provider } from 'react-redux';
import store from '@/store';
import './globals.css';

export default function RootLayout({ children }) {
  return (
    <html lang="zh-CN">
      <body>
        <Provider store={store}>
          {/* 全局导航栏 */}
          <Header />
          {children}
          {/* 全局页脚 */}
          <Footer />
        </Provider>
      </body>
    </html>
  );
}

3. 给所有页面传递公共 props #

如果原来需要给所有页面传递公共数据（比如用户信息），不要想着在 layout 里传递 props，改用 React Context：

// app/layout.jsx
import { createContext, useContext } from 'react';

// 创建全局Context
const GlobalContext = createContext(null);

export default function RootLayout({ children }) {
  // 这里可以从API、中间件或cookie获取公共数据
  const globalData = {
    userInfo: { name: '张三' },
    siteConfig: { title: '我的网站' }
  };

  return (
    <html lang="zh-CN">
      <body>
        <GlobalContext.Provider value={globalData}>
          {children}
        </GlobalContext.Provider>
      </body>
    </html>
  );
}

// 在任意页面组件里使用公共数据
export default function ProfilePage() {
  const { userInfo } = useContext(GlobalContext);
  return <div>当前用户：{userInfo.name}</div>;
}

4. 页面数据获取（替代原来的 getServerSideProps/getStaticProps） #

原来的 pageProps 是数据获取函数返回的结果，现在在 App Router 里，页面组件可以直接写 async 函数获取数据，不需要经过中间层传递：

// app/posts/[id]/page.jsx
// 直接在页面组件里获取数据
async function getPostData(postId) {
  const res = await fetch(`https://api.example.com/posts/${postId}`);
  return res.json();
}

export default async function PostPage({ params }) {
  // params是路由参数，自动注入
  const post = await getPostData(params.id);
  // 直接使用数据，不需要pageProps
  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </div>
  );
}

总结 #

• layout 里的 children 已经包含了渲染好的页面组件（自动处理了 props），不需要手动处理 Component 和 pageProps
• 原来在 _app.jsx 里的全局逻辑，直接搬到 layout 里包裹 children
• 公共数据用 React Context 传递，页面数据直接在页面组件内异步获取

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