noHeadElement

JSX and TSX

摘要

¥Summary

规则生效日期：v1.9.4

¥Rule available since: v1.9.4
诊断类别：lint/style/noHeadElement

¥Diagnostic Category: lint/style/noHeadElement
此规则没有修复方案。

¥This rule doesn’t have a fix.
此规则的默认严重级别为 warning。

¥The default severity of this rule is warning.
此规则属于以下域：

¥This rule belongs to the following domains:
- next
来源：

¥Sources:
- 与 @next/next/no-head-element 相同
  
  ¥Same as @next/next/no-head-element

如何配置

¥How to configure

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

描述

¥Description

防止在 Next.js 项目中使用 <head> 元素。

¥Prevent usage of <head> element in a Next.js project.

Next.js 提供了一个来自 next/head 的专用 <Head /> 组件，用于管理 <head> 标签，以实现最佳的服务器端渲染、客户端导航以及自动去重 <meta> 和 <title> 等标签。

¥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>.

此规则仅检查 app/ 目录之外的文件，因为 Next.js 中的处理方式通常不同。

¥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/style/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
}

noHeadElement

摘要

如何配置

描述

示例

无效

有效

相关链接