I’m using Next.js (v14.2.14) App Router with images served through Cloudflare Images Transformation. My image URLs are in the following format:

https://{my-domain}/cdn-cgi/image/width=100/https:/{s3-bucket-name}.s3.{region}.amazonaws.com/[image-path]/image.jpg

Problem:
When trying to load these images, Next.js is treating the /cdn-cgi portion of the URL as a page route, resulting in a 404 Not Found error instead of loading the image properly.

My setup:

• Next.js App Router
• Images hosted on AWS S3
• Using Cloudflare Images for image optimization and transformation
• Application hosted on Vercel