How to Reverse Proxy NextJS with NGINX

Sup, here's a simple tips to run your NextJS Dev through Nginx. Before we started, I expect we're already have an Nginx configuration set up.

Then, we're just simply adds these configs:

# Proxy NextJS Chunks, exception and websocket for HMR
location ~ ^/_?_next.* {
        # Configuration for the /myPath endpoint
        # Reverse proxy to another localhost
        proxy_pass http://localhost:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "Upgrade";
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }

I'm in rush to write this article tbh 😅. But, surely I'll elaborate and fix this post ASAP when I've done my work, hope it's helps!