[Next.js] "title element received an array with more than 1 element as children."の解決方法
状況
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>
これで警告が発生しないようになった。