🚀
【Next.js和訳】API Reference/ next/head
この記事について
この記事は、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 タグは自動的に処理されます。
title、meta、その他の要素（script など）は、Head 要素の直接の子として含まれるか、最大 1 レベルの<React.Fragment>や配列に包まれる必要があります。
Discussion