Overview
The following article was helpful for handling the error: “Error: Do not use . Use Image from ’next/image’ instead.”
Based on the article above, I am posting a ChatGPT-generated response below. There may be some inaccuracies, but I hope it serves as a helpful reference.
Changing Next.js ESLint Rules and Configuring Flat Config
Since Next.js 11, ESLint configuration has been provided by default, and the @next/next/no-img-element rule was added. This rule restricts the use of regular <img> tags and recommends using Next.js’s next/image component.
However, there may be projects where you want to use <img> tags. Therefore, I will introduce how to disable this ESLint rule.
1. Traditional Configuration Method (.eslintrc.js)
Previously, Next.js ESLint settings could be modified by writing the following in .eslintrc.js.
However, Next.js ESLint has migrated to “Flat Configuration.” Therefore, you need to use eslint.config.mjs instead of .eslintrc.js.
2. Flat Config Configuration Method (eslint.config.mjs)
To change ESLint rules in current Next.js projects, create an eslint.config.mjs file and write the following.
By applying this configuration, you can use regular <img> tags in your Next.js project.
3. Which Method Should You Use?
- Projects before Next.js 11 -> Use
.eslintrc.js - Projects from Next.js 12 onwards -> Use
eslint.config.mjs
Since using flat config is recommended in the latest Next.js environments, setting up eslint.config.mjs is the best approach for new projects.
As Next.js updates, ESLint configuration methods have also changed. If you are starting with Next.js, please take advantage of the new flat config.