Next.js

Question

I've set up a simple _document file based on the documentation to set the Favicon and use Next/Head to set the title of each page (and will ultimately put more metadata in there). However, since doing so I am getting the following warning (ultimately pointing to the _document file):

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

Everything appears to be working but the warning is kind of bugging me so I just wanted to check if I was doing things properly.

_document.js

import { Html, Head, Main, NextScript } from "next/document";
import Favicon from "../components/layout/favicon";

export default function Document() {
  return (
    <Html>
      <Head>
        <Favicon />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

example page

import Head from "next/head";

export default function Services() {
<div>
      <Head>
        <title>Services</title>
        <meta name="description" content="TBC" />
      </Head>
....
</div>
}

And I don't believe it's this but the Favicon component for completion's sake:

favicon.js

export default function Favicon() {
  return (
    <>
      <link
        rel="apple-touch-icon"
        sizes="180x180"
        href="/favicon/apple-touch-icon.png"
      />
      <link
        rel="icon"
        type="image/png"
        sizes="32x32"
        href="/favicon/favicon-32x32.png"
      />
      <link
        rel="icon"
        type="image/png"
        sizes="16x16"
        href="/favicon/favicon-16x16.png"
      />
      <link rel="manifest" href="/site.webmanifest" />
      <link
        rel="mask-icon"
        href="/favicon/safari-pinned-tab.svg"
        color="#5bbad5"
      />
      <meta name="msapplication-TileColor" content="#da532c" />
      <meta name="theme-color" content="#ffffff" />
    </>
  );
}

Hopefully that is sufficient information but do let me know if anything else is needed.

Cheers in advance.

jafar · Accepted Answer

title should not be used in _document.js's Head. Instead put it in _app as it is said in: nextjs.org docs

Next.js - title array warning when using _document and page-specific next/head

Tags:

javascript

reactjs

ashleytwo

1 Answers

jafar

Recent Activity

Donate For Us