The Ultimate Guide to Deploying a Next.js Application with Nginx

Explore the powerful deployment techniques of Next.js applications with Nginx in this impressive guide. Take your projects to the next level.

Deploying Next.js Applications with Nginx, PM2, and SSL: A Comprehensive Guide

In this guide, we’ll walk through the process of deploying a Next.js application on a Ubuntu server, configuring Nginx as a reverse proxy, managing the application process with PM2, and securing it with SSL using Let’s Encrypt.

Deploying a Next.js Application with Nginx, PM2, and SSL: A Step-by-Step Guide

1. Prerequisites
2. Setting Up Firewall
3. Installing Nginx
4. Connecting to the Instance with a Domain Name
5. Adding Your Project to the Server
6. Installing Node.js and Dependencies
7. Installing PM2 (Process Manager)
8. Configuring NGINX as a Reverse Proxy
9. Enabling HTTPS and Obtaining SSL Certificate
10. Monitoring Logs, Deploying Updates, and Managing Server Resources

Let’s embark on our journey to deploy a Next.js app step by step.

1. Prerequisites

Before getting started, ensure you have the following prerequisites in place:

• Ubuntu Server Setup

You’ll need access to a Ubuntu server instance to deploy your Next.js application. If you don’t have one set up already, you can follow a cloud provider’s documentation to create a new Ubuntu server instance.

• Domain Name Purchase

Obtain a domain name for your application. You can purchase a domain name from a domain registrar such as GoDaddy, Namecheap, or Google Domains.

• Git Repository Hosting

Your Next.js application code should be hosted in a Git repository, such as GitHub, GitLab, or Bitbucket. Make sure your application code is accessible from a Git repository before proceeding with deployment.

2. Setting Up Firewall:

Before we begin, let’s ensure our server is secure by configuring the firewall.

sudo ufw app list // View available application profiles
sudo ufw allow OpenSSH // Allow SSH connections
sudo ufw enable // Enable the firewall
sudo ufw status // Check firewall status

3. Installing Nginx:

Nginx will act as a reverse proxy for our Next.js application.

sudo apt-get update // Update package list
sudo apt-get install nginx // Install Nginx

4. Connecting to the Instance with a Domain Name:

Connect to your server using SSH and your domain name.

ssh username@your-domain.com // Connect to server via SSH

5. Adding Your Project to the Server:

Before adding your project to the server, ensure you have the necessary SSH keys set up and your environment is properly configured.

# Setup SSH key
ssh-keygen -t rsa -b 4096 // Generate SSH key pair

Redirect to the directory where your SSH key is available and copy the public key.

cd ~/.ssh // Navigate to SSH directory
cat id_rsa.pub // Display public key

Now, navigate back to your home directory.

cd ~ // Navigate to home directory

Next, add your SSH key to your GitHub account under “SSH and GPG keys” settings.

After setting up SSH, clone your project using the SSH URL provided by GitHub.

git clone [github ssh link] // Clone project using SSH

Sometimes, npm package installation errors can occur due to Node.js version mismatches. To resolve this, clean the npm cache and install the latest stable version of Node.js.

sudo npm cache clean -f // Clean npm cache
sudo npm install -g n // Install n package manager
sudo n stable // Install latest stable version of Node.js

By following these steps, you’ll ensure that your project is successfully added to the server, and any potential npm package installation issues related to Node.js versions are resolved.

6. Installing Node.js and Dependencies:

Ensure Node.js and npm are installed on your server.

sudo apt-get install nodejs npm // Install Node.js and npm

7. Installing PM2 (Process Manager):

PM2 will manage our Next.js application process.

sudo npm install -g pm2 // Install PM2 globally
pm2 start --name=my-next-app npm -- start // Start Next.js app with PM2
pm2 startup systemd // Set up PM2 to start on boot

8. Configuring NGINX as a Reverse Proxy:

Create a new NGINX configuration file for your Next.js application.

sudo nano /etc/nginx/sites-available/my-next-app // Create NGINX config file

Add the following configuration:

server {
    listen 80;
    listen [::]:80;

    root /var/www/html;
    index index.html index.htm index.nginx-debian.html;

    server_name your-domain.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;
    }
}

Enable the site and restart NGINX.

sudo ln -s /etc/nginx/sites-available/my-next-app /etc/nginx/sites-enabled // Enable NGINX site
sudo nginx -t // Verify NGINX configuration syntax
sudo systemctl restart nginx // Restart NGINX

9. Enabling HTTPS and Obtaining SSL Certificate:

Secure your site with SSL using Let’s Encrypt.

sudo apt-get install certbot python3-certbot-nginx // Install Certbot
sudo ufw allow 'Nginx Full' // Allow HTTPS traffic
sudo certbot --nginx -d your-domain.com -d www.your-domain.com // Obtain SSL certificate
sudo certbot renew --dry-run // Test automatic certificate renewal

10. Monitoring Logs, Deploying Updates, and Managing Server Resources:

Monitor your Next.js application with PM2 and deploy updates.

pm2 list // List PM2-managed processes
pm2 monit [process ID] // Monitor specific process with PM2

To deploy updates:

cd [project directory] // Navigate to project directory
git pull // Pull latest changes from Git repository
npm run build // Build project
pm2 restart [process ID] // Restart PM2 process

Conclusion:

Deploying a Next.js application involves multiple steps, from setting up the server environment to configuring Nginx, managing the application process, and securing it with SSL. By following this guide, you can deploy your Next.js application with confidence and ensure a seamless user experience for your audience.