概要
Error: Do not use . Use Image from ’next/image’ instead.への対応にあたり、以下の記事が参考になりました。
上記の記事に基づき、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を使う方は、ぜひ新しいフラットコンフィグを活用してください！