← Back to rules

nextjs/no-img-element 正しさ

An auto-fix is available for this rule.

何を行うか

LCP の遅延および帯域幅の増加を防ぐために、<img> 要素の使用を禁止します。

なぜ悪いのか？

<img> 要素はパフォーマンス最適化がされておらず、遅い LCP と高い帯域幅の使用につながる可能性があります。next/image からの <Image /> を使用することで、画像の自動最適化が行われ、静的アセットとして提供されます。

例

このルールに対して不正なコードの例：

export function MyComponent() {
  return (
    <div>
      <img src="/test.png" alt="テスト画像" />
    </div>
  );
}

このルールに対して正しいコードの例：

import Image from "next/image";
import testImage from "./test.png";
export function MyComponent() {
  return (
    <div>
      <Image src={testImage} alt="テスト画像" />
    </div>
  );
}

使用方法

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

Config (.oxlintrc.json)

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

CLI

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

参照

• ルールのソース