Next.js App Router下如何用客户端组件修改页面标题？

核心逻辑：元数据的层级覆盖规则 #

App Router里，子路由的元数据会自动覆盖父级layout.js中的对应字段，但要注意客户端组件的元数据限制——客户端组件在浏览器端渲染，无法在服务器端生成元数据，得用特殊方式处理。

方法1：服务器组件生成元数据（优先推荐） #

如果博客页面不需要复杂客户端交互，直接在单个博客页面（比如app/posts/[slug]/page.js）里导出异步的generateMetadata函数，动态拉取文章数据生成元数据：

// app/posts/[slug]/page.js
import { getPostData } from '@/lib/posts';

// 异步生成元数据，自动覆盖layout中的设置
export async function generateMetadata({ params }) {
  const post = await getPostData(params.slug);
  return {
    title: post.title,
    description: post.excerpt,
  };
}

export default function PostPage({ params }) {
  // 页面渲染内容
}

这种方式在服务器预渲染阶段就生成正确元数据，对SEO最友好。

方法2：客户端组件的元数据处理（非SSR场景） #

如果必须用客户端组件（比如需要大量交互），可以选以下两种方案：

• 方案A：动态修改DOM（适合SEO要求不高的场景）
  在客户端组件里用useEffect直接操作DOM修改标题和描述标签：

  'use client';
  import { useEffect } from 'react';
  
  export default function ClientPostPage({ post }) {
    useEffect(() => {
      document.title = post.title;
      const descMeta = document.querySelector('meta[name="description"]');
      if (descMeta) descMeta.content = post.excerpt;
    }, [post]);
  
    return <div>{/* 带交互的页面内容 */}</div>;
  }
  

  注意：这种方式的元数据是浏览器端动态设置的，部分不执行JS的爬虫可能抓取不到。

• 方案B：服务器组件+客户端组件拆分（兼顾SEO和交互）
  把页面拆成两部分：服务器组件负责生成元数据，客户端组件负责渲染交互内容：

  // app/posts/[slug]/page.js（服务器组件）
  import { getPostData } from '@/lib/posts';
  import ClientPostContent from './ClientPostContent';
  
  export async function generateMetadata({ params }) {
    const post = await getPostData(params.slug);
    return {
      title: post.title,
      description: post.excerpt,
    };
  }
  
  export default async function PostPage({ params }) {
    const post = await getPostData(params.slug);
    return <ClientPostContent post={post} />;
  }
  

  // app/posts/[slug]/ClientPostContent.js（客户端组件）
  'use client';
  
  export default function ClientPostContent({ post }) {
    return <div>{/* 带交互的页面内容 */}</div>;
  }
  

  这是客户端场景下的最优解，既保证SEO，又支持交互。

常见问题排查 #

• 子页面的generateMetadata必须是异步函数（如果需要获取数据），返回合法的元数据对象。
• 检查layout.js里是否设置了titleTemplate，如果有，子页面的标题会自动拼接模板（比如layout设titleTemplate: "%s | 我的博客"，子页面返回title: "文章标题"，最终标题是文章标题 | 我的博客）。
• 客户端组件不能导出Metadata函数，App Router不支持这一用法——这就是你之前尝试无效的原因。

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