Menu

<Head>

例

ページのheadに要素を追加するための組み込みコンポーネントを公開しています：

import Head from 'next/head'
 
function IndexPage() {
  return (
    <div>
      <Head>
        <title>ページのタイトル</title>
      </Head>
      <p>こんにちは、世界！</p>
    </div>
  )
}
 
export default IndexPage

重複タグの回避

head内の重複タグを避けるには、keyプロパティを使用します。これにより、タグが1回だけレンダリングされることを保証します：

import Head from 'next/head'
 
function IndexPage() {
  return (
    <div>
      <Head>
        <title>ページのタイトル</title>
        <meta property="og:title" content="ページのタイトル" key="title" />
      </Head>
      <Head>
        <meta property="og:title" content="新しいタイトル" key="title" />
      </Head>
      <p>こんにちは、世界！</p>
    </div>
  )
}
 
export default IndexPage

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

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

headの内容はコンポーネントのアンマウント時にクリアされるため、他のページが追加したものを想定せず、各ページで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>タグ内のタグのみを処理できます。