About the error message "Error: Image Optimization using Next.js .." which is output during static site generation process

Solution No.1: Disabling optimization#

Create a file named next.config.js in the root directory of your Next.js project and put these codes.

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

After that, run npm run build and generate your static site.

Solution No.2: Using a CDN supporting image optimization#

According to the Next.js manual, there is another way to avoid this problem by explicitly declaring the Loader . If you jump to the link and scroll down, you'll find the description (the underline was added by this site):

Images can not be optimized at build time using next export, only on-demand. To use next/image with next export, you will need to use a different loader than the default. Read more in the discussion.

As you can see, the manual does not provide a straight forward way to specify the loader when you use SSG. Instead, the document provide the link to Github discussion.

Since I don't want this function with eager hands, I didn't check the Github thread.

The error message#

The entire error message is as below. The message is shown when you build a static site containing some images by npm run build .

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.
    - Configure `images.unoptimized = true` in `next.config.js` to disable the Image Optimization API.
Read more: https://nextjs.org/docs/messages/export-image-api
....

In Next.js the sizes of images are optimized before sending them to clients. But the optimization is taken place dynamically by Next.js, thus this cannot be applied to static sites. So you need to disable this optimization function or specify the supported CDN as loader.

The warninng message for solution No.1#

Resolving the issue by solution No.1 method, you'll see warning logs:

9:46:34 PM: warn  - You have enabled experimental feature (images) in next.config.js.
9:46:34 PM: warn  - Experimental features are not covered by semver, and may cause unexpected or broken application behavior. Use at your own risk.

Since disabling optimization is marked as "experimental" in Next.js, it warns us the probability of unexpected behavior.

Disabling image optimization means to submit images as it is. So in my opinion it's unlikely to happen. But for another developers especially ones working as professional, please inspect carefully before deployment when disabling the optimizaion.

Another tip: Downsizing the images#

If you worry about slowing down of the site speed by disabling image optimization, reducing the size of original images may suit you.

• Resizing images

• Changing the format of images to the most suitable one (JPG, PNG or WebP)

• Reducing the size by using TinyPng

• Changing the format to SVG (for the images consists of simple shapes)

Related articles:

• How to convert PNG/JPG/TIFF files into more efficient format Webp