How to Deploy NextJS App on a Custom VPS

Motivation

Whenever we develop any Next JS app and start deployment the first thing that comes in mind is Vercel. Now days there are a ton of Hosting providers also supporting Next JS on there platform But recently I was working on a project where I needed to deploy A NextJS SSR App on a VPS server due to the client was not comfortable deploying any where else so I looked it up and there was no proper instruction how to do it.

Prerequisites

Before we start deploying anything First we need a VPS ready for that Please Read Part 1 of the Node js Server Setup series here.

Step 1 - Creating The APP

First we are creating a New Next JS APP on server with

npx create-next-app@latest awesome-app

or you can clone an existing repo from git

git clone awesome-app.git

then we need to get into the folder we just created with

cd awesome-app

if you cloned the app from git you need to do an additional app to install the dependencies

npm install 
#or 
yarn 

Step 2 - Building For Production

NextJS comes with build scripts so we just need to run it

npm run build
#or 
yarn build

it will take a while to generate production build of your project like it will Generated all static pages for you in advance.

Step 3 - Setting Port (Optional)

By default Next JS will run at port 3000 but on this server we are already running a app on 3000 so we need to update the package.json to start the Production app on new port like 4400

{
  "name": "awesome-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start -p 4400", // or whatever port you want 
    "lint": "next lint"
  },
  "dependencies": {
    "next": "12.2.5",
    "react": "18.2.0",
    "react-dom": "18.2.0"
  },
  "devDependencies": {
    "eslint": "8.22.0",
    "eslint-config-next": "12.2.5"
  }
}

Step 4 - Starting App With PM2

to start the app with PM2 we need to run

pm2 start npm --name "awesome-app" -- start

this will start the app at port 4400 if you wish to add SSL and reverse proxy with NGINX we need to add New app to Our existing NGINX config form VPS Setup.

Step 5 - Adding Reverse Proxy With NGINX

To update server First open the config

sudo nano /etc/nginx/sites-available/default

and add this new block in location part of the server block

    server_name awesomeapp.com.com www.awesomeapp.com.com;

    location / {
        proxy_pass http://localhost:4400; 
        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;
    }

if you are planing to host secound app on subdomain just replace yourdomain2.com with subdomain like api2.yourdomain.com

then check and restart the NGINX

# Check NGINX config
sudo nginx -t

# Restart NGINX
sudo service nginx restart

if domain is pointed you should see your app live on port 80 there is one more step to go adding SSL.

Step 6 - Adding SSL for Second APP

we already have certbot installed so adding additional domains are not an issue

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

that's all your New app also should be Live on New domain with SSL.

Please Let me Know if you encounter any issues Thanks.