@next/next/no-duplicate-head

Each <Head> from next/document renders a whole <head>, with the styles and scripts Next.js adds for the page. A second one repeats all of that. Put your tags in one <Head>.

The rule reports any file with two or more <Head> elements, if Head is an imported name.

Configure#

Off by default. To turn it on:

bunfig.toml

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

Examples#

example.jsx1 problem

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

export default function Document() {
  return (
    <Html>
      <Head>
        <meta name="theme-color" content="#111111" />
      </Head>
      <Head>
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

example.jsxNo problems

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

export default function Document() {
  return (
    <Html>
      <Head>
        <meta name="theme-color" content="#111111" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

When not to use it#

The rule doesn't check where Head comes from. Next.js merges several <Head> elements from next/head, but two of them in one file are still reported:

example.jsx1 problem

import Head from "next/head";

export default function Post({ post }) {
  return (
    <article>
      <Head>
        <title>{post.title}</title>
      </Head>
      {post.draft && (
        <Head>
          <meta name="robots" content="noindex" />
        </Head>
      )}
    </article>
  );
}