Next.js v13中pageProps的位置及组件传参问题咨询

1. pageProps 在 Next.js v13 中的位置 #

Next.js v13 分两种路由模式，情况不同：

• 若使用Pages Router（原pages目录结构）：pageProps依然存在于pages/_app.js中，和早期版本逻辑完全一致，没有变化。
• 若切换到App Router（新的app目录结构）：该模式下已取消pageProps概念。因为App Router采用组件级数据获取逻辑——页面或组件可直接通过async/await获取数据，无需通过顶层组件统一传递props。

2. App Router 下如何实现类似 pageProps 的传参逻辑 #

在App Router中，布局组件仅通过{children}渲染子内容，无法沿用旧版的<p.Component {...p.pageProps} />方式传参，可通过以下几种常用方式实现组件间数据传递：

• React Context（客户端组件共享）：创建Context在顶层布局提供数据，子组件按需消费。示例：

  // app/contexts/DataContext.js
  'use client';
  import { createContext, useContext } from 'react';
  
  const DataContext = createContext();
  
  export function DataProvider({ children, data }) {
    return <DataContext.Provider value={data}>{children}</DataContext.Provider>;
  }
  
  export function useData() {
    return useContext(DataContext);
  }
  

  在根布局中使用：

  // app/layout.js
  import { DataProvider } from './contexts/DataContext';
  
  export default async function RootLayout({ children }) {
    const sharedData = await fetchSomeData(); // 获取需要共享的数据
    return (
      <html lang="en">
        <body>
          <DataProvider data={sharedData}>{children}</DataProvider>
        </body>
      </html>
    );
  }
  

  子组件中通过useData()即可拿到共享数据。
• 服务端组件直接传参：父服务端组件获取数据后，直接作为props传给子组件。示例：

  // app/ParentComponent.js
  export default async function ParentComponent() {
    const data = await fetchSomeData();
    return <ChildComponent data={data} />;
  }
  

  // app/ChildComponent.js
  export default function ChildComponent({ data }) {
    return <div>{JSON.stringify(data)}</div>;
  }
  

• 页面组件自主获取数据：App Router推荐的方式是让每个页面/组件自行获取所需数据，无需依赖顶层传递。比如页面组件可写成async函数：

  // app/page.js
  export default async function HomePage() {
    const pageData = await fetchPageData();
    return <div>{JSON.stringify(pageData)}</div>;
  }
  

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