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

Question

I got this error when deploying Next.js to Netlify.

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

Possible solutions:

6:47:15 AM:   - Use `next start`, which starts the Image Optimization API.
6:47:15 AM:   - Use Vercel to deploy, which supports Image Optimization.
6:47:15 AM:   - Configure a third-party loader in `next.config.js`.
6:47:15 AM:  -  Read more: https://err.sh/next.js/export-image-api.
6:47:15 AM:   at exportApp (/opt/build/repo/node_modules/next/dist/export/index.js:14:712)

The problem does not occur when deploying to Vercel.

Answer 1

use akamai

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

Answer 2

From Next.js 12.3, you can completely disable next/image Image Optimization using the unoptimized configuration in next.config.js. This avoids having to use a third-party provider to optimize the image when using next/export.

From the next/image documentation:

unoptimized - When true, the source image will be served as-is instead of changing quality, size, or format. Defaults to false.

module.exports = {
    images: {
        unoptimized: true
    }
}

---

Before Next.js 12.3 and from 12.2, the unoptimized configuration was still experimental and could be enabled under the experimental flag.

module.exports = {
    experimental: {
        images: {
            unoptimized: true
        }
    }
}

Answer 3

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

Answer 4

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: '/',
  },
}

Answer 5

Next.js deployed on Vercel does not have this error.

This can also be solved using a local image loader This will disable Image Optimization

// imageLoader.js

export default function imageLoader({ src, width, quality }) {
  return `https://<app-address.domain>${src}?w=${width}?q=${quality || 75}`;
}

Then in your app config

//next.config.js

module.exports = {
  assetPrefix: "./",
  images: {
    loader: "custom",
    loaderFile: "./utils/imageLoader.js",  // <= Location of image loader
  },
}

Answer 6

This error is regarding Image/next, I was facing same error while "next build", than i use <img/> instead of <Image/> in the project and re-build it by npm run build and it resolves the error.