noHeadElement

JSX and TSX

Summary

Rule available since: v1.9.4
Diagnostic Category: lint/nursery/noHeadElement
This rule doesn’t have a fix.
The default severity of this rule is information.
This rule belongs to the following domains:
- next
Sources:
- Same as @next/no-head-element

Description

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.

Examples

Invalid

1
function Index() {
2
  return (
3
    <head>
4
      <title>Invalid</title>
5
    </head>
6
  )
7
}

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

1
import Head from 'next/head'
2

3
function Index() {
4
  return (
5
    <Head>
6
      <title>All good!</title>
7
    </Head>
8
  )
9
}

How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "nursery": {
5
        "noHeadElement": "error"
6
      }
7
    }
8
  }
9
}