<Head>

示例

我们公开了一个内置组件，用于将元素附加到页面的 head 中

import Head from 'next/head'
 
function IndexPage() {
  return (
    <div>
      <Head>
        <title>My page title</title>
      </Head>
      <p>Hello world!</p>
    </div>
  )
}
 
export default IndexPage

避免重复标签

为了避免在 head 中出现重复的标签，您可以使用 key 属性，这将确保标签只渲染一次，如下例所示

import Head from 'next/head'
 
function IndexPage() {
  return (
    <div>
      <Head>
        <title>My page title</title>
        <meta property="og:title" content="My page title" key="title" />
      </Head>
      <Head>
        <meta property="og:title" content="My new title" key="title" />
      </Head>
      <p>Hello world!</p>
    </div>
  )
}
 
export default IndexPage

在这种情况下，只有第二个 <meta property="og:title" /> 被渲染。具有重复 key 属性的 meta 标签会自动处理。

值得注意的是：Next.js 会自动检查 <title> 和 <base> 标签的重复项，因此对于这些标签，无需使用 key。

head 的内容在组件卸载时会被清除，因此请确保每个页面都完整地定义了它在 head 中需要的内容，而不要假设其他页面添加了什么内容。

使用最少的嵌套

title、meta 或任何其他元素（例如 script）需要作为 Head 元素的直接子元素包含，或包装在一个级别的 <React.Fragment> 或数组中——否则，在客户端导航中不会正确拾取这些标签。

对于脚本，使用 `next/script`

我们建议在您的组件中使用 next/script，而不是手动在 next/head 中创建 <script>。

没有 `html` 或 `body` 标签

您**不能**使用 <Head> 来设置 <html> 或 <body> 标签的属性。这会导致 next-head-count is missing 错误。next/head 只能处理 HTML <head> 标签内的标签。