Deployment

Deployment Guide — Velat

This document covers everything from creating a GitHub account to deploying your site on seven different platforms.

Before you start: The steps in this guide assume you already have the project running locally. If not, go back to the Installation guide first.

Part 1: Set Up GitHub

GitHub is where your code lives online. Most deployment platforms pull code directly from GitHub.

Step 1: Create a GitHub account

1. Open https://github.com in your browser

2. Click Sign up in the top right

3. Enter your email, create a password, pick a username

4. Verify your email

5. Skip the paid plans — the Free plan is enough

Step 2: Install Git on your computer

Git is the tool that pushes your code to GitHub.

Windows:

1. Download from https://git-scm.com/download/win

2. Run the installer

3. Click Next through every screen (defaults are fine)

4. Click Install

macOS:

1. Open Terminal

2. Type git --version and press Enter

3. macOS prompts you to install Git if it's missing — click Install

Verify:

git --version

You should see something like git version 2.43.0.

Step 3: Create a new repository on GitHub

1. Log in to GitHub

2. Click the + icon in the top right → New repository

3. Fill in:

• ―Repository name: velat (or any name you like)
• ―Description: optional
• ―Visibility: Public or Private (your choice)
• ―Do NOT check "Add a README file" — you already have files locally

4. Click Create repository

GitHub shows you a page with commands. Leave this page open — you'll need the URL.

Step 4: Push your local project to GitHub

Open a terminal inside your project folder.

If you're on Windows: Open File Explorer, navigate to the project folder, click the address bar, type cmd, press Enter.

If you're on macOS: Right-click the project folder in Finder → New Terminal at Folder.

Run these commands one at a time :

git init

git add .

git commit -m "Initial commit"

git branch -M main

git remote add origin https://github.com/YOUR-USERNAME/YOUR-REPO.git

Replace YOUR-USERNAME and YOUR-REPO with your actual GitHub username and repository name.

git push -u origin main

GitHub may ask you to sign in. Use your GitHub account. If it asks for a password, use a Personal Access Token, not your account password (GitHub removed password auth for Git in 2021).

To create a Personal Access Token:

1. GitHub → click your avatar → Settings

2. Scroll down → Developer settings

3. Personal access tokens → Tokens (classic)

4. Generate new token (classic)

5. Give it a name, check repo scope, click Generate

6. Copy the token — use it as your password when Git asks

Step 5: Verify

Refresh your GitHub repository page. All your project files should be there .

Part 2: Deploy to Vercel

Vercel is built by the creators of Next.js. It's the most natural fit and the easiest to set up.

Why Vercel

• ―Zero configuration for Next.js
• ―Automatic SSR, ISR, and image optimization
• ―Free tier is generous for personal projects
• ―Preview deployments on every pull request

Steps

1. Go to https://vercel.com

2. Click Sign Up → choose Continue with GitHub

3. Authorize Vercel to access your GitHub account

4. Click Add New → Project

5. Find your velat repository in the list → click Import

6. Vercel auto-detects Next.js. Leave all settings as default

7. Click Deploy

Wait 1–2 minutes. Vercel gives you a live URL like velat.vercel.app.

Custom domain (optional)

1. In your Vercel project → Settings → Domains

2. Add your domain

3. Follow the DNS instructions Vercel gives you

4. Wait for DNS propagation (usually under an hour)

Environment variables

If you use .env.local for secrets:

1. Vercel project → Settings → Environment Variables

2. Add each key and value

3. Redeploy — Vercel doesn't apply env changes retroactively

Part 3: Deploy to Netlify

Netlify is another popular platform with strong Next.js support via the OpenNext adapter.

Steps

1. Go to https://netlify.com

2. Click Sign up → GitHub

3. Authorize Netlify

4. Click Add new site → Import an existing project

5. Choose GitHub → select your velat repository

6. Netlify auto-detects Next.js. Leave defaults:

• ―Build command: next build
• ―Publish directory: .next

7. Click Deploy site

Netlify automatically installs @netlify/plugin-nextjs for Next.js 13.5+ . You don't need to configure anything.

Notes

• ―Don't pin the adapter version — Netlify updates it automatically for compatibility
• ―Full support for App Router, Server Components, ISR, and image optimization

Part 4: Deploy to Cloudflare Pages

Cloudflare Pages is fast and has a generous free tier. Important: Cloudflare supports two deployment modes for Next.js.

Which mode to use

Full-stack (SSR) setup

1. Install the adapter:

npm install -D @cloudflare/next-on-pages

2. Add a wrangler.toml in your project root:

name = "velat"
compatibility_date = "2024-09-23"
compatibility_flags = ["nodejs_compat"]
pages_build_output_dir = ".vercel/output/static"

3. Ensure all server-rendered routes use the Edge Runtime. Add this to each route that uses SSR:

export const runtime = "edge";

4. Update package.json scripts:

"scripts": {
  "pages:build": "npx @cloudflare/next-on-pages",
  "preview": "npx @cloudflare/next-on-pages --watch",
  "deploy": "npx wrangler pages deploy .vercel/output/static"
}

5. Push to GitHub:

git add .
git commit -m "Add Cloudflare config"
git push

6. Go to Cloudflare Dashboard → Workers & Pages → Create application → Pages → Connect to Git

7. Select your repository

8. Framework preset: Next.js

9. Build command: npx @cloudflare/next-on-pages

10. Build output directory: .vercel/output/static

11. Before deploying, go to Settings → Functions → Compatibility Flags

12. Add nodejs_compat for both Production and Preview

13. Set Compatibility Date to 2022-11-30 or later

14. Click Save and Deploy

Static export (simpler alternative)

If your site is purely static (no SSR, no API routes):

1. Add output: 'export' to next.config.js:

const nextConfig = {
  output: "export",
  images: { unoptimized: true },
};

2. Run npm run build — this generates an out/ folder

3. In Cloudflare Pages, set build command to npx next build and output directory to out

Part 5: Deploy to Firebase Hosting

Firebase Hosting supports Next.js through the Firebase CLI.

Prerequisites

• ―Firebase CLI version 12.1.0 or later
• ―A Firebase project (create at https://console.firebase.google.com)
• ―Billing enabled if you plan to use SSR

Steps

1. Install the Firebase CLI:

npm install -g firebase-tools

2. Log in:

firebase login

3. Enable the web frameworks experiment:

firebase experiments:enable webframeworks

4. Initialize Hosting:

firebase init hosting

Choose:

• ―Use an existing project → select your Firebase project
• ―Use a web framework for dynamic hosting → Next.js
• ―Firebase detects Next.js and configures everything

5. Deploy:

firebase deploy

Firebase CLI detects getStaticProps, getStaticPaths, and getServerSideProps automatically .

What happens under the hood

• ―Static content → served directly
• ―SSR and API routes → deployed to Cloud Functions for Firebase
• ―Image optimization → creates a Cloud Function

Part 6: Deploy to AWS Amplify

AWS Amplify Hosting supports Next.js with automatic builds from Git.

Steps

1. Go to AWS Amplify Console: https://console.aws.amazon.com/amplify

2. Click Deploy an app

3. Choose GitHub → Continue

4. Authorize AWS Amplify to access your GitHub account

5. Select your repository and branch (main)

6. Amplify auto-detects Next.js. Build settings:

• ―Build command: npm run build
• ―Output directory: .next

7. Click Save and deploy

Notes

• ―Amplify uses the GitHub Apps feature for authorization, not stored tokens
• ―Custom domains are supported through the Amplify console
• ―You can disable automatic builds per branch if you prefer manual deploys

Part 7: Deploy to cPanel / Shared Hosting

This is the most limited option. Shared hosting wasn't designed for Next.js, but it's possible if you're careful.

First: Static or SSR?

Option A: Static export (recommended for shared hosting)

1. Add to next.config.js:

const nextConfig = {
  output: "export",
  images: { unoptimized: true },
};

2. Build locally:

npm run build

3. This generates an out/ folder. Upload the contents of out/ to public_html/ via cPanel File Manager

Option B: Node.js app (for SSR)

Step 1: Build locally

npm run build

Step 2: Create a custom server file

Passenger expects a Node entry file. Create server.js in your project root:

const { createServer } = require("http");
const { parse } = require("url");
const next = require("next");

const dev = process.env.NODE_ENV !== "production";
const app = next({ dev });
const handle = app.getRequestHandler();

app.prepare().then(() => {
  createServer((req, res) => {
    const parsedUrl = parse(req.url, true);
    handle(req, res, parsedUrl);
  }).listen(process.env.PORT || 3000, (err) => {
    if (err) throw err;
    console.log("> Ready on port " + (process.env.PORT || 3000));
  });
});

Update package.json:

"start": "NODE_ENV=production node server.js"

Step 3: Upload files

Via File Manager, upload to your application root (a folder outside public_html):

• ―.next/ folder
• ―public/ folder
• ―package.json
• ―package-lock.json
• ―server.js

Do NOT upload `node_modules/` — install on the server instead .

Step 4: Configure in cPanel

1. cPanel → Software → Setup Node.js App → Create Application

2. Node.js version: match your local version

3. Application mode: Production

4. Application root: your folder name

5. Application URL: your domain

6. Startup file: server.js

7. Click Create

8. Click Run NPM Install

9. Add environment variables → Save → Restart

Important warning

next/image optimization is CPU-intensive and often crashes on shared hosting . Add this to next.config.js:

images: { unoptimized: true }

Part 8: Deploy to a VPS

A VPS gives you full control. You need a running Node.js process (for SSR) or just Nginx (for static).

Prerequisites

• ―A VPS with Ubuntu 22.04 or similar
• ―A domain name pointed to your server's IP
• ―Basic SSH knowledge

Step 1: Install Node.js

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
export NVM_DIR="$HOME/.nvm"
source "$NVM_DIR/nvm.sh"
nvm install 20
nvm use 20
nvm alias default 20

Step 2: Install PM2 and Nginx

npm install -g pm2
sudo apt update && sudo apt install -y nginx

Step 3: Clone and build

git clone https://github.com/YOUR-USERNAME/YOUR-REPO.git
cd YOUR-REPO
npm install
npm run build

Step 4: Start with PM2

pm2 start npm --name "velat" -- start
pm2 startup
pm2 save

Step 5: Configure Nginx

Create /etc/nginx/sites-available/velat:

server {
    listen 80;
    server_name yourdomain.com www.yourdomain.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;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

Enable and restart:

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

Step 6: SSL with Let's Encrypt

sudo apt install certbot python3-certbot-nginx
sudo certbot --nginx -d yourdomain.com -d www.yourdomain.com

Static export alternative

If your site is purely static, skip PM2. Just point Nginx at the out/ folder:

server {
    listen 80;
    server_name yourdomain.com;
    root /var/www/velat/out;
    index index.html;
}

Summary: Which Platform Should You Choose?

If you're unsure, use Vercel. It's the most natural fit for Next.js and the easiest to get running.