在 next.js app router 中，`metadata` 配置仅支持服务器组件。当页面组件标记为 `'use client'` 时，将无法通过 `metadata` 导出设置页面标题。解决此问题的最佳实践是将页面拆分为一个服务器组件（负责元数据和整体布局）和一个客户端组件（处理交互逻辑），并由服务器组件导入客户端组件，从而实现页面标题的正确设置并优化应用性能。
理解 Next.js App Router 中的元数据与组件类型
Next.js 13 及更高版本引入的 App Router 架构，将组件区分为服务器组件 (Server Components) 和客户端组件 (Client Components)。这种区分是 Next.js 优化性能和开发体验的核心。
服务器组件 (Server Components)： 服务器组件在服务器上渲染，不发送到客户端，因此它们不具备交互性（如 onClick 事件、useState 等 React Hook）。然而，它们能够直接访问文件系统、数据库，并且是设置页面元数据（如 title、description 等）的唯一途径。无论是静态的 export const metadata 对象，还是动态的 export async function generateMetadata() 函数，都必须在服务器组件中定义。
客户端组件 (Client Components)： 客户端组件在浏览器中渲染，拥有完整的交互能力。它们通过 'use client' 指令明确声明。由于客户端组件在浏览器中运行，它们无法直接访问服务器端资源，也无法导出 metadata。尝试在标记为 'use client' 的组件中定义 metadata 会被 Next.js 忽略，导致页面标题等元数据无法生效。
客户端组件无法设置页面标题的原因
当一个页面文件（例如 app/demo/page.js）以 'use client' 开头时，Next.js 会将其视为一个客户端组件。在这种情况下，即使您在同一文件中导出了 metadata 对象，Next.js 也不会处理它，因为元数据功能是服务器组件专属的。这通常会导致页面标题显示为默认值（例如 localhost:3000/demo），而不是您期望的自定义标题。
解决方案：分离服务器与客户端逻辑
为了解决客户端组件无法设置元数据的问题，同时又能保留其交互性，Next.js 推荐的策略是将应用程序逻辑进行分离：
- 服务器组件负责元数据和页面骨架：创建一个不带 'use client' 指令的页面文件（它将默认作为服务器组件），在此文件中定义 metadata 并构建页面的基本结构。
- 客户端组件负责交互逻辑：将所有需要交互性的代码（如 useState、onClick 事件等）封装在一个单独的文件中，并将其标记为 'use client'。
- 服务器组件导入并渲染客户端组件：在服务器组件中，像普通 React 组件一样导入并使用客户端组件。
这种方法遵循了 Next.js 的“将客户端组件移至组件树的叶子节点 (Moving Client Components to the leaves)”的原则，有助于提高应用程序的性能，因为它最大限度地减少了发送到客户端的 JavaScript 数量。
实施步骤与示例代码
假设您有一个 /demo 路由，需要交互功能，并且希望设置自定义页面标题。
步骤 1：创建服务器组件页面
在 app/demo/page.js 文件中，移除 'use client' 指令。在此文件中，您可以定义页面的元数据，并导入您的交互式客户端组件。
// app/demo/page.js
import DemoClientComponent from "./DemoClientComponent"; // 导入客户端组件
export const metadata = {
title: 'Demo - ModalJS', // 在服务器组件中定义页面标题
description: '一个展示模态框功能的演示页面',
};
export default function DemoPage() {
return (
<div>
<h1>欢迎来到演示页面</h1>
<DemoClientComponent /> {/* 渲染客户端组件 */}
</div>
);
}步骤 2：创建客户端组件
在同一个目录下创建一个新的文件，例如 app/demo/DemoClientComponent.js。在此文件中，添加 'use client' 指令，并实现所有需要交互性的逻辑。
// app/demo/DemoClientComponent.js
'use client'; // 明确声明这是一个客户端组件
import React, { useState } from 'react';
// 假设 ModalJS 是一个需要客户端环境才能运行的库
// import ModalJS from 'your-modal-library';
import styles from './demo.module.css'; // 假设有对应的CSS模块
export default function DemoClientComponent() {
const [title, setTitle] = useState("Title of your modal");
const [desc, setDesc] = useState("You description goes here");
const [theme, setTheme] = useState("light");
const handleclick = () => {
// 假设 ModalJS 库的使用方式
// const modal = new ModalJS({ title, desc, theme });
// modal.show(); // 触发显示模态框
alert(`显示模态框：\n标题: ${title}\n描述: ${desc}\n主题: ${theme}`);
};
return (
<section id={styles.demosection}>
<div className={styles.demotitle}>Demo</div>
<div className={styles.form}>
<label htmlFor="title" className={styles.label}>标题:</label> <br />
<input
type="text"
name="title"
id={styles.title}
className={styles.input}
value={title}
onChange={(e) => setTitle(e.target.value)}
/>
<br /><br />
<label htmlFor="desc" className={styles.label}>描述:</label> <br />
<input
type="text"
name="desc"
id={styles.desc}
className={styles.input}
value={desc}
onChange={(e) => setDesc(e.target.value)}
/>
<br /><br />
<label htmlFor="theme" className={styles.label}>主题:</label> <br />
<select
name="theme"
id={styles.theme}
className={styles.input}
onChange={(e) => setTheme(e.target.value)}
value={theme}
>
<option value="light">亮色</option>
<option value="dark">暗色</option>
</select>
<br /><br />
</div>
<div className={styles.showbtndiv}>
<button className={styles.showbtn} onClick={handleclick}>显示模态框</button>
</div>
</section>
);
}通过以上分离，app/demo/page.js 作为服务器组件，可以成功导出 metadata 来设置页面标题，而 app/demo/DemoClientComponent.js 则专注于提供交互功能，且被服务器组件正确渲染。
注意事项
- metadata 仅限服务器组件：始终记住，metadata（包括 generateMetadata 函数）只能在服务器组件中定义。
- 客户端组件的叶子节点原则：尽量将 'use client' 组件放置在组件树的末端（叶子节点），这意味着它们只负责特定的交互区域，而不是整个页面布局。这有助于减少客户端 JavaScript 包的大小。
- 组件通信：如果服务器组件需要向客户端组件传递数据，可以通过 props 进行。客户端组件无法直接访问服务器组件的状态或数据源，但可以通过 prop 接收服务器组件渲染时传递的值。
总结
在 Next.js App Router 中，正确管理元数据和组件类型是构建高性能、可维护应用程序的关键。当遇到客户端组件无法设置页面标题的问题时，核心解决方案在于遵循 Next.js 的最佳实践：将元数据定义和页面骨架保留在服务器组件中，而将所有交互逻辑封装在独立的客户端组件中，并由服务器组件导入使用。这种分离不仅解决了元数据问题，还优化了应用程序的加载性能和用户体验。
