Aman Kumar Singh
Aman Kumar Singh
Aman Kumar SinghView Profile

Home iconHomeAbout iconAboutPortfolio iconPortfolioStack iconStackBlog iconBlogContact iconContact

Mail iconMailLinkedIn iconLinkedInGitHub iconGitHubX iconX

© 2026 Aman Kumar Singh. All rights reserved.

ContactAboutBlog
HomeBlogStep-by-Step Guide to Hosting Your Next.js Application on a VPS
Next.jsnginxvps

Step-by-Step Guide to Hosting Your Next.js Application on a VPS

This guide will walk you through setting up and hosting a Next.js application on a VPS using Nginx. By the end of this tutorial, your Next.js app will be live and secure with HTTPS.

Aman Kumar SinghAman Kumar Singh
June 14, 2024
3 min read
226 words
Share:
Step-by-Step Guide to Hosting Your Next.js Application on a VPS - banner image
...
0

Table of Contents

  1. Step 1: Install Nginx, Node.js, and Certbot
  2. Step 2: Setup firewall
  3. Step 3: Set Up Let's Encrypt with Certbot
  4. Step 4: Set Up Reverse Proxy
  5. Step 5: Set Up Your Next.js App
  6. Important Points

Step 1: Install Nginx, Node.js, and Certbot

First, connect to your server via SSH and execute the following commands:

# Navigate to the current user's home directory
cd ~

# Set up Node.js repository
curl -sL https://deb.nodesource.com/setup_14.x -o nodesource_setup.sh
sudo bash nodesource_setup.sh

# Update package lists and install required packages
sudo apt update
sudo apt install nginx nodejs certbot python3-certbot-nginx

Step 2: Setup firewall

Setup firewall and enable Nginx in your firewall:

# Download firewall
sudo apt install ufw

# Allow OpenSSH connections (needed for SSH)
sudo ufw allow 'OpenSSH'

# Allow Nginx Full
sudo ufw allow 'Nginx Full'

# Allow SSH Connections
sudo ufw allow 21
sudo ufw allow 22


# Enable the firewall
sudo ufw enable

Step 3: Set Up Let's Encrypt with Certbot

Before proceeding, ensure your domain is pointed to your server's IP address using DNS A records.

Type Host Value TTL
A Record @ Your Server IP 60

Note: Set the TTL according to your provider's recommendations. The TTL value indicates the time in seconds after which the server will be pinged again.

Create a Nginx configuration for the site:

# sitename -> keep it your websitename
sudo nano /etc/nginx/conf.d/sitename.conf

Update the server_name directive with your domain and the proxy_pass to the address where your website will be live:

server {
        root /var/www/html;

        # Add index.php to the list if you are using PHP
        index index.html index.htm index.nginx-debian.html;

        server_name deedz.dev www.deedz.dev;

        location / {
                # First attempt to serve request as file, then
                # as directory, then fall back to displaying a 404.
                proxy_pass http://localhost:5001;
                proxy_http_version 1.1;
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection "upgrade";
                proxy_set_header Host $host;
                proxy_set_header X-Real-IP $remote_addr;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                proxy_set_header X-Forwarded-Proto $scheme;
                proxy_set_header X-Forwarded-Host $host;
                proxy_set_header X-Forwarded-Port $server_port;
        }
}

Check for syntax errors and restart Nginx:

sudo nginx -t
sudo systemctl restart nginx

Run Certbot to set up HTTPS:

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

Follow the prompts to complete the certificate setup.

Step 4: Set Up Reverse Proxy

We have already added the necessary code in Step 3. Simply restart Nginx to apply the changes:

sudo nginx -t
sudo systemctl restart nginx

Step 5: Set Up Your Next.js App

Upload your code to GitHub, install GitHub on your server, and connect with GitHub CLI (refer to another blog for setup instructions). After that, follow these steps:

git clone https://github.com/user/repo.git

cd repo

npm install # or yarn install
npm run build # or yarn build
Install PM2 to manage your application:
npm install -g pm2
Start your Next.js application with PM2:
# The sitename can be anything; it represents your PM2 process name and port, which should match the configuration in Nginx.
sudo pm2 start npm --name "sitename-5001" -- start -- --port=5001

Important Points

To see the list of applications, use:

pm2 ls

To restart the application, use:

pm2 restart sitename-5001

To stop the application, use:

pm2 stop next
pm2 resurrect
Aman Kumar Singh

Written by Aman Kumar Singh

Full Stack Developer passionate about Next.js, React, and building scalable web applications. Sharing insights and tutorials to help developers grow.

View Profile Follow

Share this article

Share on X Share on LinkedIn

Related Articles

Why These AI CEOs Say AI Won't Replace Humans — It Will Empower Them - blog banner
2 min
AI in CodingWeb Development

Why These AI CEOs Say AI Won't Replace Humans — It Will Empower Them

Human-AI Collaboration is the Future At Web Summit Qatar earlier this month, CEOs from two leading AI companies shared their vision for the future of ...

20
1w ago
Google Launches Gemini 3.1 Pro: Double the Reasoning Power - blog banner
1 min
AI in CodingDeveloper Tools

Google Launches Gemini 3.1 Pro: Double the Reasoning Power

Google's Smartest Model Yet Google has released Gemini 3.1 Pro, a major upgrade to their AI model with significantly improved reasoning capabilities. ...

20
1w ago
OpenAI Partners with Reliance to Add AI Search to JioHotstar - blog banner
4 min
AI in Coding

OpenAI Partners with Reliance to Add AI Search to JioHotstar

OpenAI has partnered with Reliance to bring conversational AI search to JioHotstar, India's largest streaming service. Users will be able to search for movies, shows, and live sports using text and voice prompts in multiple languages.

50
1w ago
All Articles
0
0