Setting Up Nginx for Node.js and Next.js: A Complete Guide

nginx.conf
reverse proxy nginx

When deploying a Node.js or Next.js project in a production environment, using Nginx as a reverse proxy ensures better performance, security, and scalability. In this guide, I’ll share Nginx configuration files for handling an API, a frontend UI, and an admin panel.

Why Use Nginx?

Nginx is widely used as a reverse proxy, handling incoming requests and forwarding them to the appropriate services. This setup helps with:

  • Load balancing
  • Caching static assets
  • SSL termination
  • Improved security

Nginx Configuration for a Node.js API

For the API service, we’ll configure Nginx to proxy requests to a Node.js backend running on port 1821:

server {
    listen 80;

    server_name api.onestoptech.co.in;

    location / {
        proxy_pass http://localhost:1821;  # Forward requests to your API
        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;

        # WebSocket support (if needed)
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
    }
}

This configuration ensures that all API requests to api.ytub.online are forwarded to localhost:1821.

Nginx Configuration for Next.js UI

For the frontend Next.js UI, we set up another proxy pass for handling requests to localhost:14165:

ShellScript
server {
    listen 80;
    server_name onestoptech.co.in;

    location / {
        proxy_pass http://localhost:14165;
        proxy_cache_bypass $http_upgrade;

        # Proxy headers
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header X-Forwarded-Host $host;
        proxy_set_header X-Forwarded-Port $server_port;
        proxy_set_header X-Forwarded-For $remote_addr;
        proxy_set_header Host $http_host;

        # CORS headers
        add_header Access-Control-Allow-Origin *;
        add_header Access-Control-Max-Age 3600;
        add_header Access-Control-Expose-Headers Content-Length;
        add_header Access-Control-Allow-Headers Range;

        proxy_headers_hash_max_size 512;
        proxy_headers_hash_bucket_size 128;

        # Proxy timeouts
        proxy_connect_timeout 60s;
        proxy_send_timeout 60s;
        proxy_read_timeout 60s;
    }

    try_files $uri $uri/ =404;
}
ShellScript

This ensures that UI requests are handled properly, with CORS headers, timeouts, and necessary proxy headers.

Nginx Configuration for the Admin Panel

The admin panel is configured similarly, forwarding requests to the appropriate service:

ShellScript
server {
    listen 80;
    server_name admin.onestoptech.co.in;

    location / {
        proxy_pass http://localhost:14200;
        proxy_cache_bypass $http_upgrade;

        # Proxy headers
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header X-Forwarded-Host $host;
        proxy_set_header X-Forwarded-Port $server_port;
        proxy_set_header X-Forwarded-For $remote_addr;
        proxy_set_header Host $http_host;

        # CORS headers
        add_header Access-Control-Allow-Origin *;
        add_header Access-Control-Max-Age 3600;
        add_header Access-Control-Expose-Headers Content-Length;
        add_header Access-Control-Allow-Headers Range;

        proxy_headers_hash_max_size 512;
        proxy_headers_hash_bucket_size 128;

        # Proxy timeouts
        proxy_connect_timeout 60s;
        proxy_send_timeout 60s;
        proxy_read_timeout 60s;
    }

    try_files $uri $uri/ =404;
}
ShellScript

Using Nginx as a reverse proxy makes your Node.js and Next.js applications more secure and efficient. It helps you scale your project while ensuring smooth request handling.

Would you like me to refine this further or add details on SSL setup, load balancing, or performance optimizations?