Setting Up Local HTTPS for Next.js with Nginx Proxy Manager

Developing Next.js applications locally typically means accessing them via http://localhost:3000 or an internal IP address like http://192.168.1.100:3000. However, testing HTTPS-only features (such as secure cookies, Web Crypto API, or Service Workers) or simply desiring a clean local domain (like https://nextjs.local) requires setting up SSL reverse proxying.

This guide walks through configuring Nginx Proxy Manager (NPM) to point custom .local domains to your locally running Next.js apps with custom self-signed SSL certificates—without relying on Let's Encrypt or public domain validation.

Prerequisites

• A Next.js application running on your network (e.g., http://192.168.1.100:3000).
• Nginx Proxy Manager installed and running on your local network.
• OpenSSL installed on your workstation or server.

Step 1: Generate a Local Self-Signed Certificate

Because .local or internal domain names cannot be validated by public Certificate Authorities like Let's Encrypt, we generate our own local private key and certificate pair using OpenSSL.

Run the following commands in your terminal:

# Generate private key
openssl genrsa -out local.key 2048
 
# Generate self-signed certificate (valid for 825 days)
openssl req -x509 -new -nodes -key local.key -sha256 -days 825 -out local.crt -subj "/CN=nextjs.local"

This generates two files:

1. local.key (Private key)
2. local.crt (Public certificate for nextjs.local)

Step 2: Import Certificate into Nginx Proxy Manager

1. Open your Nginx Proxy Manager admin panel (default: http://<NPM-IP>:81).
2. Navigate to SSL Certificates in the top navigation bar.
3. Click Add SSL Certificate and select Custom.
4. Fill in the details:
   • Name: NextJS Local SSL
   • Certificate (PEM): Upload or paste the contents of local.crt.
   • Private Key (PEM): Upload or paste the contents of local.key.
5. Click Save.

Step 3: Configure the Next.js Proxy Host

Next, set up the proxy rule to forward secure incoming traffic on https://nextjs.local to your local Next.js service.

1. Go to Hosts → Proxy Hosts → Add Proxy Host.
2. Under the Details tab:
   • Domain Names: nextjs.local
   • Scheme: http (Keep as HTTP; NPM handles SSL termination for incoming requests)
   • Forward Hostname / IP: 192.168.1.100 (Your Next.js host IP)
   • Forward Port: 3000
   • Websockets Support: Enabled (Required for Next.js Hot Module Replacement / HMR)
3. Under the SSL tab:
   • SSL Certificate: Select NextJS Local SSL (the certificate uploaded in Step 2).
   • Force SSL: Enabled (Redirects all http:// requests automatically to https://)
   • HTTP/2 Support: Enabled
4. Click Save.

Step 4: Configure Local DNS or Hosts File

Your local devices must know where to resolve nextjs.local.

Option A: Local DNS (AdGuard Home / Pi-hole)

Add a DNS Rewrite/Record mapping nextjs.local to the IP address of your Nginx Proxy Manager instance.

Option B: Local Hosts File

If testing on a single machine, append the NPM instance IP address to your operating system's hosts file:

# /etc/hosts (macOS/Linux) or C:\Windows\System32\drivers\etc\hosts (Windows)
192.168.1.50    nextjs.local

Step 5: Trust the Certificate (Optional)

When visiting https://nextjs.local, your browser will initially display a safety warning because the self-signed certificate wasn't issued by a recognized root authority.

• Quick Bypass: Click Advanced → Proceed to nextjs.local (unsafe).
• Permanent Trust: Import local.crt into your operating system or browser's Trusted Root Certification Authorities store.

Summary

With Nginx Proxy Manager configured for local SSL termination, you can cleanly access https://nextjs.local while Next.js continues to run uninterrupted on http://192.168.1.100:3000 with full WebSocket/HMR support.