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 をコンポーネントで利用することを勧めます。