src/content/docs/linter/rules/no-head-element.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/style/noHeadElement`](/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-element`](https://nextjs.org/docs/messages/no-head-element){
"linter": {
"rules": {
"style": {
"noHeadElement": "error"
}
}
}
}
Prevent usage of <head> element in a Next.js project.
Next.js provides a specialized <Head /> component from next/head that manages
the <head> tag for optimal server-side rendering, client-side navigation, and
automatic deduplication of tags such as <meta> and <title>.
This rule only checks files that are outside of the app/ directory, as it's typically
handled differently in Next.js.
function Index() {
return (
<head>
<title>Invalid</title>
</head>
)
}
import Head from 'next/head'
function Index() {
return (
<Head>
<title>All good!</title>
</Head>
)
}