🚀
【Next.js和訳】API Reference/ next/head
この記事について
株式会社 UnReact はプロジェクトの一環としてNext.js ドキュメントの和訳を行っています。
この記事は、next/headの記事を和訳したものです。
記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。
next/head
Examples
ページの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プロパティを使うと、次の例のように、タグが一度だけレンダリングされるようになります。
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" /> だけがレンダリングされます。 name 属性が重複する meta タグは自動的に処理されます。
head の内容は、コンポーネントのアンマウント時に消去されますので、他のページが追加した内容を推測せずに、各ページが head に必要なものを完全に定義するようにしてください。
title、meta、その他の要素（script など）は、Head 要素の直接の子として含まれるか、最大 1 レベルの<React.Fragment>や配列に包まれる必要があります。
next/head に手動で<script>を作成するのではなく、コンポーネント内で next/script を使用することをお勧めします。
Discussion