How to Deploy a Next.js App with SSL Certificate

Deploying a Next.js application with an SSL certificate ensures secure communication between your users and your server. In this guide, we’ll cover the step-by-step process of deploying a Next.js app and setting up SSL for HTTPS.

Prerequisites

• A Next.js project

• A cloud server (such as AWS, DigitalOcean, or a VPS)

• A domain name

• Nginx or Apache installed on your server

• SSL certificate (Let's Encrypt or a paid one)

---

Step 1: Build and Export the Next.js Application

If you’re deploying a static site, run:

npm run build
npm run export

For a full server-side Next.js app:

npm run build

Step 2: Set Up Your Server

You need a server to host your Next.js application. You can use services like Vercel, AWS, DigitalOcean, or a custom VPS.

For a custom VPS:

1. Connect to your server via SSH:

    ssh user@your-server-ip
   

2. Install Node.js and PM2:

    sudo apt update
    sudo apt install nodejs npm
    npm install -g pm2
   

3. Upload your Next.js build files and start the server:

    pm2 start npm --name "next-app" -- start
    pm2 save
    pm2 startup
   

Step 3: Set Up Nginx as a Reverse Proxy

1. Install Nginx:

    sudo apt install nginx
   

2. Configure Nginx:

    sudo nano /etc/nginx/sites-available/next-app
   

3. Add the following configuration:

    server {
        listen 80;
        server_name yourdomain.com;
        location / {
            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_cache_bypass $http_upgrade;
        }
    }
   

4. Enable the configuration and restart Nginx:

    sudo ln -s /etc/nginx/sites-available/next-app /etc/nginx/sites-enabled/
    sudo nginx -t
    sudo systemctl restart nginx
   

Step 4: Install an SSL Certificate

To install a free SSL certificate using Let’s Encrypt:

sudo apt install certbot python3-certbot-nginx
sudo certbot --nginx -d yourdomain.com -d www.yourdomain.com

Follow the prompts, and Certbot will automatically configure SSL for your Nginx server.

Step 5: Renew SSL Certificate Automatically

Let’s Encrypt certificates expire every 90 days, so set up automatic renewal:

sudo certbot renew --dry-run

If the renewal test is successful, Let’s Encrypt will automatically renew the certificate when needed.

Step 6: Verify HTTPS Deployment

Visit https://yourdomain.com in your browser to confirm that your Next.js app is running securely over HTTPS.

---

Conclusion

You have successfully deployed a Next.js application with an SSL certificate, ensuring your users have a secure browsing experience. If you need a managed solution, consider hosting platforms like Vercel or Netlify, which handle SSL automatically.