introduction

假设我们暴露了一个内置组件head并向页面追加元素 …

  1. import Head from 'next/head'
  3. function IndexPage() {
  4.   return (
  5.     <div>
  6.       <Head>
  7.         <title>My page title</title>
  8.         <meta name="viewport" content="initial-scale=1.0, width=device-width" />
  9.       </Head>
  10.       <p>Hello world!</p>
  11.     </div>
  12.   )
  13. }
  15. export default IndexPage

为了避免head中重复的标签,你能够使用key属性,这确保标签仅被渲染一次,如下实例所示:

  1. import Head from 'next/head'
  3. function IndexPage() {
  4.   return (
  5.     <div>
  6.       <Head>
  7.         <title>My page title</title>
  8.         <meta property="og:title" content="My page title" key="title" />
  9.       </Head>
  10.       <Head>
  11.         <meta property="og:title" content="My new title" key="title" />
  12.       </Head>
  13.       <p>Hello world!</p>
  14.     </div>
  15.   )
  16. }
  18. export default IndexPage

head的内容在卸载组件的时候会清除,因此确保每一个页面完整的定义head中到底需要那些,不用假设那些是其他页面增加的 …

title,meta或者任何其他元素(例如script) 需要包含为Head元素的直接子元素,或者包装在只有一个级别<React.Fragment>或者数组 - 否则这些标签不会在客户端导航时正确的捆绑 ..

我们推荐使用next/script在你的组件而不是手动在next/head中创建<script>