logoNext.js
ドキュメントブログ学習
はじめに/API リファレンス/コンポーネント/Head

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 プロパティを使用します。これにより、以下の例のようにタグが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 タグは自動的に処理されます。

補足: <title> と <base> タグは Next.js によって自動的に重複チェックが行われるため、これらのタグに key を使用する必要はありません。

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

最小限のネストを使用する

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

スクリプトには next/script を使用する

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

html や body タグは使用不可

<Head> を使用して <html> や <body> タグの属性を設定することはできません。これを行うと next-head-count is missing エラーが発生します。next/head は HTML の <head> タグ内のタグのみを処理できます。

Form

フォーム送信とクライアントサイドナビゲーションによる検索パラメータ更新を`<Form>`コンポーネントで処理する方法について学びます。

Image

Next.js アプリケーションで組み込みの `next/image` コンポーネントを使用して画像を最適化する方法

On this page