章节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>
    </>
  );
}

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

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

如果你想自定义 <html> 标签，例如添加 lang 属性，你可以通过创建一个 pages/_document.js 文件来实现。在自定义 Document 文档中了解更多信息。

元数据

将 Head 添加到 first-post.js

你已完成本章节13

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