Next.js App Router中如何读取页面静态Metadata？

有两种可靠的方法可以实现需求：

方法一：通过headers()读取x-nextjs-metadata头 #

Next.js会将当前路由的metadata序列化为x-nextjs-metadata请求头，你可以在根layout中读取并解析这个头来获取页面标题：

import { headers } from 'next/headers';

export default function RootLayout({ children }) {
  const headerList = headers();
  // 解析metadata，处理空值情况
  const pageMetadata = JSON.parse(headerList.get('x-nextjs-metadata') || '{}');
  const pageTitle = pageMetadata.title || '默认站点标题';

  return (
    <html lang="zh-CN">
      <body>
        <header>
          <h2>{pageTitle}</h2>
        </header>
        <main>{children}</main>
      </body>
    </html>
  );
}

在子路由页面（比如app/blog/page.js）中定义静态metadata：

export const metadata = {
  title: '博客首页',
};

export default function BlogPage() {
  return <div>博客内容</div>;
}

访问/blog时，header会自动显示“博客首页”，未定义title的路由会使用默认标题。

方法二：手动维护路由-标题映射（适合少量路由场景） #

如果你的路由数量不多，可以创建一个映射对象，结合usePathname获取当前路径来匹配标题：

'use client';
import { usePathname } from 'next/navigation';

// 路由与标题的映射表
const routeTitles = {
  '/': '首页',
  '/about': '关于我们',
  '/blog': '博客首页',
};

export default function RootLayout({ children }) {
  const pathname = usePathname();
  const pageTitle = routeTitles[pathname] || '默认站点标题';

  return (
    <html lang="zh-CN">
      <body>
        <header>
          <h2>{pageTitle}</h2>
        </header>
        <main>{children}</main>
      </body>
    </html>
  );
}

这种方法不需要依赖请求头，逻辑更直观，但需要手动同步路由和标题的变化。

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