Since Next.js still lacks native support for downloading remote images and including them in static builds, workarounds remain necessary. Existing solutions, such as next-image-export-optimizer, often require defining image URLs in advance. This approach doesn't make sense when building a site dynamically based on content from an external CMS, such as Cosmic.js.

To address this, I’ve gathered and refined a solution in the following GitHub repository:

🔗 https://github.com/PioterAndrzejewski/next-export-with-static-images

In short, the approach works as follows:

Custom Image Loader: Generates optimized image URLs using imgix.

HTML Parsing Script: Analyzes generated HTML files and downloads all referenced remote images.

Path Replacement: Updates src and srcset attributes in HTML files to point to the downloaded local image assets.

This method ensures that all external images are properly downloaded, linked, and included in the final static build output.

If you're also struggling with this limitation in Next.js, feel free to check out the repository and share your thoughts!