rsnext/errors/no-head-import-in-document.md
Houssein Djirdeh 6d0150f02e
ESLint Plugin: Prevent bad imports of next/document and next/head (#24832)
Adds lint rules to the Next.js ESLint plugin to:

- Disallow importing `next/head` inside `pages/_document.js`
- Disallow importing `next/document` outside of `pages/_document.js`

Both rules will be surfaced as **errors** within the recommended config of the plugin.

Fixes #13712 #13958
2021-05-10 21:28:06 +00:00

862 B

No Head Import in Document

Why This Error Occurred

next/head was imported in pages/_document.js. This can cause unexpected issues in your application.

Possible Ways to Fix It

Only import and use next/document within pages/_document.js to override the default Document component. If you are importing next/head to use the Head component, import it from next/document instead in order to modify <head> code across all pages:

// pages/_document.js
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