Skip to content
Biome
Docs Blog Playground

noHeadImportInDocument

Diagnostic Category: lint/nursery/noHeadImportInDocument

Since: v1.9.4

Sources:

Prevent using the next/head module in pages/_document.js on Next.js projects.

Importing next/head within the custom pages/_document.js file can cause unexpected behavior in your application. The next/head component is designed to be used at the page level, and when used in the custom document it can interfere with the global document structure, which leads to issues with rendering and SEO.

To modify <head> elements across all pages, you should use the <Head /> component from the next/document module.

Examples

Section titled Examples

Valid

Section titled Valid
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;
Section titled Related links