NGINX configuration for deploying Next.js applications (Pages Router)

nginx-configuration-nextjs.md

NGINX

1. Configuration for serving static content of a Next.js static export.
2. Configuration of a reverse proxy for a Next.js server application (SSR/SSG/ISR).

You can follow the guide I wrote on deploying Next.js applications to a VPS using NGINX and PM2: article

reverse-proxy.conf

# ---- Configuring NGINX as a reverse proxy for a Next.js application ----
#
# Replace the occurrences of "example.com" with your domain name.
#
# The parts ending with the comment "managed by Certbot" were inserted by Certbot.
# Let Certbot deal with them, unless you know what you're doing. In that case you probably don't need this Gist.
#
server {
    server_name example.com;

    location / {
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header Host $http_host;
        
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        
	# If your Next.js application is running on a different port than 3000, replace it accordingly
        proxy_pass http://localhost:3000;
        proxy_redirect off;
        proxy_read_timeout 240s;
    }

    # Listening for HTTPS traffic
    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/example.com/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem; # managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot
}

# Enforcing HTTPS by redirecting HTTP to HTTPS
server {
    server_name example.com;
    listen 80;

    if ($host = example.com) {
        return 301 https://$host$request_uri;
    } # managed by Certbot

    return 404; # managed by Certbot
}

static-content.conf

# ---- Configuring NGINX for serving static content ---
#
# Replace the occurrences of "example.com" with your domain name.
#
# The parts ending with the comment "managed by Certbot" were inserted by Certbot.
# Let Certbot deal with them, unless you know what you're doing. In that case you probably don't need this Gist.
#
server {
    # Root directory of your static files
    root /srv/example.com;

    index index.html index.htm; 

    server_name example.com;

    location / {
        # First attempt to serve request as file, then
	# as directory, then fall back to displaying a 404.
        try_files $uri.html $uri $uri/ =404;
    }

    # Listening for HTTPS traffic
    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/example.com/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem; # managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot
}

# Enforcing HTTPS by redirecting HTTP to HTTPS
server {
    server_name example.com;
    listen 80;

    if ($host = example.com) {
        return 301 https://$host$request_uri;
    } # managed by Certbot

    return 404; # managed by Certbot
}