@next/next/no-document-import-in-page

Html, Head, Main and NextScript from next/document only work while the server renders pages/_document.js. If you use them in a page or a component, they fail when the page renders.

The rule reports every import of next/document in a file that isn't pages/_document.* or inside pages/_document/.

Configure

Off by default. To turn it on:

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

Examples

Reported:

import { Head } from "next/document";

export default function Home() {
  return (
    <Head>
      <meta name="theme-color" content="#111111" />
    </Head>
  );
}

Not reported:

import Head from "next/head";

export default function Home() {
  return (
    <Head>
      <meta name="theme-color" content="#111111" />
    </Head>
  );
}

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

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