nextjs/no-head-element Correctness
What it does
Prevents the usage of the native <head> element inside a Next.js application.
Why is this bad?
A <head> element can cause unexpected behavior in a Next.js application. Use Next.js' built-in next/head component instead.
Examples
Examples of incorrect code for this rule:
jsx
function Index() {
return (
<>
<head>
<title>My page title</title>
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
</head>
</>
)
}
export default IndexExamples of correct code for this rule:
jsx
import Head from 'next/head'
function Index() {
return (
<>
<Head>
<title>My page title</title>
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
</Head>
</>
)
}
export default IndexHow to use
To enable this rule using the config file or in the CLI, you can use:
json
{
"plugins": ["nextjs"],
"rules": {
"nextjs/no-head-element": "error"
}
}bash
oxlint --deny nextjs/no-head-element --nextjs-plugin