コンテンツにスキップ

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.

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.

import Head from 'next/head'
function Index() {
return (
<Head>
<title>All good!</title>
</Head>
)
}