Identify whether the site uses a Node deployment or static export, and whether images are local or remote. Confirm memory and native dependency support for the selected optimizer.

1. Use the image configuration supported by the installed Next.js release. Restrict remote image patterns to the sources and paths the application actually needs.

2. For a self-hosted server, install and deploy the required compatible optimization dependencies. Test the target operating environment rather than copying native modules from another platform.

3. For static export, select a compatible custom loader or another deliberate image-delivery strategy. The default runtime optimizer is not created by uploading static files.

4. Choose image dimensions and responsive sizing that match the page layout. Avoid requesting needlessly large transformed images.

5. Review caching and resource use using representative image sizes and formats before enabling a high-volume catalogue.

For a current Next.js version supporting these image options, merge this into the existing next.config.mjs. Replace the example host and path with a trusted image location you control:

export default {
  images: {
    remotePatterns: [{
      protocol: 'https',
      hostname: 'images.example.com',
      port: '',
      pathname: '/catalog/**',
      search: '',
    }],
    maximumRedirects: 0,
  },
};

This permits the selected directory, excludes query strings and prevents an allowed URL from redirecting the optimizer elsewhere. If your legitimate image service needs signed queries or redirects, design a narrowly reviewed policy rather than dropping the restrictions blindly.

Rebuild and deploy through the normal process. Verify an intended catalog image works and an unapproved host or path is rejected. This configures source acceptance; it does not provide the default runtime optimizer to a static export or replace sizing and dependency checks.

Open a page at mobile and desktop widths and inspect actual image responses. Confirm allowed remote images load and an unapproved source is rejected.

An optimizer error can come from a remote-source rule, inaccessible origin image, native dependency issue or resource limit. Check the specific response and server log before disabling all restrictions.

• Choosing a static export or a Next.js server deployment
• Troubleshooting a Node native dependency build
• Preserving Next.js cache consistency across instances
• Building Next.js with the right public environment values

• Next.js Image component
• Next.js static exports