How to Host a Next.js Website on a VPS: Complete Step-by-Step Guide

Next.js has become one of the most popular frameworks for building modern websites and web applications. It gives developers the flexibility to create static pages, server-rendered pages, API routes, dynamic dashboards, ecommerce interfaces, SaaS platforms, blogs, documentation websites, and full production-ready applications from one codebase.

If your Next.js project is ready to go to production, one of the key questions to consider is where to host your app. Many developers opt for a VPS as it will provide them with greater control over the server, the runtime, deployment, security, scaling strategy and cost. A VPS is particularly beneficial for those wishing to have full root access, configure the server as they please, run long-lived Node.js processes, serve private APIs, schedule background jobs, connect to databases, store files, set up custom caching, or create a more controlled production environment.

In this tutorial, you’ll learn to deploy a Next.js site from scratch to a VPS. We will discuss the requirements for the server, as well as some suggestions for the Voxfor VPS plan, setting up the domain, installing Node.js, deployment of the Project, PM2 process management, Nginx reverse proxy installation, SSL configuration, environment variables, firewall rules, performance tips, and common troubleshooting steps.

The goal is not only to help you put a Next.js website online, but also to help you understand what each part of the setup does.

Why Host Next.js on a VPS?

A Next.js application is not always just a group of static files. Depending on how you build your project, it may need a Node.js server to handle server-side rendering, API routes, middleware, authentication, dynamic data fetching, image optimization, and incremental static regeneration.

A VPS will allow you to have complete control of that runtime. You choose your node version, where the application starts up, how you manage your logs, how you set up SSL, how much memory you give to your app, how much you respond to traffic, etc.

A VPS is a strong choice for:

• Small business websites built with Next.js
• Company landing pages with server-side forms
• Blogs and content websites using dynamic rendering
• Dashboards and admin panels
• SaaS applications
• Next.js apps connected to databases or APIs
• Websites using image optimization
• Projects that need custom Nginx rules
• Applications that require SSH access and full deployment control

With the right setup, a VPS can run a Next.js application reliably and securely.

Recommended Voxfor VPS Plans for Next.js Hosting

The best VPS plan depends on your Next.js project size, traffic, build process, and whether the app uses server-side rendering, API routes, image optimization, or background processes.

For a basic Next.js website, you do not need a very large server. However, it is important to remember that production builds can use more memory than normal runtime traffic. If your project has many pages, large dependencies, image processing, or dynamic rendering, you should choose a plan with enough RAM to build and run the app comfortably.

Here are practical Voxfor VPS plan suggestions:

Project Type	Suggested Voxfor VPS Plan	Best For
Testing, portfolio, small static-style website	NVMe 2 GB	Small personal sites, simple landing pages, low traffic
Standard business website	NVMe 4 GB	Company websites, blogs, brochure websites and small apps
Production Next.js app with SSR or API routes	NVMe 8 GB	Growing websites, dynamic content, dashboards and image optimization
High traffic or a heavier app	NVMe 12 GB or higher	SaaS apps, ecommerce-style projects, larger builds, higher traffic

A Voxfor NVMe 2 GB VPS can be enough for a small Next.js website, especially if most pages are static. For a serious production website, the NVMe 4 GB plan is a safer starting point because it gives more room for Node.js, Nginx, build processes, logs, and future growth. If your app uses heavy server-side rendering, large dependencies, image optimization, or regular production builds on the server, the NVMe 8 GB plan is a better long-term choice.

Voxfor VPS hosting also gives users operating system choices such as Ubuntu 24.04 and Ubuntu 22.04, which are both suitable for hosting a modern Next.js application. For this guide, we will use Ubuntu 24.04 because it is a modern and stable choice for Node.js deployments.

Basic Server Requirements

Before starting, you should have:

• A Voxfor VPS running Ubuntu 24.04 or Ubuntu 22.04
• Root or sudo SSH access
• A domain name pointed to your VPS IP address
• A Next.js project stored in a Git repository
• Basic knowledge of terminal commands
• A production environment file, if your app needs environment variables

Your domain should have DNS records pointing to your VPS. Usually, you need an A record for your main domain and another A record for the www version.

Example:

• example.com points to your VPS IP address
• www.example.com points to your VPS IP address

DNS changes can take some time to update, so it is better to configure your DNS before starting the deployment.

Step 1: Connect to Your VPS

After your Voxfor VPS is ready, connect to it using SSH.

ssh root@your_server_ip

Replace your_server_ip with your actual VPS IP address.

Once connected, update the system packages:

sudo apt update && sudo apt upgrade -y

This makes sure your server has the latest security patches and package updates.

Step 2: Create a New User for Deployment

Running everything as the root user is not recommended for daily server management. Create a new user for your application.

adduser deploy
usermod -aG sudo deploy

Now switch to the new user:

su - deploy

You can use this deploy user for installing your app, managing files, and running the production process.

Step 3: Secure SSH Access

For better security, use SSH keys instead of password-based login. On your local machine, generate an SSH key if you do not already have one:

ssh-keygen

Then copy your public key to the server:

ssh-copy-id deploy@your_server_ip

After confirming that key-based login works, you can disable root login and password authentication by editing the SSH configuration file:

sudo nano /etc/ssh/sshd_config

Recommended settings:

PermitRootLogin no
PasswordAuthentication no

Restart SSH:

sudo systemctl restart ssh

Keep your current SSH session open while testing a new login session. This helps you avoid locking yourself out of the server.

Step 4: Configure a Basic Firewall

Ubuntu includes UFW, a simple firewall tool. Allow SSH first:

sudo ufw allow OpenSSH

Then allow web traffic:

sudo ufw allow 'Nginx Full.'

Enable the firewall:

sudo ufw enable

Check the status:

sudo ufw status

Your server should allow SSH, HTTP, and HTTPS traffic.

Step 5: Install Node.js and npm

Next.js requires Node.js. A common method is to use NVM, which lets you install and switch between Node.js versions easily.

Install NVM:

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/master/install.sh | bash

Reload your shell:

source ~/.bashrc

Install the latest stable LTS version of Node.js:

nvm install --lts
nvm use --lts

Check the installed versions:

node -v
npm -v

Your server is now ready to run a Next.js application.

Step 6: Install Git

If Git is not installed already, install it:

sudo apt install git -y

Now, create a directory for your websites:

mkdir -p ~/apps
cd ~/apps

Clone your Next.js project:

git clone your_repository_url nextjs-site
cd nextjs-site

Replace your_repository_url with your actual Git repository URL.

Step 7: Install Project Dependencies

Inside your project folder, install dependencies:

npm install

For production deployments, many developers prefer:

npm ci

Use npm ci if your project has a reliable package-lock.json file. It installs exact dependency versions and is better for predictable production builds.

Step 8: Configure Environment Variables

Many Next.js projects use environment variables for API URLs, database credentials, authentication secrets, payment keys, or private tokens.

Create a production environment file:

nano .env.production

Example:

NODE_ENV=production
NEXT_PUBLIC_SITE_URL=https://example.com
API_SECRET_KEY=your_private_secret
DATABASE_URL=your_database_connection_string

Important: only variables starting with NEXT_PUBLIC_ are exposed to the browser. Private secrets should never use the NEXT_PUBLIC_ prefix.

After editing the file, save and Exit.

Step 9: Build the Next.js Application

Run the production build:

npm run build

If the build succeeds, you can test the app:

npm start

By default, Next.js usually runs on port 3000.

Open this in your browser:

http://your_server_ip:3000

If it loads, your Next.js application is running. However, this is not the final production setup. You should not expose the Node.js app directly to the internet. A better setup is to run the app locally on the server and place Nginx in front of it as a reverse proxy.

Stop the test process with:

CTRL + C

Step 10: Use PM2 to Keep the App Running

If you run npm start manually, the app stops when the terminal session closes. PM2 solves this problem by keeping your Node.js process alive in the background. It can restart the app if it crashes and restore it after a server reboot.

Install PM2 globally:

npm install pm2 -g

Start your Next.js app:

pm2 start npm --name "nextjs-site" -- start

Check the process:

pm2 status

Save the PM2 process list:

pm2 save

Enable startup on reboot:

pm2 startup

PM2 will show a command. Copy and run that command exactly as shown. Then run:

pm2 save

Useful PM2 commands:

pm2 logs nextjs-site
pm2 restart nextjs-site
pm2 stop nextjs-site
pm2 delete nextjs-site

Now your Next.js application can keep running even after you close SSH.

Step 11: Install and Configure Nginx

Nginx will receive public web traffic on ports 80 and 443, then forward requests to your Next.js app running locally on port 3000.

Install Nginx:

sudo apt install nginx -y

Create a new Nginx server block:

sudo nano /etc/nginx/sites-available/nextjs-site

Add this configuration:

server {
    listen 80;
    server_name example.com www.example.com;

    location / {
        proxy_pass http://127.0.0.1:3000;
        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_cache_bypass $http_upgrade;
    }
}

Replace example.com with your real domain.

Enable the configuration:

sudo ln -s /etc/nginx/sites-available/nextjs-site /etc/nginx/sites-enabled/

Test Nginx:

sudo nginx -t

If the test is successful, reload Nginx:

sudo systemctl reload nginx

Now visit your domain in the browser. Your Next.js website should load through Nginx.

Step 12: Install SSL Certificate

A production website should always use HTTPS. Install Certbot:

sudo apt install certbot python3-certbot-nginx -y

Request an SSL certificate:

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

Follow the prompts. Certbot will update your Nginx configuration automatically.

Test automatic renewal:

sudo certbot renew --dry-run

After SSL is installed, visit:

https://example.com

Your Next.js website should now be live with HTTPS.

Step 13: Deploy Future Updates

When you make changes to your Next.js project, deployment becomes simple.

SSH into your server:

ssh deploy@your_server_ip

Go to your project folder:

cd ~/apps/nextjs-site

Pull the latest code:

git pull

Install new dependencies if needed:

npm ci

Build the project:

npm run build

Restart the app:

pm2 restart nextjs-site

Your updated Next.js website is now live.

Optional: Use Standalone Output for Better Production Deployment

Next.js supports a standalone output mode that creates a smaller production folder with only the files needed to run the application. This is useful when you want a cleaner deployment and do not want to copy the full project with all development files.

Open your next.config.js file:

nano next.config.js

Add:

module.exports = {
  output: 'standalone',
}

Then run:

npm run build

Next.js will create a .next/standalone folder. This folder contains the production server and required dependencies. You may also need to copy the public folder and .next/static folder, depending on your setup.

For many beginners, the normal npm run build and npm start method is easier. For advanced deployments, standalone output can make your production setup more efficient.

Performance Tips for Hosting Next.js on a VPS

A VPS gives you control, but performance depends on correct configuration. Here are important tips.

1. Choose the Right VPS Size

A small static website can run on a smaller server, but a dynamic app needs more RAM and CPU. If your project builds slowly, crashes during build, or uses image optimization heavily, upgrade to a larger Voxfor VPS plan.

2. Keep Nginx in Front of Next.js

Nginx helps handle public traffic, SSL, headers, request forwarding, and basic connection handling. Your Next.js app should run behind Nginx instead of being exposed directly.

3. Use PM2 Logs

If something breaks, check logs first:

pm2 logs nextjs-site

Logs often reveal missing environment variables, dependency issues, build errors, or port conflicts.

4. Optimize Images

Next.js image optimization can work in self-hosted environments, but image-heavy websites need enough memory. Compress images before uploading them and avoid serving unnecessarily large files.

5. Use Production Environment Variables Correctly

Do not expose private secrets to the browser. Only use NEXT_PUBLIC_ for values that are safe for visitors to see.

6. Monitor Disk Space

Build files, logs, cache files, and uploads can consume disk space over time. Check disk usage:

df -h

You can also check the project folder size:

du -sh ~/apps/nextjs-site

7. Restart After Important Changes

After changing environment variables, dependencies, or production build files, rebuild and restart the app:

npm run build
pm2 restart nextjs-site

Common Problems and Fixes

Problem 1: Website Shows 502 Bad Gateway

This usually means Nginx is working, but your Next.js app is not running.

Check PM2:

pm2 status

Restart the app:

pm2 restart nextjs-site

Check logs:

pm2 logs nextjs-site

Problem 2: Port 3000 Already in Use

Another process may already be using port 3000.

Check active ports:

sudo lsof -i :3000

Stop the conflicting process or run your app on another port.

Problem 3: Environment Variables Are Not Updating

If you changed .env.production, rebuild and restart:

npm run build
pm2 restart nextjs-site

Some public environment variables are included during the build, so they will not update until you build again.

Problem 4: Build Fails Because of Low Memory

If your build process is killed or fails without a clear reason, the server may not have enough memory. You can add swap space as a temporary solution, but for a production website, upgrading to a larger Voxfor VPS plan is usually better.

Problem 5: Domain Not Opening

Check your DNS records, Nginx configuration, and firewall.

Test Nginx:

sudo nginx -t

Check firewall:

sudo ufw status

Make sure your domain points to the correct VPS IP address.

Security Checklist

Before considering your deployment complete, review this checklist:

• Use a non-root deployment user
• Use SSH keys instead of passwords
• Disable root SSH login
• Enable UFW firewall
• Allow only required ports
• Use HTTPS with SSL
• Keep Ubuntu packages updated
• Keep Node.js and dependencies updated
• Store secrets in environment files
• Do not commit .env.production to Git
• Use PM2 to manage the app process
• Keep regular backups of important files and databases

Voxfor VPS gives you the server foundation, but a secure configuration is still important. A properly configured VPS helps keep your Next.js website stable, protected, and ready for real visitors.

When Should You Upgrade Your VPS?

You should consider upgrading your Voxfor VPS when:

• Builds are failing due to memory limits
• The website becomes slow during traffic spikes
• PM2 frequently restarts the app
• Server CPU usage stays high
• Image optimization uses too much memory
• You are running additional services on the same VPS
• Your application has grown from a simple site into a larger platform

For small projects, starting with a lower plan is fine. For business websites and production apps, the Voxfor NVMe 4 GB or NVMe 8 GB plan is usually a better balance between performance and future growth.

Conclusion

Hosting a Next.js website on a VPS is a powerful option for developers, businesses, and agencies that want more control over their production environment. With a VPS, you can manage your Node.js version, configure Nginx, install SSL, control environment variables, monitor logs, run background processes, and scale your server as your project grows.

The basic production setup is straightforward: choose a suitable Voxfor VPS, install Node.js, clone your project, create environment variables, build the app, run it with PM2, place Nginx in front of it, and secure the domain with SSL.

For beginners, the standard npm run build and npm start deployment method is easy to understand. For more advanced users, Next.js standalone output can create a cleaner production deployment. Either way, the key is to use a reliable VPS, configure the server properly, and follow a repeatable deployment process.

If you are planning to host a Next.js website for a portfolio, business website, SaaS project, dashboard, or content platform, Voxfor VPS hosting gives you the flexibility to start small and upgrade as your application grows.

About the writer

Hassan Tahir wrote this article, drawing on his experience to clarify WordPress concepts and enhance developer understanding. Through his work, he aims to help both beginners and professionals refine their skills and tackle WordPress projects with greater confidence.