Skip to content

Next.js

next/head

例

Next.js はページの 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;

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 の内容は削除されます。そのため、他のページで追加したものは考慮せず、各ページの head に必要なものを完全に定義できているか確認してください。

title 、 meta やその他の要素（script など）は Head 要素の直下の子要素として含まれているか、 <React.Fragment> や配列の単一階層にラップされている必要があります。そうでなければ、タグはクライアント側のナビゲーションで正しく取得されません。

<script> タグを next/head のなかで手動で作る代わりにnext/script をコンポーネントで利用することを勧めます。

next/imagenext/amp