Next.jsのnext/headとnext/documentについて

2023/06/06

#開発
#NextJS
#React

こんにちは、CURUCURUエンジニアの水谷です。今日はnext/headの仕様で詰まったところがあったので、備忘録として残しておこうと思います。１〜２分くらいで読めると思います。入社して１ヶ月半くらいのエンジニアの備忘録です。

next/headとnext/documentについて

next/headについて

next/headはheadの情報を入れておくとときに使用しますが。今回はmetaタグを入れるときの話です。 SEO対策をしようと思ったら、ここを触ると思います。

next/headは、下記のように使用します。

import Head from 'next/head'

function Hoge() {
  return (
 <Head>
  <meta property="og:title" content="CURUCURU">
 </Head>
 );
}

上記の感じでHeadで囲むとheadタグに入れてくれます。

next/documentについて

documentは全ページのheadを統一して管理するときに便利です。

import Document, { Html, Head, Main, NextScript } from 'next/document'

class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head>
          <meta property="og:title" content="CURUCURU">
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

わかりやすさのため、Headの中を同じにしています。

で、今回沼ったところですが、上記のコードのようにnext/documentでmetaタグを使用すると、next/headでも使用しているので二重に出てきます。

next/headで管理はできる

next/headでmetaを使用する場合、key属性を設定することで、重複を防ぐことが出来ます。 ▶公式ドキュメント

上記のドキュメントの通りで、同じkey属性を設定しておけば、後に書いた方のみがレンダリングされます。

しかし、試してみたところnext/documentでkey属性を設定してもうまくいきませんでした。これはnext/headのみで作用するようです。

まとめ

ページごとで内容が変わるような情報はnext/head、全ページで共通の情報はnext/documentという形が良いなという結論で今回は落ち着きました。

以上、１ヶ月半の水谷でした。