<Head> | Next.js - 繁體中文

範例

我們提供了一個內建元件，用於將元素附加到頁面的 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 標籤會自動被處理。

head 的內容會在元件卸載時被清除，因此請確保每個頁面完全定義了它在 head 中需要的內容，而不要假設其他頁面添加了什麼。

title、meta 或其他元素（例如 script）需要作為 Head 元件的直接子元素，
或者最多包裝在一層 <React.Fragment> 或陣列中——否則在客戶端導航時，這些標籤將無法被正確識別。

我們建議在元件中使用 next/script，而不是手動在 next/head 中創建 <script>。