Next.js Title Warning Problem
You’ve got this error when updating your project in Next.js using 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
This is your current implementation of the code that returns a warning:
<Head>
<title>Home - {SITE.NAME}</title>
</Head>The reason for the warning is that the <title> tag can only receive one text node. A text node encapsulates XML character content. It seems that the current code <title>Home – {SITE.NAME}</title> consists of more than one text node. (A text can be empty or have a maximum of one text node).
Solution
The solution to the title element received an array with more than 1 element as children’s warning is to wrap the content in Javascript Template Literals (using backticks – `). Here’s what the solution looks like:
<Head>
<title>{`Home - ${SITE.NAME}`}</title>
</Head>Once this change has been made, this warning will go away. Thank you.
