Step-by-Step Guide to Hosting Your Next.js Application on a VPS

Date: June 14, 2024

Step 1: Install Nginx, Node.js, and Certbot

First, connect to your server via SSH and execute the following commands:

# Navigate to the current user's home directory
cd ~

# Set up Node.js repository
curl -sL https://deb.nodesource.com/setup_14.x -o nodesource_setup.sh
sudo bash nodesource_setup.sh

# Update package lists and install required packages
sudo apt update
sudo apt install nginx nodejs certbot python3-certbot-nginx

Step 2: Setup firewall

Setup firewall and enable Nginx in your firewall:

# Download firewall
sudo apt install ufw

# Allow OpenSSH connections (needed for SSH)
sudo ufw allow 'OpenSSH'

# Allow Nginx Full
sudo ufw allow 'Nginx Full'

# Allow SSH Connections
sudo ufw allow 21
sudo ufw allow 22


# Enable the firewall
sudo ufw enable

Step 3: Set Up Let's Encrypt with Certbot

Before proceeding, ensure your domain is pointed to your server's IP address using DNS A records.

Type	Host	Value	TTL
A Record	@	Your Server IP	60

Note: Set the TTL according to your provider's recommendations. The TTL value indicates the time in seconds after which the server will be pinged again.

Create a Nginx configuration for the site:

# sitename -> keep it your websitename
sudo nano /etc/nginx/conf.d/sitename.conf

Update the server_name directive with your domain and the proxy_pass to the address where your website will be live:

server {
        root /var/www/html;

        # Add index.php to the list if you are using PHP
        index index.html index.htm index.nginx-debian.html;

        server_name deedz.dev www.deedz.dev;

        location / {
                # First attempt to serve request as file, then
                # as directory, then fall back to displaying a 404.
                proxy_pass http://localhost:5001;
                proxy_http_version 1.1;
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection "upgrade";
                proxy_set_header Host $host;
                proxy_set_header X-Real-IP $remote_addr;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                proxy_set_header X-Forwarded-Proto $scheme;
                proxy_set_header X-Forwarded-Host $host;
                proxy_set_header X-Forwarded-Port $server_port;
        }
}

Check for syntax errors and restart Nginx:

sudo nginx -t
sudo systemctl restart nginx

Run Certbot to set up HTTPS:

sudo certbot --nginx -d example.com -d www.example.com

Follow the prompts to complete the certificate setup.

Step 4: Set Up Reverse Proxy

We have already added the necessary code in Step 3. Simply restart Nginx to apply the changes:

sudo nginx -t
sudo systemctl restart nginx

Step 5: Set Up Your Next.js App

Upload your code to GitHub, install GitHub on your server, and connect with GitHub CLI (refer to another blog for setup instructions). After that, follow these steps:

git clone https://github.com/user/repo.git

cd repo

npm install # or yarn install
npm run build # or yarn build

Install PM2 to manage your application:

npm install -g pm2

Start your Next.js application with PM2:

# The sitename can be anything; it represents your PM2 process name and port, which should match the configuration in Nginx.
sudo pm2 start npm --name "sitename-5001" -- start -- --port=5001

Important Points

To see the list of applications, use:

pm2 ls

To restart the application, use:

pm2 restart sitename-5001

To stop the application, use:

pm2 stop next
pm2 resurrect

Next Blog

Aman Kumar Singh