Complete Guide to Setting Up a VPS with Next.js on Hostinger

Deploying a Next.js project on a Hostinger VPS might seem like a challenge, but with this detailed guide you'll get it done quickly and efficiently. Whether your domain is configured on Hostinger or pointing to your VPS IP from an external provider, here I'll show you how to do it step by step.

Note: Use the referral code 1EDUARDO804 to get a 20% discount on Hostinger.

##1. Initial VPS Setup on Hostinger

Follow these steps to configure your VPS:

1. Purchase your VPS on Hostinger and select Ubuntu as the operating system.
2. Create a strong password for your VPS and save both the hostname and your SSH key. Copy your SSH key locally with:

pbcopy < ~/.ssh/id_rsa.pub

3. Copy your VPS IP address to connect in the following steps.

##2. SSH Connection and Server Update

Connect to your VPS using SSH and make sure to update the system to keep it secure and efficient:

ssh usuario@123.123.123.123
sudo apt update && sudo apt upgrade

Check if git is installed:

git --version

If it isn't, install it with:

sudo apt install git

##3. Cloning Your Next.js Project

Clone your project from GitHub (remember you'll need a personal access token):

git clone https://github.com/tu_usuario/tu_proyecto.git
cd tu_proyecto

##4. Installing NVM and Node.js

Use NVM (Node Version Manager) to install the LTS version of Node.js:

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash
source ~/.bashrc
nvm install --lts

##5. Installing Packages and Running the Project

Inside your project directory, install the dependencies:

npm install

Run the project in development or production mode:

npm run dev  # Modo desarrollo
npm run build && npm start  # Modo producción

##6. Setting Up PM2 for Production

PM2 ensures your application stays running even after a server restart:

npm install -g pm2
pm2 start npm -- start
pm2 list  # Verifica que tu aplicación esté en ejecución

##7. Installing and Configuring Nginx

Nginx acts as a reverse proxy to direct HTTP requests to your Next.js application:

sudo apt install nginx

Create a configuration file for your domain at /etc/nginx/sites-available/yourdomain:

sudo nano /etc/nginx/sites-available/tudominio

Add the following configuration:

server {
    listen 80;
    listen [::]:80;
    server_name tudominio.com www.tudominio.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;
    }
}

Create a symbolic link and restart Nginx:

sudo ln -s /etc/nginx/sites-available/tudominio /etc/nginx/sites-enabled/
sudo nginx -t  # Verifica la configuración
sudo service nginx restart

##8. Installing SSL Certificates with Certbot

Secure your site with Certbot:

Install snapd if you don't have it:

sudo apt install snapd

Install Certbot:

sudo snap install --classic certbot
sudo ln -s /snap/bin/certbot /usr/bin/certbot

Generate the SSL certificates:

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

Enter an email address to receive notifications about certificate renewal.

##9. Updating the Project

When you need to update your project:

pm2 stop npm
git pull origin main  # O la rama que uses
npm install
npm run build
pm2 start npm -- start

Remember you can use the referral code 1EDUARDO804 to get a 20% discount on Hostinger.

Congratulations, your Next.js project is now deployed on your Hostinger VPS!