[Next.js] "title element received an array with more than 1 element as children."解決方法

1 min read

状況

Next.js と React のアップデート後に下記の警告が発生した。

Warning: A title element received an array with more than 1 element as children. In browsers title Elements can only have Text Nodes as children. If the children being rendered output more than a single text node in aggregate the browser will display markup and comments as text in the title and hydration will likely fail and fall back to client rendering

環境

  • next: v12.2.2
  • react: v18.2.0
  • react-dom: v18.2.0

解決方法

当該箇所の<title>要素は以下のような実装をしていた。

<Head>
  <title key="title">Archive - {SITE.NAME}</title>
</Head>

<title>要素が受け取れるテキストノードは 1 つのようなのだが、Archive - {SITE.NAME}だとテキストノードが 1 つ以上になっているようで、その旨の警告が出ていた。


テキストノードを 1 つだけ渡すように、以下のような指定に変更した。

<Head>
  <title key="title">{`Archive - ${SITE.NAME}`}</title>
</Head>

これで警告が発生しないようになった。

このページをシェアする

関連タグ

関連記事

StorybookでEmotion 11がエラーになる問題の解決方法

状況 / 環境 / 解決方法 / 参考

[Next.js] Google Adsenseを表示させる方法

環境 / 条件 / 方法

CSS in JSとは何か

想定読者 / そもそも JS フレームワーク(React、Vue.js)を採用する理由とは何か / 「命令的 UI」 と 「宣言的 UI」 / 「命令的 UI」 VS 「宣言的 UI」 / CSS in JS とは / CSS in JS ライブラリ / Emotion の使い方 / 利用するメリット / 利用するデメ

[React 18] useEffect が2回実行されてしまう問題の対処法

確認した環境 / 解決方法 / 参考

[初学者向け] Next.js で開発を始める前に知っておきたいポイントと開発方法

想定読者 / 執筆同時のNext.js / Next.js とは / なぜ、Next.js を使うのか / セットアップ / ファイルベースルーティング / 事前レンダリング(プリレンダリング)とは / 参考

[Next.js] Emotion SWCを有効にする方法

概要 / 方法 / その他