How to Deploy NextJS App on a Custom VPS
Tags: javascript, nextjs, devops, react
Published: 2022-08-26 16:47:00

## 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](https://dev.to/ranjan/deploy-multiple-nodejs-apps-on-single-server-with-ssl-nginx-pm2-part-1-4841).

## Step 1 - Creating The APP 
First we are creating a New Next JS APP on server with

```sh
npx create-next-app@latest awesome-app
```
or you can clone an existing repo from git

```sh
git clone awesome-app.git
```
then we need to get into the folder we just created with
```sh
cd awesome-app
```
if you cloned the app from git you need to do an additional app to install the dependencies  
```sh
npm install 
#or 
yarn 
```
## Step 2 - Building For Production
NextJS comes with build scripts so we just need to run it

```sh
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](https://dev.to/ranjan/deploy-multiple-nodejs-apps-on-single-server-with-ssl-nginx-pm2-part-1-4841) 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
```javascript
{
  "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 
```sh
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

```sh
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 
```sh
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.