Next.js主布局为客户端组件时，如何设置首页标签标题？

下面是几种实用的解决方案，根据你的场景选择：

方法1：拆分服务端根Layout与客户端逻辑（推荐） #

不要直接给根layout.tsx加"use client"，把需要客户端交互的部分抽成独立的子组件，让根Layout保持服务端组件特性，这样就能正常导出metadata了。

示例代码：

// app/layout.tsx（服务端组件，无"use client"）
import ClientLayoutWrapper from './ClientLayoutWrapper';

export const metadata = {
  title: '你的首页标题',
  // 其他metadata配置...
};

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

// app/ClientLayoutWrapper.tsx（客户端组件）
'use client';

export default function ClientLayoutWrapper({
  children,
}: {
  children: React.ReactNode;
}) {
  // 这里写需要客户端交互的逻辑，比如状态、事件监听等
  return <div>{children}</div>;
}

方法2：在客户端组件中使用next/head组件 #

在首页的page.tsx或者客户端Layout里，导入next/head的Head组件，直接设置页面标题。

示例代码：

// app/page.tsx（如果是客户端组件，或者在客户端Layout里）
'use client';
import Head from 'next/head';

export default function Home() {
  return (
    <>
      <Head>
        <title>你的首页标题</title>
      </Head>
      {/* 页面内容 */}
    </>
  );
}

注意：这种方式的标题会在客户端渲染后更新，若需要SEO友好的服务端渲染标题，优先选方法1。

方法3：自定义_document.tsx（全局默认标题） #

在app目录下创建_document.tsx（服务端组件），设置全局默认标题，适合需要统一全站标题的场景。

示例代码：

// app/_document.tsx
import { Html, Head, Main, NextScript } from 'next/document';

export default function Document() {
  return (
    <Html lang="zh-CN">
      <Head>
        <title>默认首页标题</title>
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

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