Error: Do not use <img>. Use Image from 'next/image' instead. See https://nextjs.org/docs/messages/no-img-element. @next/next/no-img-element を解決する 🖼

Next 11を使ってウェブサイトを構築し、

yarn build

で書き出そうと思ったのですが、

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

とエラーが出ました。

指示されたURLを見てみると、

nextjs.org

An HTML element was used to display an image. For better performance and automatic image optimization, use Next.js' built-in image component instead.

HTMLの要素を使用して画像を表示しました。パフォーマンスと自動画像最適化を向上させるには、代わりにNext.jsの組み込み画像コンポーネントを使用してください。

とのこと、

Next 10から next/image が導入されたことは知っていました。

nextjs.org

知っていましたが、imgタグを使えなくしなくても良いじゃないかという想いでいっぱいです。

なんとか、buildを通す方法はないかと調べてみたところ、

.eslintrc

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

と、.eslintrcを編集すればimgタグを使ってもbuildが通ることがわかりました。
next/image は、もうちょっと調べてから導入しようと思います。