How to Host a Next.js App in Production on an Ubuntu VPS: A Step-by-Step Guide

In today’s fast-paced development ecosystem, Next.js has emerged as a powerful framework for building fast, SEO-optimized React applications. But deploying a Next.js app to production—especially on an Ubuntu VPS—can be challenging if you don’t know where to start. Learn how to host a Next.js app in production on an Ubuntu VPS. Follow this step-by-step guide to deploy, optimize, and secure your Next.js app with Nginx, PM2, and HTTPS.

This guide walks you through every step, from setting up your server to serving your app securely with HTTPS. Whether you’re a developer launching your first Next.js project or looking to scale efficiently on VPS infrastructure, this post will help you deploy like a pro. Let’s get started! 🚀

Why Use an Ubuntu VPS for Hosting?

Using an Ubuntu VPS (Virtual Private Server) provides you with full control over your server environment. This flexibility allows you to:

• Customize server configurations
• Install only what you need for your app to run
• Optimize performance by tuning resources
• Cut hosting costs compared to managed solutions like Vercel or Heroku

With that said, let’s dive into the practical steps for deploying your Next.js app on an Ubuntu VPS.

Also Read: Understanding Bit Flipping | Bit Manipulation Techniques

Step 1: Prerequisites for Hosting a Next.js App on Ubuntu VPS

Before diving into the setup, make sure you have the following:

• Ubuntu VPS with root access (Ubuntu 20.04 or 22.04 is recommended)
• A domain name pointing to your VPS’s IP address
• Basic familiarity with SSH and the Linux terminal
• Next.js app ready for deployment
• Node.js installed on your local machine for building your app

Step 2: Update Your Ubuntu VPS and Install Dependencies

First, SSH into your Ubuntu VPS using the terminal:

ssh root@your-server-ip

After logging in, update your packages:

sudo apt update && sudo apt upgrade -y

Next, install the essential dependencies:

sudo apt install nginx curl git -y

These tools will help us configure Nginx as a reverse proxy and manage our project files on the VPS.

Step 3: Install Node.js and PM2 for Process Management

To serve your Next.js app, you’ll need Node.js and PM2, a popular process manager that ensures your app stays online.

1. Install Node.js (LTS version) by running:

   curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash -
   sudo apt install nodejs -y

2. Confirm the installation:

   node -v
   npm -v

3. Install PM2 globally:

   sudo npm install -g pm2

PM2 will keep your application running in the background and automatically restart it in case of a crash or reboot.

Also Read: Understanding the Smaller or Equal Elements Problem | Binary Search Problem | Interview Bit

Step 4: Transfer Your Next.js App to the Server

You can push your code to GitHub or use SCP (Secure Copy Protocol) to upload the Next.js files directly to the VPS.

Using SCP:

scp -r /path/to/your/nextjs-app root@your-server-ip:/var/www/nextjs-app

Once transferred, navigate to your project directory on the server:

cd /var/www/nextjs-app

Step 5: Install Dependencies and Build Your Next.js App

Run the following commands inside your project directory:

1. Install dependencies:

   npm install

2. Build the app for production:

   npm run build

3. Start the app using PM2:

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

Check if the app is running:

pm2 status

Step 6: Set Up Nginx as a Reverse Proxy

Nginx will forward incoming HTTP requests to your Next.js app running on port 3000.

1. Create a new Nginx configuration file:

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

2. Add the following configuration:

   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;
       }
   }

3. Enable the configuration and restart Nginx:

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

Also Read: Java Program to Check if a Number is Positive or Negative: A Step-by-Step Guide

Step 7: Secure Your Next.js App with HTTPS Using Certbot

Use Let’s Encrypt to get a free SSL certificate.

1. Install Certbot:

   sudo apt install certbot python3-certbot-nginx -y

2. Obtain the SSL certificate:

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

3. Follow the on-screen instructions to complete the SSL installation. Certbot will automatically renew your certificates when they expire.

Step 8: Automate PM2 with Server Reboots

To ensure PM2 restarts your app after a server reboot, run:

pm2 startup
pm2 save

Step 9: Verify Everything is Working

You can now access your Next.js app by visiting http://your-domain.com or https://your-domain.com. Ensure everything works as expected, including the SSL configuration.

Performance Optimization Tips for Hosting Next.js on Ubuntu VPS

1. Enable Gzip Compression in Nginx:
   Add the following lines to your Nginx configuration to reduce response size:

   gzip on;
   gzip_types text/plain text/css application/json application/javascript;

2. Serve Static Files with Nginx:
   If your Next.js app serves static assets, let Nginx handle them efficiently:

   location /_next/static/ {
       alias /var/www/nextjs-app/.next/static/;
   }

3. Use a CDN for faster content delivery and load balancing.
4. Monitor Server Performance with tools like htop or Glances.
5. Set Up a Firewall:
   Use ufw to restrict access:

   sudo ufw allow 'Nginx Full'
   sudo ufw enable

FAQs

What is the difference between Vercel and hosting on a VPS?

Vercel is a managed platform for Next.js apps, whereas a VPS gives you full control over the server environment but requires more setup.

Why use PM2 for hosting a Next.js app?

PM2 keeps your app running continuously, automatically restarts it on crashes, and ensures it starts after server reboots.

Can I use Docker instead of PM2 for process management?

Yes, Docker is another option, offering containerized environments. However, PM2 is simpler for most small-to-medium projects.

How can I monitor my app’s performance?

Use PM2 monitoring tools or third-party services like New Relic or Datadog to track metrics.

Do I need to renew my SSL certificate manually?

No, Certbot will automatically renew your certificates. You can verify this with:

  sudo certbot renew --dry-run

Conclusion

Hosting a Next.js app in production on an Ubuntu VPS may seem daunting initially, but following this step-by-step guide will make the process straightforward. You now have your app running with Nginx as a reverse proxy, PM2 for process management, and HTTPS for secure communication.

With the flexibility of VPS hosting, you can fully control how your app is served, optimized, and scaled. Happy coding and good luck with your deployment! 🚀