Installation Guide

This guide will help you install the Next.js React Frontend on cPanel Shared Hosting and VPS (Ubuntu/Debian based).

VPS Installation #

Requirements

Node.js >=18

npm or yarn

Hosting with SSH access (for VPS)

cPanel with Terminal Access (for shared hosting)

Your API URL (Laravel or any backend)

Connect to Your Server 01:

ssh username@your_server_ip

Install Node.js & Yarn 01:

curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
sudo apt install -y nodejs
npm install --global yarn

Upload Project 03:

You can use scp or any SFTP client (e.g. FileZilla):

scp -r /local/path-to-project username@your_server_ip:/var/www/your-project

Set Environment Variables 04:

cp .env.local.example .env.local
nano .env.local

Update the following:

NEXT_PUBLIC_REST_API_ENDPOINT=https://your-api.com/api/
NEXT_PUBLIC_WEBSITE_URL=https://your-frontend.com

Install Dependencies 05:

cd /var/www/your-project
yarn install

Build Project 06:

yarn build

Run Project with PM2 (recommended) 07:

npm install -g pm2
pm2 start npm --name="nextjs-site" -- start
pm2 save
pm2 startup

Run Project with PM2 (recommended) 07:

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

Then restart Nginx:

sudo service nginx restart

Helpful Commands #

📁 cPanel Shared Hosting Installation #

⚠️ Shared hosting does not support dynamic Next.js routing. You must export the app as static.

Build Static Version 01: #

📄

filename.js

yarn build
yarn export

This will create an /out folder.

Upload to public_html 02: #

Zip the out folder

Upload to public_html via File Manager

Extract the folder and move all contents to public_html/

Update .env for Static Hosting (Optional) 02: #

If using static content, some features (like login, chat, SSR) may not work. Adjust accordingly.

Test Your Site: #

Visit your domain: https://yourdomain.com

If you see the homepage, installation is complete.

Local Installation #

Install Dependencies 01: #

Install Dependencies 01: #

npm install

or

yarn install

Set Up Environment Variables 02: #

cp .env.local.example .env.local

Open .env.local and configure:

NEXT_PUBLIC_REST_API_ENDPOINT=http://localhost:8000/api/
NEXT_PUBLIC_WEBSITE_URL=http://localhost:3000
NEXTAUTH_SECRET=your_random_secret_key
NEXT_PUBLIC_IMAGE_HOST=your-api.com
NEXT_PUBLIC_FIREBASE_API_KEY=your_key

Run in Development Mode 03: #

npm run dev
# or
yarn dev

The project will run at:
📍 http://localhost:3000