Next 13 app目录下，如何设置客户端组件的<title>标签？

在Next.js 13的/app目录中，添加了'use client'指令的客户端组件确实无法直接导出metadata，可以通过以下几种方案解决你的标题设置需求：

方案1：为/login路径创建单独的服务器组件Layout #

在/app/login目录下新建layout.tsx文件，该文件默认是服务器组件，不受客户端组件限制，可直接使用metadata API设置标题：

// app/login/layout.tsx
export const metadata = {
  title: `Login | ${process.env.NEXT_PUBLIC_APP_NAME}`,
};

export default function LoginLayout({ children }: { children: React.ReactNode }) {
  return <>{children}</>;
}

你的<LoginPage>组件无需修改，保持'use client'指令即可，它会作为子组件被这个Layout包裹，页面标题会被正确设置。

方案2：拆分页面为服务器组件Wrapper和客户端组件 #

将page.tsx作为服务器组件负责导出metadata，再导入客户端的<LoginPage>组件：

// app/login/page.tsx
import LoginPage from './LoginPage';

export const metadata = {
  title: `Login | ${process.env.NEXT_PUBLIC_APP_NAME}`,
};

export default function LoginPageWrapper() {
  return <LoginPage />;
}

// app/login/LoginPage.tsx
'use client';

// 你的表单逻辑（使用hooks管理数据）
export default function LoginPage() {
  // 示例hooks
  // const [formData, setFormData] = useState({ email: '', password: '' });
  
  return <div>登录表单内容</div>;
}

这种方式利用了page.tsx默认是服务器组件的特性，既保留了客户端组件的交互能力，又能通过服务器组件设置页面metadata。

方案3：客户端动态设置标题（仅推荐动态场景） #

如果需要根据客户端状态动态修改标题，可以使用useEffect操作document.title，但这种方式不如前两种方案对SEO友好（服务器渲染时不会设置标题，客户端加载后才更新）：

// app/login/LoginPage.tsx
'use client';
import { useEffect } from 'react';

export default function LoginPage() {
  useEffect(() => {
    document.title = `Login | ${process.env.NEXT_PUBLIC_APP_NAME}`;
  }, []);

  // 表单逻辑
  return <div>登录表单内容</div>;
}

优先推荐前两种服务器端设置metadata的方案，它们能确保标题在服务器渲染阶段就被正确注入，更利于搜索引擎抓取。

内容的提问来源于stack exchange，提问作者xandert.93