How to Host Multiple Next.js Applications on a Single VM with Nginx and Custom Domains

 If you're working with multiple Next.js applications and want to host them all on a single virtual machine (VM) while assigning different domains or subdomains to each, this guide is for you. We'll walk through setting up PM2, Nginx, domain pointing, and even HTTPS using Let's Encrypt.

---

🧱 Step 1: Set Up Each Next.js Application

1. Build Each App

First, navigate to each app directory and build it for production:

# App 1
cd /path/to/your/nextjs-app1
npm install
npm run build

# App 2
cd /path/to/your/nextjs-app2
npm install
npm run build

# App 3
cd /path/to/your/nextjs-app3
npm install
npm run build

2. Manage Your Apps Using PM2

Create an ecosystem.config.js file to manage your apps:

module.exports = {
  apps: [
    {
      name: "app1",
      script: "npm",
      args: "run start",
      cwd: "/path/to/your/nextjs-app1",
      env: {
        NODE_ENV: "production",
        PORT: 4300
      }
    },
    {
      name: "app2",
      script: "npm",
      args: "run start",
      cwd: "/path/to/your/nextjs-app2",
      env: {
        NODE_ENV: "production",
        PORT: 4301
      }
    },
    {
      name: "app3",
      script: "npm",
      args: "run start",
      cwd: "/path/to/your/nextjs-app3",
      env: {
        NODE_ENV: "production",
        PORT: 4302
      }
    }
  ]
};

Start all apps using PM2:

pm2 start ecosystem.config.js

---

🌐 Step 2: Install and Configure Nginx

1. Install Nginx

sudo apt update
sudo apt install nginx

2. Create Nginx Configuration for Each Domain

Create a configuration file for each app in /etc/nginx/sites-available/.

Example: app1.yourdomain.com

server {
    listen 80;
    server_name app1.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;
    }
}

Repeat the same for other domains like app2.yourdomain.com and app3.yourdomain.com using the corresponding ports.

3. Enable the Sites

sudo ln -s /etc/nginx/sites-available/app1.yourdomain.com  /etc/nginx/sites-enabled/
sudo ln -s /etc/nginx/sites-available/app2.yourdomain.com /etc/nginx/sites-enabled/
sudo ln -s /etc/nginx/sites-available/app3.yourdomain.com /etc/nginx/sites-enabled/

4. Test and Restart Nginx

sudo nginx -t
sudo systemctl restart nginx

---

🌍 Step 3: Point Your Domains to the VM

Log in to your domain provider (e.g., GoDaddy, Namecheap) and update the DNS records:

app1.yourdomain.com     →     [Your VM IP]
app2.yourdomain.com       →     [Your VM IP]
app3.yourdomain.com       →     [Your VM IP]

Add A records for each subdomain, pointing to the public IP of your VM.

---

🔐 Step 4: Enable SSL with Let's Encrypt (Recommended)

1. Install Certbot

sudo apt install certbot python3-certbot-nginx

2. Obtain SSL Certificates

sudo certbot --nginx -d upload.inditechit.com -d app2.yourdomain.com -d app3.yourdomain.com

Follow the prompts to complete the setup.

3. Test Renewal (Optional)

sudo certbot renew --dry-run

---

✅ Done!

Now you have multiple Next.js apps running on a single VM, each served on a custom domain with HTTPS. Nginx handles the routing via reverse proxy, while PM2 keeps your apps alive and running in the background.