Next.js 14 App Router中如何同步Metadata标题至页面UI？

直接在layout.tsx中访问自身的metadata.title只能拿到布局层的标题，页面自定义的metadata不会向上传递给布局，所以无法同步。以下是两种可行的实现方式：

方法一：利用document.title与路由监听（最简单） #

Next.js会自动将页面generateMetadata返回的title设置为浏览器的document.title，我们可以通过客户端组件监听路由变化，同步更新UI标题：

1. 创建一个客户端组件PageTitle.tsx：

'use client';

import { useState, useEffect } from 'react';
import { useRouter } from 'next/navigation';

export default function PageTitle() {
  const router = useRouter();
  const [pageTitle, setPageTitle] = useState(document.title);

  useEffect(() => {
    const updateTitle = () => setPageTitle(document.title);
    // 监听路由切换事件
    const unsubscribe = router.subscribe(updateTitle);
    
    return () => unsubscribe();
  }, [router]);

  return <h1>{pageTitle}</h1>;
}

2. 在layout.tsx中引入该组件：

// app/layout.tsx
import PageTitle from './PageTitle';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="zh-CN">
      <body>
        <PageTitle />
        {children}
      </body>
    </html>
  );
}

这种方式无需额外配置，只要页面通过generateMetadata设置了title，UI标题就会自动同步。

方法二：自定义Meta标签+服务端渲染兼容（更严谨） #

如果需要在服务端渲染时也能正确显示初始标题，可以通过自定义Meta标签传递标题，再由客户端组件读取：

1. 在布局和页面的generateMetadata中添加自定义Meta标签：

// app/layout.tsx
export async function generateMetadata() {
  return {
    title: '首页',
    other: {
      'page-title': '首页', // 自定义Meta标签，用于传递标题
    },
  };
}

// app/blog/page.tsx
export async function generateMetadata() {
  return {
    title: '博客',
    other: {
      'page-title': '博客',
    },
  };
}

2. 修改客户端组件PageTitle.tsx，优先读取自定义Meta标签的内容：

'use client';

import { useState, useEffect } from 'react';
import { useRouter } from 'next/navigation';

export default function PageTitle() {
  const router = useRouter();
  const [pageTitle, setPageTitle] = useState(() => {
    if (typeof document === 'undefined') return '';
    const meta = document.querySelector('meta[name="page-title"]');
    return meta?.getAttribute('content') || document.title;
  });

  useEffect(() => {
    const updateTitle = () => {
      const meta = document.querySelector('meta[name="page-title"]');
      setPageTitle(meta?.getAttribute('content') || document.title);
    };

    const unsubscribe = router.subscribe(updateTitle);
    return () => unsubscribe();
  }, [router]);

  return <h1>{pageTitle}</h1>;
}

这种方式解决了服务端渲染时document不存在的问题，初始加载就能显示正确标题。

关键说明 #

• 布局的metadata和页面的metadata是独立的，页面的title只会覆盖浏览器标签的标题，不会传递给布局层，所以无法直接在layout.tsx中获取页面的metadata.title。
• 客户端组件是实现跨页面标题同步的核心，因为只有客户端能监听路由变化和访问document对象。

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