Why do I get "_next/image?url=example.com/assets/photo.png" when I try to load external image from another domain?

Question

I'd like to load pictures from other domain that is "api.domain.com".

I have configured next.config.js like this in order to avoid external URL error.

const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: "http",
        hostname: "api.example.app",
        port: ""
      }
    ]
  }
}

But when I inspect image what I see is that it's setting srcset="/_next/image?url=http://example.com/assets/photo.png"

How can I bypass adding _next/image as prefix?

P.s please do not recommend me using img tag.

Answer 1

Next.js automatically optimize images when you use <Image /> from next/image.

Let's say you have a .png image with 1MB size, and its source is http://example.com/assets/photo.png. Next.js will generate some variants of the image with more modern formats e.g. .webp in different sizes, 0.1 MB, 0.5 MB, and 1 MB. it will collect any src you passed to <Image /> (and exists in the remotePatterns) to change the src to the Next.js built-in optimization loader /_next/image?url=${src}. This way it will respond with the suitable image variant for the device.

Reed more: https://nextjs.org/docs/app/building-your-application/optimizing/images

You can make your custom loader: https://nextjs.org/docs/app/api-reference/components/image#loader