コンテンツにスキップ
Biome
Docs Blog Playground

noHeadElement

このコンテンツはまだ日本語訳がありません。

Diagnostic Category: lint/nursery/noHeadElement

Since: v1.9.4

Sources:

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

Section titled Examples

Invalid

Section titled 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

Section titled Valid
import Head from 'next/head'


function Index() {
  return (
    <Head>
      <title>All good!</title>
    </Head>
  )
}
Section titled Related links