元素

如果我们想修改页面的元数据(如 HTML 标记),该怎么办?<title>

<title>是 HTML 标记的一部分,因此让我们深入了解如何在 Next.js 页面中修改标记。<head>``````<head>

在编辑器中打开并找到以下行:pages/index.js

Create Next App

请注意,将使用 而不是小写字母 。 是内置于 Next.js 中的 React 组件。它允许您修改页面的。<Head>``````<head>``````<Head>``````<head>

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

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

我们尚未在路线中添加 a。让我们添加一个。<title>``````/posts/first-post

打开文件,然后在文件开头添加从下一个/head 导入:pages/posts/first-post.js``````Head

import Head from ’next/head’

然后,更新导出的组件以包含该组件。现在,我们只添加标记:FirstPost``````Head``````title

export default function FirstPost() { return ( <> First Post

First Post

Back to home

</> ) }

尝试访问 http://localhost:3000/posts/first-post。浏览器选项卡现在应该显示"第一篇文章"。通过使用浏览器的开发人员工具,您应该会看到标记已添加到 。title``````<head>

若要了解有关该组件的详细信息,请查看下一个/头部的 API 参考Head

如果要自定义标记(例如添加属性),可以通过创建文件来执行此操作。有关详细信息,请参阅自定义文档文档<html>``````lang``````pages/_document.js