Next.js build fails using tag

Question

I recently started making websites with Next.js, and I have been using a mix of Image and img for various use cases.

I know that Image is built-in to Next.js and is the better choice, but there are scenarios where I do not know the size or the ratio of the images I am loading, and thus the img seems to better suit.

During my recent project, this is the first time my npm run build command is failing with:

1:7  Error: Do not use <img>. Use Image from 'next/image' instead. See https://nextjs.org/docs/messages/no-img-element.

My other Next.js projects do not fail this way, and use the same next.config.js. Does anyone know why this is happening?

Answer 1

This is due to the new Next.js release, which has integrated ESLint with its own set of rules to enforce that <Image> should always be used. Your other projects don't fail because probably you are not using Next.js v11, or they may have their own ESLint config, where you haven't extended next. Ref.: nextjs.org/docs/basic-features/eslint

You can ignore linting during build by this:

// next.config.js

module.exports = {
  eslint: { ignoreDuringBuilds: true },
  // your other settings here ...
}

If you want to specifically disable the rule for a file or just a line do this: (can be done in two clicks if using ESLint extension in VSCode)

{/* eslint-disable-next-line @next/next/no-img-element */}
<img ... //>

// for whole file, add this to top:

/* eslint-disable @next/next/no-img-element */

// for a section:

/* eslint-disable @next/next/no-img-element */
// your code here...
/* eslint-enable @next/next/no-img-element */

You can also disable the rule using .eslintrc:

{
  "extends": "next",
  "rules": {
    "@next/next/no-img-element": "off",
  }
}

You can also ignore (all rules for) a complete file using eslintignore or ignorePatterns. Please refer: eslint.org/docs/user-guide/configuring/ignoring-code