next/head

示例

Next.js 暴露了一个内置组件,用于将 HTML 标签添加到页面的 head 中:

import Head from 'next/head'

function IndexPage() {
  return (
    <div>
      <Head>
        <title>My page title</title>
        <meta name="viewport" content="initial-scale=1.0, width=device-width" />
      </Head>
      <p>Hello world!</p>
    </div>
  )
}

export default IndexPage

为了避免在 head 中出现重复的 HTML 标签,你可以设置 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" /> 。具有相同 name 属性的 meta 标签将会被自动处理。

在 unmount 组件时,head 中的内容将会被清理,因此请确保每个页面都定义了其所需的所有内容,不要假设其它页面帮你添加任何内容。

titlemeta 或任何其它 HTML 标签(例如 script)必须作为 Head 元素的 直接 子元素, 或者被包裹在最多一层 <React.Fragment> 或数组中,否则在客户端导航时无法被正确识别并使用。