A project that I work on was started on Next.js 12 and recently converted to Next.js 13. The page is static and I use the neat static export feature of Next.js. That's because the web hosting provider does not support Node.js and with the exported HTML files we can enjoy the speed of React with the lovely SEO features that Next.js makes possible. Back to topic:
For some reason - and especially with static exported pages - I always have issues using the Next.js image components and more than often I decide to switch to the good old <img /> element. Next.js will then give a warning, that those images will not be optimized. Because I compress the website images beforehand, this is not important to me anyways. To suppress this warnings, just add this to your .eslintrc.json file:
"rules": {
"@next/next/no-img-element": "off"
}
The whole file may look like this now:
{
"extends": "next/core-web-vitals",
"rules": {
"@next/next/no-img-element": "off"
}
}