<Head>
Examples
ページのheadに要素を追加するための組み込みの component を公開しています：
import Head from "next/head";
function IndexPage() {
return (
<div>
<Head>
<title>My page title</title>
</Head>
<p>Hello world!</p>
</div>
);
}
export default IndexPage;
Avoid duplicated tags
あなたの head内で重複するタグを避けるために、keyプロパティーを使用できます。これにより、タグが一度だけ描画されることを確認できます。次の例のようにします：
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;
この場合、<meta property="og:title" />という second だけがレンダリングされます。重複する key 属性を持つ meta タグは自動的に処理されます。
headの内容は component がアンマウントされる際にクリアされるので、各ページが必要な内容をheadに完全に定義して、他のページが追加した内容についての仮定をせずに確認してください。
Use minimal nesting
title、meta、または他の要素(例：script)は、Head要素の直接の 子として含めるか、それらを最大一つの<React.Fragment>または配列にラップする必要があります。そうでなければ、client 側のナビゲーションでタグは正確に取得されません。
Use next/script for scripts
私たちは、手動でnext/head内に<script>を作成するのではなく、あなたの component でnext/scriptを使用することをお勧めします。
No html or body tags
<Head>を使用して<html>または<body>タグの属性を設定することはできません。これにより、next-head-count is missing error が発生します。next/headは、 HTML の<head>タグ内のタグのみを処理できます。