Next.js App目录下如何为不同页面设置自定义标题？

你遇到的问题核心是子目录的layout不能重复根布局的<html>、<body>结构：

根布局（app/layout.js）是整个应用的顶级布局，负责渲染最外层的<html>和<body>，所有子页面/子布局都会嵌套在根布局的children（也就是你的<main>标签）内部。你在account/layout.js里写了完整的<html>结构，相当于在<main>里又嵌套了一个<html>，完全违反DOM嵌套规则，同时出现多个<html>实例，所以触发报错。

正确修改页面标题的两种方式 #

方式1：在页面文件直接定义Metadata

Next.js 13的Metadata API可以让每个页面单独配置标题、描述等，根布局会自动合并这些内容到<head>里：

// app/account/page.js
export const metadata = {
  title: 'Account Page',
  description: '账户页面描述',
};

export default function AccountPage() {
  return <div>账户页面内容</div>;
}

方式2：在子布局里定义共享Metadata

如果account目录下有多个页面，想统一设置它们的标题前缀或共享描述，可以在子布局里定义Metadata，同时子布局只负责该目录下的共享UI：

// app/account/layout.js
export const metadata = {
  title: 'Account Page',
  description: '账户专区通用描述',
};

export default function AccountLayout({ children }) {
  // 这里可以添加账户页面共享的UI，比如侧边栏、顶部导航
  return <div className="account-container">{children}</div>;
}

注意事项 #

• 根布局（app/layout.js）只能有一个，负责整个应用的顶级DOM结构（<html>、<body>）。
• 子布局的作用是给目录下的页面添加共享UI或共享元数据，不能重复根布局的完整文档结构。

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