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.
Top comments (0)