Next.js 13(app目录)：如何在RootLayout中获取页面metadata标题？

在Next.js 13的App目录结构中，RootLayout作为顶层服务器组件，无法直接从代码层面获取子页面配置的metadata.title，但可以通过以下可靠方式实现需求：

方法一：使用客户端组件的useMetadata钩子（推荐） #

Next.js 13.4及以上版本提供了useMetadata钩子，允许客户端组件访问当前页面的完整metadata。你可以把展示子标题的部分拆成客户端组件，在其中获取标题值：

1. 创建客户端组件Subheader.js：

'use client';

import { useMetadata } from 'next/metadata';

export default function Subheader() {
  const metadata = useMetadata();
  // 处理标题为空的情况，比如根页面未配置title时显示默认值
  const pageTitle = metadata.title || '默认标题';
  
  return (
    <div className="subheader">
      <h3>{pageTitle}</h3>
    </div>
  );
}

2. 在RootLayout中引入该组件：

import Subheader from './Subheader';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <HeaderComponent />
        <Subheader />
        <div className="content">{children}</div>
        <FooterComponent />
      </body>
    </html>
  );
}

这种方式完全支持SSR模式：服务器渲染时会正确注入页面的metadata值，客户端 hydration 后也能保持一致，同时兼容静态和动态生成的metadata.title（比如标题是通过函数动态生成的场景）。

方法二：手动传递标题（适合简单场景） #

如果你的页面数量较少且标题固定，可以在每个页面组件中通过上下文传递标题，但这种方式扩展性较差，不推荐用于复杂项目：

1. 创建全局上下文文件TitleContext.js：

'use client';

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

const TitleContext = createContext();

export function TitleProvider({ children, initialTitle }) {
  const [title, setTitle] = useState(initialTitle);
  return (
    <TitleContext.Provider value={{ title, setTitle }}>
      {children}
    </TitleContext.Provider>
  );
}

export function useTitle() {
  return useContext(TitleContext);
}

2. 在RootLayout中包裹上下文：

import { TitleProvider } from './TitleContext';
import Subheader from './Subheader';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <TitleProvider initialTitle="默认标题">
          <HeaderComponent />
          <Subheader />
          <div className="content">{children}</div>
          <FooterComponent />
        </TitleProvider>
      </body>
    </html>
  );
}

3. 在页面组件中更新上下文标题：

'use client';

import { useTitle } from '../TitleContext';

export const metadata = { title: "Login" };

export default function Login() {
  const { setTitle } = useTitle();
  // 组件挂载时设置标题
  useEffect(() => {
    setTitle("Login");
  }, []);
  
  return (
    <div>Login form</div>
  );
}

注意事项 #

• 不要尝试直接解析children来提取metadata：服务器组件的children是React Node结构，无法直接读取子页面的metadata导出值，这种方式不仅不可靠，还会破坏组件封装。
• useMetadata仅能在客户端组件中使用：RootLayout本身作为服务器组件，不能直接调用该钩子，必须拆分出客户端组件来处理标题展示。

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