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> 标签内的元素。

避免重复标签

最小化嵌套层级

使用 next/script 加载脚本

不支持 html 或 body 标签

On this page

使用 `next/script` 加载脚本

不支持 `html` 或 `body` 标签