noHeadElement
Diagnostic Category: lint/nursery/noHeadElement
Since: v1.9.4
Sources:
- Same as:
@next/no-head-element
Description
Section titled DescriptionPrevent 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.
Examples
Section titled ExamplesInvalid
Section titled Invalidfunction Index() { return ( <head> <title>Invalid</title> </head> )}
code-block.jsx:2:11 lint/nursery/noHeadElement ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
⚠ Don’t use <head> element.
1 │ function Index() {
> 2 │ return (
│
> 3 │ <head>
│ ^^^^^^
4 │ <title>Invalid</title>
5 │ </head>
ℹ Using the <head> element can cause unexpected behavior in a Next.js application. Use <Head /> from next/head instead.
Valid
Section titled Validimport Head from 'next/head'
function Index() { return ( <Head> <title>All good!</title> </Head> )}
How to configure
Section titled How to configure{ "linter": { "rules": { "nursery": { "noHeadElement": "error" } } }}