NextJs app image requests going through nginx proxy unexpectedly

Frontend
1

I’m running into a weird issue with my NextJs app (version 13.4.7). The frontend is trying to get images from the public/ folder, but nginx is treating these requests as if they need to be proxied. It’s working, but I’m worried it might slow things down since there are lots of images.

Here’s what my setup looks like:

  • Two instances of the app running behind nginx
  • nginx config file with upstream servers and location blocks
  • next.config.mjs with some image settings and rewrites

When I check the nginx logs, I see entries for these image requests. It looks like they’re being proxied instead of served directly.

I’ve tried tweaking the nginx configuration and next.config.mjs, but still no luck. Any ideas on how to stop nginx from proxying these internal image requests? I think fixing this might speed up the deployment.

http {
    upstream my_app {
        server instance1:3000;
        server instance2:3000;
    }

    server {
        listen 8080;
        
        location / {
            proxy_pass http://my_app;
            # other proxy settings
        }

        location /img/ {
            proxy_pass http://my_app;
            # caching settings
        }
    }
}

Am I missing something obvious here? Thanks for any help!

2

Your setup seems quite complex, which could be contributing to the issue. Have you considered simplifying your architecture? Instead of running two instances behind nginx, you might try a single instance with PM2 for process management. This could potentially eliminate the need for load balancing and reduce the complexity of your nginx configuration.

Additionally, you might want to investigate using Next.js’s built-in static file serving capabilities more effectively. By default, Next.js should handle serving static files from the public directory without involving nginx. Double-check your Next.js configuration to ensure you’re not inadvertently overriding this behavior.

If you must keep your current setup, you could try adding a location block in nginx specifically for your public directory, with a higher priority than your proxy_pass directives. This might help nginx serve these files directly without involving your application servers.

3

hmmm, interesting issue! have you tried adding a separate location block for the public folder? something like:

location /public/ {
    root /path/to/your/nextjs/app;
    try_files $uri $uri/ =404;
}

this might bypass the proxy for image requests. curious to hear if it helps!

4

yo, thats a tricky one! have u tried tweaking ur next.config.mjs? maybe something like:

images: {
unoptimized: true,
},

this might stop nextjs from processing images n let nginx handle em directly. worth a shot imo