Sponsor
ChatHubChatHub — Use GPT-4, Gemini, Claude 3.5 and more chatbots side-by-side
ここをクリック
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の内容はコンポーネントのアンマウント時にクリアされるため、他のページが追加したものを想定せず、各ページで必要なものを完全に定義してください。

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

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

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

コンポーネント内でスクリプトを手動で作成する代わりに、next/scriptの使用をお勧めします。

htmlまたはbodyタグは使用不可

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