Next.js "Image Optimization requires" - Fix in CI

Next.js image optimization needs a server. With output: 'export', or when a remote image host is not allow-listed, next/image cannot run the optimizer and the build errors.

What this error means

The build fails telling you image optimization requires a loader/host, or that the remote pattern is not configured.

Error: Image Optimization using the default loader is not compatible
with `output: 'export'`.

Possible solutions:
  - Use `loader: 'custom'` or set `images.unoptimized = true`.

Common causes

Static export with default loader

output: 'export' has no server to optimize images, so the default loader is unsupported.

Remote host not allow-listed

A remote src host is not declared under images.remotePatterns, so the optimizer refuses it.

How to fix it

Disable optimization for static export

1. Set images.unoptimized when exporting a fully static site.

// next.config.js
module.exports = { output: 'export', images: { unoptimized: true } };

Allow-list remote image hosts

1. Add the host to remotePatterns so the optimizer accepts it.

// next.config.js
images: { remotePatterns: [{ protocol: 'https', hostname: 'cdn.example.com' }] },

How to prevent it

• Decide on static vs server rendering before configuring next/image.
• Keep remotePatterns in sync with the CDNs you actually use.

Related guides