<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 タグは自動的に処理されます。
headの内容はコンポーネントがアンマウントされるとクリアされるため、各ページで必要なものを完全に定義し、他のページで追加された内容を前提としないようにしてください。
最小限のネストを使用する
title、meta またはその他の要素（例: script）は、Head 要素の直接の子として含めるか、最大1レベルの <React.Fragment> または配列でラップする必要があります。そうしないと、クライアントサイドナビゲーションでタグが正しく認識されません。
スクリプトには next/script を使用
next/head で手動で <script> を作成する代わりに、コンポーネント内で next/script を使用することを推奨します。
html や body タグは使用不可
<html> や <body> タグの属性を設定するために <Head> を使用することはできません。これを行うと next-head-count is missing エラーが発生します。next/head は HTML の <head> タグ内のタグのみを処理できます。