How to Deploy your NextJS App on a VPS

Deployment — A crucial part of Development that most of the crash courses and tutorials we do leave out in their curriculum. It is one of the underrated skills and a must-have to become an all-round developer. Today we are going to see how to Deploy a Next.js Application on a VPS(Virtual Private Server).

You must be thinking Why not just deploy it on Vercel? It is so simple and seamless. But let me tell you while Vercel is a well-liked option, you might prefer to test on your own VPS or you might not feel comfortable with a managed hosting company and the costs on Vercel increases exponentially very quickly.

This article will be a total guide on how to deploy your Next.js application, set up nginx as a proxy server, connect your domain to next.js app, get SSL certificate using Certbot, and run it using pm2. So let’s get started.

Things to have beforehand:

Your own VPS
A Next.js application
Basic knowledge of SSH, Node.js, and basic Linux command-line usage.
Domain for your application (optional, you can check your app running directly on IP also)

Set Up Your VPS

Connect to VPS using SSH. Replace your-vps-ip with the IP address of your VPS.

ssh root@your-vps-ip

2. Install Necessary Software

Update and Upgrade: Update the package list and upgrade installed packages to the latest versions.

sudo apt update 
sudo apt upgrade -y

Install Node.js and npm: Install Node.js and npm on your VPS.

sudo apt install -y nodejs

Install PM2: PM2 is a process manager for Node.js applications. It keeps your app running and restarts it if it crashes.

sudo npm install -g pm2

Deploy your Next.js Application

Now here are 3 ways:

Transfer your application files to the VPS using SCP (secure copy) from your local machine to your VPS by running the command below from your local machine’s terminal. Replace the paths as needed.

scp -r /path/to/your/nextjs-app root@your-vps-ip:/path/to/destination

2. Clone your Application from a GitHub repository. If it is a public repo, clone directly(not recommended), for a private repo you have to generate SSH keys in your VPS and then copy the public key and put it in the keys section of your GitHub Account to allow the VPS to clone your private repo using ssh.

git clone <Your repository link>

3. Create a new Next.js App on the VPS only.

cd /path/to/your/nextjs-app
npx create-next-app@latest myapp

Now that we have deployed our Application, it’s time to set up a reverse proxy nginx server and connect the domain to our Application. Then at last we will build our app and start it with pm2.

Set Up a Reverse Proxy with Nginx

Install Nginx: Install Nginx, a web server that can act as a reverse proxy.

sudo apt install nginx -y

2. Adjust our Firewall: To allow nginx and traffic on port 80 and 443.

sudo ufw allow 'Nginx HTTP'
sudo ufw allow 'Nginx HTTPS'

then enable our firewall

sudo ufw enable
sudo ufw status //to check the status which should show like below

Output

Status: active
To Action From
 - - - - - - 
OpenSSH ALLOW Anywhere
Nginx HTTP ALLOW Anywhere
OpenSSH (v6) ALLOW Anywhere (v6)
Nginx HTTP (v6) ALLOW Anywhere (v6)

Check if nginx has started

systemctl status nginx

verify by going to the IP of your VPS ‘your_vps_ip_address’ on a browser, it should show the default nginx page.

3. Create Nginx Config: Create an Nginx configuration file to forward web traffic to your Next.js application.

sudo nano /etc/nginx/sites-available/nextjs-app.conf

and then paste the below configuration and replace your-domain.com with your domain.

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

now delete the default config file

sudo rm /etc/nginx/sites-enabled/default

and lastly, enable our configuration by a symbolic link and restart nginx

sudo ln -s /etc/nginx/sites-available/nextjs-app.conf /etc/nginx/sites-enabled/
sudo systemctl restart nginx

Secure Your Application with SSL

Install Certbot with snapd

Install snapd:

sudo apt install snapd

2. Ensure you have the latest snapd version installed:

sudo snap install core; sudo snap refresh core

3. Install Certbot with snapd:

sudo snap install - classic certbot

4. Create a symlink to ensure Certbot runs:

sudo ln -s /snap/bin/certbot /usr/bin/certbot

Obtain SSL certificate with Certbot

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

Build your application and start with pm2

Now that we have our app on VPS, the domain connected with it and SSL to secure it. It's finally time to build our Next.js app and get it running.

Go to your app and run the command build command

cd /path/to/your/nextjs-app
npm run build

2. Start the application using pm2

sudo pm2 start npm --name "myapp" -- start

3. Save the pm2 process and set up pm2 to start on boot

sudo pm2 save
sudo pm2 startup

4. Now go to your domain and you will see your Next.js App running.

your-domain.com

Conclusion

Deploying your Next.js application on a VPS might seem challenging at first, but by following these steps, you can set up your server, install the necessary software, transfer your application, and secure it with HTTPS. This process gives you more control over your application and can lead to better performance and cost savings. Happy deploying!

Reference:

Deploy NextJS App on VPS
How to Deploy NextJS app on VPS Full tutorialmedium.com

Thank you for reading! If you have any feedback or notice any mistakes, please feel free to leave a comment below. I’m always looking to improve my writing and value any suggestions you may have. If you’re interested in working together or have any further questions, please don’t hesitate to reach out to me at fa1319673@gmail.com.