如果我们想要修改页面的元数据，例如 <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://127.0.0.1:3000/posts/first-post。浏览器标签现在应该显示“First Post”。通过使用浏览器的开发者工具，你应该会看到 title 标签已添加到 <head> 中。
要了解更多关于
Head组件的信息，请查看next/head的 API 参考。如果你想自定义
<html>标签，例如添加lang属性，你可以通过创建一个pages/_document.js文件来实现。在 自定义Document文档 中了解更多信息。