Next.js 13中带'use client'的子页面如何修改Meta标题？

针对你遇到的带"use client"的客户端组件无法直接导出metadata的问题，以下是两种官方推荐的有效方案：

方案1：单独创建服务端组件的metadata文件 #

在子页面所在目录下新建一个metadata.ts文件（默认是服务端组件，无需加"use client"），在其中导出页面专属的metadata：

// app/contact/metadata.ts
import type { Metadata } from 'next'

export const metadata: Metadata = {
  title: 'Contact | Sakura Hagen',
  description: 'Contact Page of Sakura Hagen',
}

你的客户端页面app/contact/page.tsx保持原有逻辑即可，Next.js会自动识别同级目录下的metadata.ts并应用该配置。

方案2：在子目录下创建服务端Layout组件 #

如果不想单独拆分metadata文件，可以在子页面目录下新建一个服务端的layout.tsx，在其中导出metadata并渲染客户端页面：

// app/contact/layout.tsx
import type { Metadata } from 'next'

export const metadata: Metadata = {
  title: 'Contact | Sakura Hagen',
  description: 'Contact Page of Sakura Hagen',
}

export default function ContactLayout({ children }: { children: React.ReactNode }) {
  // 直接渲染子页面（客户端组件）
  return children
}

这个Layout作为服务端组件负责提供metadata，客户端页面的逻辑不受任何影响。

关于你之前尝试的方案问题说明 #

• next/head是Pages Router的专属API，在App Router下完全不生效，所以设置无效果。
• next-seo库目前对App Router的适配存在兼容性问题，官方更推荐使用内置的metadata系统。
• 在根layout.tsx中配置metadata并动态切换的方式，容易引发DOM操作冲突（即你遇到的removeChild报错），因为根Layout的metadata会和子页面的配置产生冲突，正确做法是将metadata按页面拆分到对应目录的服务端组件中。

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