How to Deploy a Next js App on a VPS : A Step-by-Step Guide

Deploying a Next.js app on a Virtual Private Server (VPS) can be straightforward with the right tools. This guide will walk you through how to deploy a Next js app using PM2 to manage the Node.js process and Caddy as the web server for handling HTTPS and reverse proxy.

#Prerequisites

• A VPS running Ubuntu or a similar Linux distribution.
• A domain name pointed to your VPS IP address.
• Basic knowledge of using the terminal.

#1. Update Your System:

sudo apt update && sudo apt upgrade -y && sudo apt autoremove -y

#2. Install NVM (Node Version Manager):

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.0/install.sh | bash

For the latest version, refer to the official NVM repository.

• Add NVM to Your Shell Profile:

echo 'export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"' >> ~/.bashrc
echo '[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"' >> ~/.bashrc

• Reload Your Shell Configuration:

source ~/.bashrc

• Verify NVM Installation:

nvm --version

• Install Node.js LTS:

nvm install --lts

#3. Verify Node.js and npm Installation:

node -v
npm -v

#4 . Clone Your Project Repository:

git clone https://github.com/your_username/your_nextjs_app.git
cd your_nextjs_app
npm install
npm run build

#5. Install PM2 globally:

npm install -g pm2

#6. Create a ecosystem.config.js file:

{
  "apps": [
    {
      "name": "nextjs",
      "script": "node_modules/next/dist/bin/next",
      "args": "start",
      "cwd": "./",
      "instances": "max",
      "exec_mode": "cluster",
      "env": {
        "NODE_ENV": "production",
        "production": true
      }
    }
  ]
}

You can adjust based on your need

• Then run

pm2 start ecosystem.config.js

it will start your application on background and it will keep running, pm2 also have so many feature you can learn more from there official website https://pm2.keymetrics.io/

#7. Save the PM2 process list and configure PM2 to start on boot.

pm2 save
pm2 startup

#8. Setup Caddy to reverse proxy domain to nextjs app:

sudo apt install -y debian-keyring debian-archive-keyring apt-transport-https curl
curl -1sLf 'https://dl.cloudsmith.io/public/caddy/stable/gpg.key' | sudo gpg --dearmor -o /usr/share/keyrings/caddy-stable-archive-keyring.gpg
curl -1sLf 'https://dl.cloudsmith.io/public/caddy/stable/debian.deb.txt' | sudo tee /etc/apt/sources.list.d/caddy-stable.list
sudo apt update
sudo apt install caddy

If this not work you can alway get updated code from official website https://caddyserver.com/docs/install#debian-ubuntu-raspbian

sudo nano /etc/caddy/Caddyfile

• Add the following configuration (replace your_domain with your actual domain):

your_domain {
    reverse_proxy localhost:3000
}

• then restart caddy

sudo systemctl restart caddy

• Secure Your App with HTTPS:

Caddy will automatically manage SSL/TLS certificates for you. Just make sure your domain’s DNS is correctly pointed to your VPS IP.