La mejor manera de evitar este problema es usar Vercel para la implementación. Tengo otros problemas con mi sitio next.js alojado en netlify, pero desde que volví a implementar Vercel, todos los problemas desaparecieron.

Enfrenté el mismo problema al usar next export . Todavía recibo este error:

Error: la optimización de imágenes con el cargador predeterminado de Next.js no es compatible con next export . Soluciones posibles:

• Utilice next start para ejecutar un servidor, que incluye la API de optimización de imágenes.
• Utilice cualquier proveedor que admita la optimización de imágenes (como Vercel).
• Configure un cargador de terceros en next.config.js .
• Use el apoyo del loader para next/image .

Entonces, para que mi cargador personalizado funcione correctamente, necesitaba establecer una ruta a una cadena vacía:

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

PERO, cuando abro el archivo index.html resultante, ninguna de las imágenes o JS se cargan.

Entonces, para aquellos que también enfrentan esto, intente establecer la ruta a / como tal:

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

establecer images.loader en 'imgix' provocó errores de desarrollo y compilación.

usé esto en su lugar:

 // next.config.js module.exports = { images: { loader: 'akamai', path: '', }, }

simplemente funciona para todo lo que me importa.

los valores posibles para images.loader son: [predeterminado, imgix, cloudinary, akamai, personalizado]
referencia: https://nextjs.org/docs/api-reference/next/image#built-in-loaders

Parece que usas next/images. Pero next/images no funcionan con páginas estáticas (generadas con next export ) Para páginas estáticas, use este optimizador de imágenes: imágenes optimizadas siguientes en su lugar