Next.js：如何根据加载的组件动态设置<header>内容

方法一：页面嵌套Layout传标题（Server Component友好） #

这种方式不用修改Header的组件类型，完全基于Server Component运行，避免客户端/服务端冲突：

1. 改造Header组件，让它接收title属性：

// app/components/Header.js
export default function Header({ title }) {
  return (
    <header>
      <h1>{title}</h1>
    </header>
  )
}

2. 根layout里给Header设置默认标题：

// app/layout.js
import Header from './components/Header'

export const metadata = {
  title: '默认标题',
}

export default function RootLayout({ children }) {
  return (
    <html lang="zh-CN">
      <body>
        <Header title="首页" />
        {children}
      </body>
    </html>
  )
}

3. 在samad目录下新建专属layout，覆盖Header标题：

// app/samad/layout.js
import Header from '../components/Header'

export const metadata = {
  title: 'Samad', // 保持浏览器标签标题正常显示
}

export default function SamadLayout({ children }) {
  return (
    <>
      <Header title="Samad" />
      {children}
    </>
  )
}

每个页面都可以通过自己的嵌套Layout传递对应标题，逻辑清晰且完全兼容Server Component。

方法二：Header转Client Component，用路径判断标题 #

如果不想写多个嵌套Layout，可将Header转为Client Component，利用usePathname判断当前路径动态设置标题：

1. 标记Header为Client Component并添加路径判断逻辑：

// app/components/Header.js
'use client'

import { usePathname } from 'next/navigation'

export default function Header() {
  const pathname = usePathname()
  // 根据路径匹配对应标题，可扩展更多页面
  const pageTitle = pathname === '/samad' ? 'Samad' : '首页'

  return (
    <header>
      <h1>{pageTitle}</h1>
    </header>
  )
}

2. 根Layout正常引入Header即可，metadata依然在根Layout或页面中定义（必须放在Server Component里，和Header的Client标记不冲突）：

// app/layout.js
import Header from './components/Header'

export const metadata = {
  title: '默认标题',
}

export default function RootLayout({ children }) {
  return (
    <html lang="zh-CN">
      <body>
        <Header />
        {children}
      </body>
    </html>
  )
}

错误原因说明 #

• 用useState()报错：默认组件是Server Component，不能使用客户端状态钩子，必须加'use client'标记才能用。
• document.title报错：document是浏览器专属对象，Server Component在服务器端渲染时不存在这个对象，只能在Client Component里使用。

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