🚀
【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