页面路由 (Pages Router): 元数据

如果我们想修改页面的元数据，比如 HTML 的 <title> 标签，该怎么做呢？

<title> 是 HTML <head> 标签的一部分，下面我们就来探讨如何在 Next.js 页面中修改 <head> 标签。

在编辑器中打开 pages/index.js 文件，找到以下代码：

<Head>
  <title>Create Next App</title>
  <link rel="icon" href="/favicon.ico" />
</Head>

注意这里使用的是大写的 <Head> 而不是小写的 <head>。<Head> 是 Next.js 内置的 React 组件，它允许你修改页面的 <head> 部分。

你可以从 next/head 模块导入 Head 组件。

为 first-post.js 添加 Head

我们还没有为 /posts/first-post 路由添加 <title>。现在让我们来添加一个。

打开 pages/posts/first-post.js 文件，在文件开头添加从 next/head 导入 Head 的语句：

import Head from 'next/head';

然后更新导出的 FirstPost 组件，加入 Head 组件。目前我们只添加 title 标签：

export default function FirstPost() {
  return (
    <>
      <Head>
        <title>First Post</title>
      </Head>
      <h1>First Post</h1>
      <h2>
        <Link href="/">← Back to home</Link>
      </h2>
    </>
  );
}

尝试访问 http://localhost:3000/posts/first-post。现在浏览器标签页应该会显示"First Post"。使用浏览器的开发者工具，你可以看到 <head> 中已经添加了 title 标签。

要了解更多关于 Head 组件的信息，请查看 next/head API 参考文档。

如果你想自定义 <html> 标签，例如添加 lang 属性，可以通过创建 pages/_document.js 文件来实现。更多内容请参阅自定义 Document 文档。

元数据

为 first-post.js 添加 Head

On this page