Vercel’s Costing Sucks: How to Deploy Your Next.js App on Hostinger VPS | Guide

Vercel’s pricing can be frustrating. Learn how to deploy your Next.js app on Hostinger VPS for better performance and lower costs.

Deploying a Next.js application on a Hostinger VPS hosting setup can be a seamless process if done methodically. Here’s a step-by-step guide to help you deploy your app effectively:

Prerequisites

Before starting, ensure you have:

• A VPS hosting plan from Hostinger.
• A domain name connected to your VPS (optional but recommended).
• A basic understanding of Linux commands and SSH.
• Your Next.js app ready for deployment.
• A local terminal or SSH client like PuTTY.

Step 1: Connect to Your VPS via SSH

1. Log in to Hostinger Go to your Hostinger dashboard and navigate to your VPS hosting service.
2. Get Your VPS Details
3. Connect Using SSH Open your terminal or SSH client and run:

ssh root@<your-vps-ip>

Replace <your-vps-ip> with your VPS’s IP address. Enter your password when prompted.

Step 2: Update and Prepare Your VPS

1. Update System Packages Run the following commands to update your server:

apt update && apt upgrade -y

Install Required Tools or Use Hostingers VPS Pre templates like (Nodejs)

Ensure you have curl and wget:

apt install curl wget -y

Step 3: Install Node.js and npm

1. Install Node.js via NodeSource Fetch the latest stable version:

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

Verify installation:

node -v
npm -v

Install pm2 To manage your app:

npm install -g pm2

Step 4: Prepare Your Next.js App for Deployment

1. Build Your Application On your local machine, build your Next.js app:

npm run build

Ensure the app works locally before proceeding.

Transfer Files to VPS :

Use scp to upload your app to the VPS:

scp -r /path/to/your/app root@<your-vps-ip>:/var/www/your-app

Navigate to App Directory

SSH into your VPS and move to your app directory:

cd /var/www/your-app

Install Dependencies

Run:

npm install

Step 5: Run Your Next.js App

Start the App Use pm2 to start your app:

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

Set Up Auto Start on Reboot

Save the pm2 process:

pm2 save
pm2 startup

Step 6: Configure a Reverse Proxy Using Nginx

Install Nginx

Run:

apt install nginx -y

Configure Nginx for Your App

Buy me a Book📙

Open the Nginx config file:

nano /etc/nginx/sites-available/nextjs

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

Enable the Configuration

Link the file to sites-enabled:

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

Restart Nginx

Apply changes:

systemctl restart nginx

Congratulations🎉 your Nextjs Web app is now live, You can check by visiting your domain name or your machine IP address

Step 7: (Optional): Secure Your App with SSL

Install Certbot

Run

apt install certbot python3-certbot-nginx -y

Get an SSL Certificate

Execute:

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

Auto-Renew SSL

Add to crontab:

crontab -e

Add the line:

0 3 * * * certbot renew --quiet

Step 8: Test Your Application

Access the App Open your browser and visit:

http://your-domain.com

Check Logs

Use pm2 logs to check for errors:

pm2 logs

Conclusion

Following this detailed guide, you’ve successfully deployed your Next.js app on Hostinger’s VPS hosting. With Nginx as a reverse proxy and SSL for security, your app is live and ready to serve users globally.

I hope this article was helpful to you😊

Buy me a Book📙