Best way to avoid this issue is to use Vercel for deployment, I'm having other issues with my next.js site hosted on netlify, but since I redeployed to vercel all issues gone

I faced the same problem when using next export command. I still receive this error:

Error: Image Optimization using Next.js' default loader is not compatible with next export. Possible solutions:

• Use next start to run a server, which includes the Image Optimization API.
• Use any provider which supports Image Optimization (like Vercel).
• Configure a third-party loader in next.config.js.
• Use the loader prop for next/image.

So, to make my custom loader working correctly, I needed to set a path to an empty string:

module.exports = {
  // https://github.com/vercel/next.js/issues/21079
  // Remove this workaround whenever the issue is fixed
  images: {
    loader: 'imgix',
    path: '',
  },
}

BUT, when I open the resultant index.html file, none of the images or JS loaded.

So, for those who facing this also, please try to set the path to a / as such:

module.exports = {
  // https://github.com/vercel/next.js/issues/21079
  // Remove this workaround whenever the issue is fixed
  images: {
    loader: 'imgix',
    path: '/',
  },
}

setting images.loader to 'imgix' caused dev and build errors.

i used this instead:

// next.config.js

module.exports = {
  images: {
    loader: 'akamai',
    path: '',
  },
}

it just works for all i care about.

possible values for images.loader are: [ default, imgix, cloudinary, akamai, custom ]
reference: https://nextjs.org/docs/api-reference/next/image#built-in-loaders

Seems you use next/images. But next/images don't work with static pages (generated with next export) For static pages use this image-optimizer : next-optimized-images instead