Deploy Next.js to VPS: Step-by-Step Guide

Introduction

Next.js is a powerful React framework that provides server-side rendering (SSR), static site generation (SSG), (Learn More About SSG Vs SSR in NextJs) and API routes, making it ideal for building high-performance web applications. However, deploy Next.js app to VPS (Virtual Private Server) can seem complex if you're new to server management.

In this guide, we’ll walk you through the step-by-step process of deploy Next.js app to VPS, covering everything from setting up your server and installing dependencies to configuring Nginx and securing your app with SSL. Whether you’re using Hostinger, DigitalOcean, Linode, AWS, or any other VPS provider, this tutorial will help your Nextjs VPS deployment and ensure your Next.js application runs smoothly in a production environment.

By the end of this guide, you’ll have a fully functional Next.js app deployed on VPS, optimized for performance and security. Let's get started!

Choosing the Right VPS for Next.js

Before deploying your Next.js app on VPS, it’s important to choose the right Virtual Private Server (VPS) provider. A VPS gives you more control, flexibility, and better performance compared to shared hosting, making it an ideal choice for hosting production applications.

Key Factors to Consider When Choosing a VPS

Here are some important factors to consider when selecting a VPS for your Nextjs VPS deployment:

Server Performance (RAM & CPU)

• 2GB RAM & 1 vCPU: Suitable for small apps with low traffic.
• 4GB+ RAM & 2+ vCPU: Recommended for medium to high-traffic Next.js apps.
• More resources: Faster performance and better scalability.

Operating System (OS)

• Ubuntu (Recommended): Most tutorials and packages are optimized for Ubuntu (LTS versions). In this guide we'll using this.
• Debian: Lightweight and stable alternative to Ubuntu.
• CentOS/Rocky Linux: If you prefer an enterprise-grade OS.

Bandwidth & Network Speed

• Choose a VPS with unlimited bandwidth or at least 1TB per month to handle traffic efficiently.
• Look for a 1 Gbps network connection for better speed.

Best VPS Providers for Next.js Deployment

Here are some popular VPS providers that work well with Next.js applications:

• Hostinger: Affordable, easy-to-use, NVMe SSD, 24/7 support.
• DigitalOcean: Developer-friendly, cloud-based, scalable.
• Vultr: High-performance NVMe SSDs, multiple data centers.
• Linode: Reliable, offers managed services, good performance.
• AWS Lightsail: Cheap for small projects, AWS ecosystem integration.

Recommendation: If you're a beginner, Hostinger or DigitalOcean are great choices for an easy Nextjs VPS deployment.

Setting Up Your VPS (Server Configuration)

Once you’ve chosen the right VPS for Next.js, the next step is to set up and configure your server to host your application properly. This involves connecting to your VPS, installing necessary software, and securing your server.

Connect to Your VPS Using SSH

After purchasing a VPS, your hosting provider will give you SSH credentials (IP address, username, and password/private key).

Open Terminal and Connect via SSH

Open the terminal and use the following command:

1ssh root@your-server-ip    

Update and Secure Your Server

Before installing anything, update the system packages:

1sudo apt update && sudo apt upgrade -y

Install Essential Packages

1sudo apt install curl nano ufw unzip -y

• curl → Helps download files from the web.
• nano → Simple text editor for configuration files.
• ufw → Firewall for security.
• unzip → Extracts compressed files.

Set Up a Firewall (UFW) for Security

Enable UFW (Uncomplicated Firewall) to protect your VPS:

1sudo ufw allow OpenSSH
2sudo ufw allow 80/tcp  # Allow HTTP
3sudo ufw allow 443/tcp # Allow HTTPS
4sudo ufw enable

To check firewall status:

1sudo ufw status

Install Node.js and npm (Required for Next.js)

Next.js requires Node.js to run, so install it using Node Version Manager (NVM):

1curl -fsSL https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.4/install.sh | bash
2source ~/.bashrc
3nvm install --lts

Check installed versions:

1node -v
2npm -v

Install Git (For Deploying from GitHub/GitLab)

1sudo apt install git -y

Verify installation:

1git --version

This allows you to pull your Next.js project from GitHub.

Deploy Next.js App to VPS

Clone Your Next.js Project from GitHub

Navigate to the home directory and clone your repository:

1git clone https://github.com/yourusername/your-nextjs-project.git
2cd your-nextjs-project

If your project is private, use SSH authentication or GitHub tokens.

Install Dependencies and Build the Next.js App

Navigate to your project folder and install dependencies:

1npm install

Then, build your project:

1npm run build

To test if it works:

1npm start

If you see your app running, your Next.js app is successfully set up on VPS and if app is not running then check Firewall status and Ensure the necessary ports (such as 3000 for Next.js) are not blocked.

Setting Up a Process Manager (PM2) for Next.js

Now that your Next.js app is set up on VPS, the next step is to ensure it keeps running in the background, even after system reboots or crashes.

PM2 (Process Manager 2) is the best tool for this. It helps:

• Keep your Next.js app running 24/7.
• Automatically restart the app if it crashes.
• Monitor logs & performance easily.
• Run your app as a background service.

Start Your Next.js App with PM2

Navigate to your Next.js project directory:

1cd /home/nextjsuser/your-nextjs-project

Then start your app using PM2:

1pm2 start npm --name "nextjs-app" -- start

Explanation:

• pm2 start npm → Runs the npm start command.
• --name "nextjs-app" → Assigns a name to your process.
• -- start → Tells PM2 to run npm start.

To verify that your app is running in the background:

1pm2 list

If everything is set up correctly, you’ll see your app running.

Restart, Stop, and Manage Your Next.js App with PM2

Here are some useful PM2 commands to manage your Next.js app:

• pm2 list: Show all running processes.
• pm2 restart: nextjs-app Restart your Next.js app.
• pm2 stop: nextjs-app Stop your app.
• pm2 delete: nextjs-app Remove the app from PM2.
• pm2 logs nextjs-app: View live logs of your app.

Check Your App Running on VPS

By default, your Next.js app runs on port 3000. You can check it by visiting:

1http://your-server-ip:3000

If you see your Next.js app, PM2 is working perfectly!

Configuring Nginx for Next.js on VPS

To ensure optimal performance, security, and scalability, we’ll set up Nginx as a reverse proxy for your Next.js application. This allows Nginx to handle incoming HTTP requests and forward them to your Next.js app running on a specific port (like port 3000), making it easier to scale, secure, and serve your app to users. Additionally, Nginx can help with:

• Load balancing and caching.
• SSL configuration for HTTPS.
• Enhanced performance by handling static files.

Install Nginx on Your VPS

If you haven’t installed Nginx already, use the following commands:

1sudo apt update
2sudo apt install nginx -y
3sudo systemctl start nginx  
4sudo systemctl enable nginx  

Once installed, check if Nginx is running:

1sudo systemctl status nginx

You should see that Nginx is active and running.

Configure Nginx for Next.js

Now, we’ll create an Nginx configuration file to reverse proxy requests to your Next.js app running on port 3000.

Step 1: Create a New Nginx Configuration File

Navigate to the /etc/nginx/sites-available/ directory:

1cd /etc/nginx/sites-available/

Create a new configuration file, e.g., nextjs-app:

1sudo nano nextjs-app

Step 2: Add the Reverse Proxy Configuration

In the configuration file, add the following settings:

1server {
2  listen 80;
3  server_name your-domain.com;  # Replace with your domain
4
5  location / {
6      proxy_pass http://localhost:3000;  # Port where Next.js is running
7      proxy_http_version 1.1;
8      proxy_set_header Upgrade $http_upgrade;
9      proxy_set_header Connection 'upgrade';
10      proxy_set_header Host $host;
11      proxy_cache_bypass $http_upgrade;
12  }
13}

• listen 80;: Makes the server listen on port 80 (HTTP).
• server_name your-domain.com;: Replace this with your domain or public IP if you don’t have a domain yet.
• proxy_pass http://localhost:3000;: Directs traffic to your Next.js app running on port 3000.

Step 3: Enable the New Configuration

Create a symbolic link to the sites-enabled directory to enable the configuration:

1sudo ln -s /etc/nginx/sites-available/nextjs-app /etc/nginx/sites-enabled/

Step 4: Test and Restart Nginx

Before restarting, it’s essential to check the Nginx configuration for errors:

1sudo nginx -t

If you see syntax is okay and test is successful, restart Nginx to apply the changes:

1sudo systemctl restart nginx

Set Up SSL (HTTPS)

It’s important to secure your app with HTTPS. We’ll use Let’s Encrypt to get a free SSL certificate.

Step 1: Install Certbot and Nginx Plugin

1sudo apt install certbot python3-certbot-nginx -y

Step 2: Obtain and Install SSL Certificate

Run the following command to automatically obtain and configure SSL:

1sudo certbot --nginx -d your-domain.com

• Replace your-domain.com with your actual domain. (SSL only available in domain name not an ip address)
• Certbot will automatically modify your Nginx configuration to redirect HTTP traffic to HTTPS.

Testing Nginx Configuration

At this point, your Next.js app should be running through Nginx. Test the following:

1. HTTP Test: Open a browser and go to your domain or public IP (e.g., http://your-domain.com). You should see your Next.js app.
2. HTTPS Test: Visit https://your-domain.com to ensure that SSL is working and the site is served securely.

Now you have completed Next.js Nginx Configuration.

Common Issues when Deploy Next.js app to VPS

When deploy Next.js app to VPS, you might encounter a few common issues. Here are some of the most frequent ones and how to solve them:

1. Nginx Not Serving the App Properly

   Problem:

   Your Next.js app is not accessible via Nginx (e.g., your-domain.com returns a 502 or 404 error).

   Solution:

   • Check Nginx Configuration: Ensure that the server_name is correctly set to your domain or IP address in the Nginx configuration file.

     run:

     sh

     1sudo nano /etc/nginx/sites-available/nextjs-app

     Ensure the server_name is correctly specified:

     sh

     1server_name your-domain.com;

   • Verify the Reverse Proxy Settings: The proxy_pass should be pointing to http://localhost:3000 (or the port your Next.js app is running on).

     sh

     1location / {
     2    proxy_pass http://localhost:3000;
     3    # Other proxy settings
     4}
     5

   • Restart Nginx: If you've made any changes to Nginx configuration, restart the service:

     sh

     1sudo systemctl restart nginx

2. Application Crashes or High Memory Usage

   Problem:

   Your Next.js app is using too much memory or CPU resources, causing crashes.

   Solution:

   • Monitor App Performance with PM2: Use PM2 to monitor the resource usage of your app:

     sh

     1pm2 monit

     This will show memory and CPU usage for all running processes.

   • Increase VPS Resources: If your app is running out of memory, consider upgrading your VPS (increase RAM and CPU).

   • Optimize Your Next.js App: Disable unnecessary features or code splitting for a more lightweight app. Use server-side rendering (SSR) or static generation (SSG) wisely to reduce load on the server. (Learn More About SSG Vs SSR in NextJs)

3. 502 Bad Gateway Error

   Problem:

   You see a 502 Bad Gateway error when accessing your app.

   Solution:

   • Check if Next.js is Running: Ensure your Next.js app is running and listening on the correct port:

     sh

     1pm2 list

   • Check Nginx Configuration: Make sure your proxy_pass is pointing to the correct port (localhost:3000):

     sh

     1location / {
     2        proxy_pass http://localhost:3000;
     3        # Other proxy settings
     4    }
     5    

   • Restart Nginx and PM2: After checking the configuration, restart both Nginx and PM2:

     sh

     1sudo systemctl restart nginx
     2    pm2 restart nextjs-app

Troubleshooting issues during Nextjs VPS deployment can be challenging, but with the right steps, you can quickly identify and resolve problems. Always ensure that your configurations are correct, monitor your app’s performance, and test everything after making changes.

Frequently Asked Questions

• Q: Can I deploy Next.js on a $2/month VPS?

  A: While it's technically possible to deploy a basic Next.js app on a $2/month VPS, it’s not ideal for production use, especially if you expect high traffic. A $2 VPS typically has limited resources (like CPU and RAM), which may result in slow performance or frequent crashes. For production deployment, consider upgrading to a VPS with more resources for a better user experience and reliability.

• Q: Is VPS better than Vercel for Next.js?

  A: It depends on your needs. Vercel is a Platform-as-a-Service (PaaS) optimized for Next.js, offering easy deployment, built-in CDN, and automatic scaling. However, it may be more expensive for larger apps. A VPS provides more control, flexibility, and the ability to host multiple apps, but requires more management (security, scaling, etc.). For smaller projects or for those just starting out, Vercel might be a better choice. For more control and scalability, a VPS is often the better option.

• Q: Can I host multiple Next.js apps on one VPS?

  A: Yes, you can host multiple Next.js apps on a single VPS. You’ll need to configure each app to run on a different port (e.g., http://localhost:3000, http://localhost:3001, etc.) and set up a reverse proxy (using Nginx) to route traffic to the correct app based on the domain or path. You can also manage each app using a process manager like PM2 to keep everything running smoothly.

• Q: Does Next.js work with Apache instead of Nginx?

  A: Yes, Next.js can work with Apache as a reverse proxy instead of Nginx, but Nginx is generally preferred due to better performance, ease of use, and optimized support for modern web apps. If you choose Apache, you’ll need to set up a similar reverse proxy configuration to route traffic from Apache to your Next.js app running on a specific port (like port 3000).

Conclusion

Deploy Nextjs app to VPS gives you full control over your app’s performance, security, and scaling, making it an ideal solution for developers who need flexibility. In this guide, we've covered everything from choosing the right VPS for nextjs and setting up your server to configuring Nginx as a reverse proxy and troubleshooting common issues in Nextjs VPS deployment. With proper setup and maintenance, your Next.js app can run smoothly and efficiently on a VPS.

Remember to always monitor your app, configure it securely, and optimize it for performance. Whether you’re running a small project or a large-scale application, a VPS provides the control and resources needed to ensure your Next.js app performs well in production.

If you found this article helpful, feel free to share it with others who may benefit from it!

Share this article