Next.js静态生成：如何将getStaticProps的Props传递给Layout组件

Pages Router 模式下，getStaticProps 执行完成后返回的所有属性会统一挂载到 pageProps 对象，整体传递给 _app.tsx 入口逻辑。原实现中，_app.tsx 直接把整份 pageProps 透传给内层页面组件，没有做属性拆分，因此嵌套在外层的 Layout 组件无法拿到页面级请求获取的参数。

不需要改动原有 Layout 嵌套、鉴权拦截、动态布局绑定的逻辑，仅需两处小幅调整即可打通传参链路：

1. 统一约定布局参数存储规范 #

在所有页面的 getStaticProps 返回值中，将需要传递给外层 Layout 的属性，统一收纳到独立的 layoutProps 字段下，与页面本身需要渲染的属性做隔离。
修改 Login.tsx 中的 getStaticProps 逻辑：

export async function getStaticProps() {
  const res = await fetch("https://company.com")
  const systemNormal = await res.ok

  return {
    props: {
      // 统一收纳Layout专属属性
      layoutProps: {
        systemNormal,
      },
      // 其余Login页面自身需要渲染的props放在根层级
    },
    revalidate: 1,
  }
}

2. 在 _app.tsx 中拆分属性，分发给对应组件 #

修改 App 组件的渲染逻辑：从 pageProps 中拆出 layoutProps 字段传给外层的 LayoutComponent，剩余的页面专属属性再传给内层的页面组件。
修改后的 _app.tsx 核心代码：

const NoCheck: React.FC = ({ children }) => <>{children}</>

function App({ Component, pageProps }: AppProps) {
  const neoPage = Component as NeoPage
  const LayoutComponent = neoPage.Layout || Layout
  const { withAuthCheck = true } = neoPage
  const CheckAuthComponent = withAuthCheck ? CheckAuth : NoCheck

  // 拆分出Layout专属属性，剩余为页面自身使用的属性
  const { layoutProps = {}, ...pageOwnProps } = pageProps

  return (
    <CommonProviders pageProps={pageProps} overmindConfig={config}>
      <CheckAuthComponent>
        {/* 将拆分出的属性透传给对应布局组件 */}
        <LayoutComponent {...layoutProps}>
          <Component {...pageOwnProps} />
        </LayoutComponent>
      </CheckAuthComponent>
    </CommonProviders>
  )
}

export default App

这套实现完全兼容现有代码结构，不会破坏原有动态绑定 Layout、鉴权拦截的流程，同时避免了不同页面传参时的字段命名冲突。

• LayoutUnauthorized 组件本身的 props 定义无需任何修改，传入的 systemNormal 属性可直接正常渲染
• 后续其他页面如果需要给专属 Layout 传参，只需要在自身的 getStaticProps 中向 layoutProps 字段写入对应值即可，不需要改动公共入口逻辑
• 页面组件本身不会收到无关的布局参数，保持组件职责边界清晰

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