VPS Installation

Next.js Docs Template Installation Guide

Prerequisites

Before you begin, ensure you have the following installed on your VPS:

Node.js: Make sure you have Node.js version 18 or higher installed. It is recommended to use Node.js version 21 for stability.
Nginx: Install Nginx to use as a reverse proxy server.
PM2: Install PM2 to manage your Next.js application process and keep it running 24/7.
Next.js: The application is built with Next.js, so you’ll need it installed.

Install Required Packages

Run the following commands to install everything:

# Update system
sudo apt update && sudo apt upgrade -y

# Install Node.js (LTS or latest stable version)
curl -fsSL https://deb.nodesource.com/setup_21.x | sudo -E bash -
sudo apt install -y nodejs

# Install Nginx
sudo apt install -y nginx

# Install PM2
yarn global add pm2 # or use: sudo npm install -g pm2

# Install Next.js globally
npm install -g next

Step 1: Download and Set Up the Application

Download the Application:
- Go to the Next.js Docs Template download page.
- Choose the version you want to download and click the download button. It is recommended to always download the latest version for stability.
Upload the Application:
- Log in to your VPS using an SCP client like WinSCP or any other provider.
- Navigate to the folder where you want to place the application, for example, /var/www.
- Upload the downloaded zip file to this folder and unzip it.
Navigate to the Application Directory:
- Open your terminal and navigate to the directory where the application is uploaded:
  Terminal window
```
cd /yourpath
```
Install Dependencies and Build the Application:
- Run the following commands:
  Terminal window
```
npm install
npm run build
```

Step 2: Configure Nginx as a Reverse Proxy

Without SSL

Edit the Nginx Configuration File:

Open the config file using Nano:

sudo nano /etc/nginx/sites-available/docs.conf

Add the following configuration:

server {
    listen 80;
    server_name your-domain.com; # Replace with your actual domain name

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

    location /_next/static/ {
        alias /yourpath/out/_next/static/;
        expires 1y;
        access_log off;
    }

    location /static/ {
        alias /yourpath/out/static/;
        expires 1y;
        access_log off;
    }
}

Enable the Configuration:

sudo ln -s /etc/nginx/sites-available/docs.conf /etc/nginx/sites-enabled/

Restart Nginx:
Terminal window
```
sudo systemctl restart nginx
```

With SSL

Install Certbot:

sudo apt install certbot python3-certbot-nginx

Obtain an SSL Certificate:
Terminal window
```
sudo certbot --nginx -d your-domain.com
```

Verify and Adjust Nginx Config (if needed): Certbot modifies your config. Ensure it looks like this:

server {
    listen 80;
    server_name your-domain.com;
    return 301 https://$host$request_uri;
}

server {
    listen 443 ssl;
    server_name your-domain.com;

    ssl_certificate /etc/letsencrypt/live/your-domain.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/your-domain.com/privkey.pem;
    include /etc/letsencrypt/options-ssl-nginx.conf;
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem;

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

    location /_next/static/ {
        alias /yourpath/out/_next/static/;
        expires 1y;
        access_log off;
    }

    location /static/ {
        alias /yourpath/out/static/;
        expires 1y;
        access_log off;
    }
}

Restart Nginx:
Terminal window
```
sudo systemctl restart nginx
```

Step 3: Manage the Application with PM2

Start the Application:

pm2 start npm --name 'docs' -- run start

Autostart on Reboot:
Terminal window
```
pm2 save
pm2 startup
```

Step 4: Verify the Installation

Check Application Status:
Terminal window
```
pm2 status
```
Access the Application:
- Visit http://your-domain.com or https://your-domain.com depending on your setup.

Additional Resources

For more information on deploying Next.js apps with Nginx and PM2, check out this guide.