Next.js 13 App Router：如何从layout.js访问page.js的静态变量？

App Router没有直接支持Pages Router中Page.getLayout或读取组件静态属性的机制，因为它的渲染模型里Layout是顶层包裹组件，Page作为children传入，无法直接访问Page组件的静态属性。下面是几种可行的替代实现方案：

方案一：用React Context传递页面配置 #

通过Context把Page的静态配置传递给Layout，适合自定义复杂配置的场景：

1. 创建配置Context文件

// app/pageConfig.js
import { createContext, useContext } from 'react';

const PageConfigContext = createContext({ title: '' });

export const PageConfigProvider = PageConfigContext.Provider;
export const usePageConfig = () => useContext(PageConfigContext);

2. 在Page中注入配置

// app/page.js
import { PageConfigProvider } from './pageConfig';

export default function Page() {
  return (
    <PageConfigProvider value={{ title: "Hello World" }}>
      <div>页面内容</div>
    </PageConfigProvider>
  );
}

3. 在Layout中读取配置并渲染头部

// app/layout.js
import { usePageConfig } from './pageConfig';

export default function RootLayout({ children }) {
  const { title } = usePageConfig();
  
  return (
    <html lang="zh-CN">
      <head>
        <title>{title}</title>
      </head>
      <body>
        <header>
          {title === "Hello World" ? (
            <h1>特殊头部：{title}</h1>
          ) : (
            <h1>默认头部</h1>
          )}
        </header>
        {children}
      </body>
    </html>
  );
}

方案二：结合metadata与useMetadata（适合标题类元数据） #

如果只是需要读取标题这类元数据，可以利用App Router内置的元数据机制：

1. 在Page中定义元数据

// app/page.js
export const metadata = {
  title: "Hello World",
};

export default function Page() {
  return <div>页面内容</div>;
}

2. 创建客户端组件读取元数据（因为useMetadata只能在客户端组件中使用）

// app/Header.js
'use client';

import { useMetadata } from 'next/navigation';

export default function Header() {
  const metadata = useMetadata();
  const pageTitle = metadata.title;
  
  return (
    <header>
      {pageTitle === "Hello World" ? (
        <h1>特殊头部：{pageTitle}</h1>
      ) : (
        <h1>默认头部</h1>
      )}
    </header>
  );
}

3. 在Layout中引入头部组件

// app/layout.js
import Header from './Header';

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

方案三：抽离配置到独立文件（适合多页面统一管理配置） #

把每个页面的配置单独存放在独立文件中，Layout根据路由动态导入对应配置：

1. 创建Page的配置文件

// app/page.config.js
export const pageConfig = {
  title: "Hello World",
  headerType: "special",
};

2. 在Layout中动态导入配置

// app/layout.js
import { useSelectedLayoutSegment } from 'next/navigation';

export default async function RootLayout({ children }) {
  const segment = useSelectedLayoutSegment() || 'page';
  let pageConfig = { title: "默认标题", headerType: "default" };
  
  try {
    const configModule = await import(`./${segment}.config.js`);
    pageConfig = configModule.pageConfig;
  } catch (e) {
    // 无对应配置文件时使用默认值
  }
  
  return (
    <html lang="zh-CN">
      <body>
        <header>
          {pageConfig.headerType === "special" ? (
            <h1>特殊头部：{pageConfig.title}</h1>
          ) : (
            <h1>默认头部：{pageConfig.title}</h1>
          )}
        </header>
        {children}
      </body>
    </html>
  );
}

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