nextjs/no-head-element 正しさ

何をするか

Next.js アプリケーション内でネイティブな <head> 要素の使用を禁止します。

なぜ悪いのか

<head> 要素は、Next.js アプリケーションで予期しない動作を引き起こす可能性があります。代わりに、Next.js の組み込み next/head コンポーネントを使用してください。

例

このルールに違反する 誤った 例:

jsx

function Index() {
  return (
    <>
      <head>
        <title>My page title</title>
        <meta name="viewport" content="initial-scale=1.0, width=device-width" />
      </head>
    </>
  );
}

export default Index;

このルールに従う 正しい 例:

jsx

import Head from "next/head";

function Index() {
  return (
    <>
      <Head>
        <title>My page title</title>
        <meta name="viewport" content="initial-scale=1.0, width=device-width" />
      </Head>
    </>
  );
}

export default Index;

使い方

設定ファイルまたは CLI でこのルールを有効化するには、以下のように使用できます：

Config (.oxlintrc.json)CLI

json

{
  "plugins": ["nextjs"],
  "rules": {
    "nextjs/no-head-element": "error"
  }
}

bash

oxlint --deny nextjs/no-head-element --nextjs-plugin

参照

ルールのソース

何をするか ​

なぜ悪いのか ​

例 ​

使い方 ​

参照 ​

何をするか

なぜ悪いのか

例

使い方

参照