src/content/docs/linter/rules/no-head-import-in-document.mdx
import { Tabs, TabItem } from '@astrojs/starlight/components';
<Tabs> <TabItem label="JSX and TSX" icon="seti:javascript"> ## Summary - Rule available since: `v1.9.4` - Diagnostic Category: [`lint/suspicious/noHeadImportInDocument`](/reference/diagnostics#diagnostic-category) - This rule is **recommended**, meaning it is enabled by default. - This rule doesn't have a fix. - The default severity of this rule is [**warning**](/reference/diagnostics#warning). - This rule belongs to the following domains: - [`next`](/linter/domains#next) - Sources: - Same as [`@next/next/no-head-import-in-document`](https://nextjs.org/docs/messages/no-head-import-in-document){
"linter": {
"rules": {
"suspicious": {
"noHeadImportInDocument": "error"
}
}
}
}
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.
// 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;