🚀

【Next.js和訳】API Reference/ next/head

2021/10/03に公開約1,600字

この記事について

この記事は、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 タグは自動的に処理されます。

titlemeta、その他の要素(script など)は、Head 要素の直接の子として含まれるか、最大 1 レベルの<React.Fragment>や配列に包まれる必要があります。

Discussion

ログインするとコメントできます