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

2022/07/15

1 min read

hiroweb developer

状況

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>

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