如何使用 Next.js 中的应用程序路由器的客户端组件更改页面标题？

Question

我正在使用 Next.js 构建一个博客，并利用新的应用程序路由器进行导航。但是，我遇到一个问题，每个博客页面都显示相同的标题和描述。在研究代码后，我发现标题和描述从layout.js文件中导出为Metadata()，这似乎是问题的主要原因。当我尝试在各个博客页面中使用 Metadata() 时，它没有按预期工作。

有没有办法解决这个问题，并且每个博客页面都有不同的标题和描述，即使在使用应用程序路由器并包含非 SSR 页面（如客户端）时也是如此？对于如何解决此问题的任何指导或建议，我将不胜感激。

Answer 1

在 Next.js 13 中，您可以通过从任何 layout.js 或 page.js 文件导出 Metadata 对象来定义静态元数据，但您可能希望为每个页面生成动态元数据（取决于获取的内容的元数据）对于该页面）。要执行动态元数据，您需要导出generateMetadata函数

您也可能会发现使用像next-seo这样的包更容易，尽管我从 Next.js 12 开始就没有使用它，并且不知道它是否适用于新的应用程序目录。