noHeadElement

Diagnostic Category: lint/nursery/noHeadElement

JSX and TSX

Since: v1.9.4

Sources:

Same as: @next/no-head-element

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

function 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

import Head from 'next/head'

function Index() {
  return (
    <Head>
      <title>All good!</title>
    </Head>
  )
}

noHeadElement

Examples

Invalid

Valid

Related links