生成<head>

Examples

我们设置一个内置组件来装载<head>到页面中。

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

我们定义key属性来避免重复的<head>标签，保证<head>只渲染一次，如下所示：

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

只有第二个<meta name="viewport" />才被渲染。

注意：在卸载组件时，<head>的内容将被清除。请确保每个页面都在其<head>定义了所需要的内容，而不是假设其他页面已经加过了