章节13

元数据

如果我们要修改页面的元数据，例如 `<title>` HTML 标签，该怎么办？

`<title>` 是 `<head>` HTML 标签的一部分，所以让我们深入了解如何在 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` 组件。

将 `Head` 添加到 `first-post.js`

我们还没有给 `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>
    </>
  );
}

尝试访问 https://:3000/posts/first-post。浏览器选项卡现在应该显示“First Post”。通过使用浏览器的开发者工具，您应该会看到 `title` 标签已添加到 `<head>` 中。

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

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

元数据

将 `Head` 添加到 `first-post.js`

您已完成本章13