<Head> | Next.js 日本語

例

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 プロパティを使用できます。これにより、以下の例のようにタグが1回だけレンダリングされることが保証されます:

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

この場合、2番目の <meta property="og:title" /> のみがレンダリングされます。重複した key 属性を持つ meta タグは自動的に処理されます。

head の内容はコンポーネントがアンマウントされるとクリアされるため、各ページで必要なものを完全に定義し、他のページで追加された内容を前提としないようにしてください。

title、meta または他の要素（例: script）は、Head 要素の直接の子として含めるか、最大1レベルの <React.Fragment> または配列でラップする必要があります。そうでない場合、クライアントサイドナビゲーションでタグが正しく認識されません。

next/head で手動で <script> を作成する代わりに、コンポーネント内で next/script を使用することを推奨します。