How do I enable HTTPS for Next.js?

Enabling HTTPS in Local Development

HostingDuty supports Next.js deployments with HTTPS out of the box, but for local development, you need to configure the dev server explicitly. Next.js version 13.5.1 introduced an experimental flag to enable HTTPS during development.

Using the Experimental Flag

Run the following command to start the dev server with HTTPS:

``bash next dev --experimental-https `

This uses mkcert to generate a self-signed certificate stored in your project root. The certificate is trusted by your local machine if mkcert is installed and configured properly. For more details on certificate management, see our glossary entry on SSL certificates.

Production HTTPS Configuration

In production, self-signed certificates are not suitable. You should use a valid certificate from a Certificate Authority (CA). HostingDuty provides automated SSL provisioning for all domains. See our knowledge base article on SSL setup for step-by-step instructions.

Reverse Proxy Setup

If you're not using Vercel or HostingDuty's managed platform, configure a reverse proxy like Nginx or Caddy to terminate HTTPS. Example Nginx configuration:

`nginx server { listen 443 ssl; server_name example.com; ssl_certificate /path/to/cert.pem; ssl_certificate_key /path/to/key.pem; location / { proxy_pass http://localhost:3000; } } ``

For more on reverse proxy configurations, check our tutorial on Nginx setup.

Caveats and Best Practices

• Self-signed certificates are only for development. Never use them in production.
• Always renew certificates before expiration. Let's Encrypt certificates are valid for 90 days.
• Use HSTS headers to enforce HTTPS in browsers. See our QA on HSTS for implementation details.

For a comparison of hosting platforms with built-in HTTPS, see our HostingDuty vs Vercel comparison. This helps you choose the right environment for your Next.js deployment.