@next/next/no-title-in-document-head

Every page shares pages/_document.js, so a <title> in it gives every page the same title, and it can clash with the title a page sets for itself. Set the title in each page, with Head from next/head.

The rule reports a <title> that's a direct child of the Head you import from next/document.

Configure#

Off by default. To turn it on:

bunfig.toml

[lint.rules]
"@next/next/no-title-in-document-head" = "error" # or "warn"

Examples#

pages/_document.jsx1 problem

import { Head, Html, Main, NextScript } from "next/document";

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

Not reported, in a page:

pages/index.jsxNo problems

import Head from "next/head";

export default function Home() {
  return (
    <Head>
      <title>My shop</title>
    </Head>
  );
}

The rule only follows the first name in the import's braces. If Head isn't first, nothing is reported:

pages/_document.jsxNo problems

import { Html, Head } from "next/document";

export default function Document() {
  return (
    <Html>
      <Head>
        <title>My shop</title>
      </Head>
    </Html>
  );
}