Next.js Build Fails Using Tag

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 choi

Solution 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.jsmodule.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