Skip to content

nextjs/no-head-import-in-document Correctness

What it does

Prevents the usage of next/head inside a Next.js document.

Why is this bad?

Importing next/head inside pages/_document.js can cause unexpected issues in your Next.js application.

Examples

Examples of incorrect code for this rule:

jsx
import Document, { Html, Main, NextScript } from 'next/document'
import Head from 'next/head';

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    //...
  }

  render() {
    return (
      <Html>
        <Head></Head>
      </Html>
    )
  }
}

export default MyDocument

Examples of correct code for this rule:

jsx
import Document, { Html, Head, Main, NextScript } from 'next/document'

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    //...
  }

  render() {
    return (
      <Html>
        <Head></Head>
      </Html>
    )
  }
}

export default MyDocument

How to use

To enable this rule using the config file or in the CLI, you can use:

json
{
    "plugins": ["nextjs"],
    "rules": {
        "nextjs/no-head-import-in-document": "error"
    }
}
bash
oxlint --deny nextjs/no-head-import-in-document --nextjs-plugin

References

Released under the MIT License.