Zenn
📖

Error: Do not use <img>. Use Image from 'next/image' instead.への対応

に公開
Next.js
tech

概要

Error: Do not use <img>. Use Image from 'next/image' instead.への対応にあたり、以下の記事が参考になりました。

https://stackoverflow.com/questions/68203582/error-do-not-use-img-use-image-from-next-image-instead-next-js-using-ht

上記の記事に基づき、ChatGPTによる回答を以下に掲載します。間違っている点もあるかもしれませんが、参考になりましたら幸いです。

Next.jsのESLintルール変更とフラットコンフィグの設定方法

Next.js 11以降、ESLintの設定がデフォルトで提供されるようになり、@next/next/no-img-element ルールが追加されました。このルールにより、通常の<img>タグの使用が制限され、Next.jsのnext/imageコンポーネントを推奨するようになっています。

しかし、プロジェクトによっては<img>タグを使いたい場合もあるでしょう。そのため、このESLintルールを無効化する方法を紹介します。

1. 従来の設定方法（.eslintrc.js）

以前のNext.jsのESLint設定は、.eslintrc.js に次のように記述することで変更できました。

module.exports = {
  rules: {
    "@next/next/no-img-element": "off",
  },
};

しかし、Next.jsのESLintは「フラットコンフィグ（Flat Configuration）」へ移行しました。そのため、.eslintrc.js ではなく、eslint.config.mjs を使用する必要があります。

2. フラットコンフィグの設定方法（eslint.config.mjs）

現在のNext.jsプロジェクトでESLintのルールを変更するには、eslint.config.mjs ファイルを作成し、以下のように記述します。

import { dirname } from "path";
import { fileURLToPath } from "url";
import { FlatCompat } from "@eslint/eslintrc";

const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);

const compat = new FlatCompat({
  baseDirectory: __dirname,
});

const eslintConfig = [
  ...compat.extends("next/core-web-vitals", "next/typescript"),
  {
    rules: {
      "@next/next/no-img-element": "off",
    },
  },
];

export default eslintConfig;

この設定を適用することで、Next.jsのプロジェクトでも通常の<img>タグを使用できるようになります。

3. どの方法を使うべきか？

  • Next.js 11以前のプロジェクト → .eslintrc.js を使用
  • Next.js 12以降のプロジェクト → eslint.config.mjs を使用

最新のNext.js環境ではフラットコンフィグを利用するのが推奨されているため、新規プロジェクトではeslint.config.mjs を設定するのがベストです。

Next.jsのアップデートに伴い、ESLintの設定方法も変わっています。これからNext.jsを使う方は、ぜひ新しいフラットコンフィグを活用してください！

Discussion