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

> Disallow importing `next/document` outside `pages/_document.js`

`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/`.

{/* Generated by src/codegen/lint-rule-docs.ts. Do not edit this section. */}

## Configure

Off by default. To turn it on:

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

{/* End of the generated section. */}

## Examples

Reported:

{/* bad {"filename": "pages/index.jsx"} */}
```jsx
import { Head } from "next/document";

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

Not reported:

{/* good {"filename": "pages/index.jsx"} */}
```jsx
import Head from "next/head";

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

{/* good {"filename": "pages/_document.jsx"} */}
```jsx
import { Head, Html, Main, NextScript } from "next/document";

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