next nexthead的配置

27 min read

next生成页面head标签 next/head的配置

使用next/head这个内建组件可以为页面添加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

为了防止重复增加标签元素,可以为每个标签组件增加唯一的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

在这个案例中,只有第二个标签会被渲染

title,meta,script这些标签必须做为HEAD组件的直接子元素,或者由<React.Fragment>来包裹,否则无法在页面上正常显示