nextjs /_next/image?url= returns status 500 with NGINX

Question

I am having issues with Next.js where I use next/image for render lazy loading with images. I pass url into next/Image src and it fails to load with 500 code. I have NGINX running that proxy_pass the request for /image/outsource/ to another server. So when I hit http://localhost/image/outsource/imageName.png it is returning the image.

But when I use next/Image and pass the url of http://localhost/image/outsource/imageName.png into the src it is failing to load, because it is loading the url as http://localhost/_next/image?url=http%3A%2F%2Flocalhost%2Fimages%2Foutsource%2FimageName.png&w=1080&q=75 it is giving 500 result

I know you might say it is something related to the nextjs config but I have my domains set up for images:

module.exports = withImages({
    i18n,
    localePath: path.resolve("assets/locales"),
    reactStrictMode: true,
    images: {
        domains: ["mydomain-name.com", "localhost"]
    }
});

The funny fact when i load from my localhost the same way with next/Image another image with mydomain-name.com it is loading the image fine.

And when i get to deploy to prod my application same thing start happening on prod. Where it can load the image through this url: https://mydomain-name.com/image/outsource/imageName.png but wont load and give 500 result when it loads through next/Image as https://mydomain-name.com/_next/image?url=https%3A%2F%mydomain-name.com%2Fimages%2Foutsource%2FimageName.png&w=1080&q=75

There is a log from NGINX:


 "GET /_next/image?url=https%3A%2F%mydomain-name.com%2Fimages%2Foutsource%2Ftest.jpeg&w=128&q=75 HTTP/2.0" 504 569 "https://mydomain-name.com/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/102.0.5005.61 Safari/537.36" "-"
Date LOG [error] 23#23: *40734 upstream timed out (110: Operation timed out) while reading response header from upstream, client: clientIP, server: _, request: "GET /_next/image?url=https%3A%2F%2Fmydomain-name.com%2Fimages%2Foutsource%2Ftest.jpeg&w=128&q=75 HTTP/2.0", upstream: "http://UpstreamIP/_next/image?url=https%3A%2F%2Fmydomain-name.com%2Fimages%2Foutsource%2Ftest.jpeg&w=128&q=75", host: "mydomain-name.com", referrer: "https://mydomain-name.com/"

there is NGINX config for that specific resource:

location /images/outsource {
    # this is for accessing images from another resource website
    rewrite ^/images/outsource/(.*)$ https://another-resource-website/$1 redirect;
  }

It doesnt make any sense to me. No idea why it is breaking when it shouldn't

nextjs /_next/image?url= returns status 500 with NGINX

0 Answers