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

2 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>

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

Related Articles

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

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

[初学者向け] Next.js で開発を始める方法

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

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

概要 / 方法 / その他

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

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

[Next.js] Qiita と Zenn の 記事一覧(フィード)を取得する方法

やりたいこと / 環境 / フィードの仕様 / 実装