Free tutorials & notes in Hindi & English · Clean code examples 🧰 Free PDF & Image Tools →
🚀 SEO, Performance & Deploy  ·  Lesson 30

Deploy Next.js (Vercel, VPS, Static)

Choose a deployment option

OptionCostAll features?Best for
VercelFree (hobby) / paid✅ YesFastest start, previews per Git push
VPS (Hostinger VPS, DigitalOcean…)₹400+/month✅ Yes + your own MySQLFull control, Indian region
Node.js hosting (Hostinger Node.js apps, Render, Railway)Varies✅ YesManaged Node without server admin
Static export on shared hostingYour existing plan⚠️ No server featuresBrochure sites, blogs

Production build locally

Terminal
# set the real domain first (used by sitemap, canonical, OG)
echo "SITE_URL=https://edusite.in" > .env.production.local

npm ci                 # clean install from package-lock.json
npm run build          # creates the optimized .next folder
npm run start          # serves it on http://localhost:3000
source codeapp/, components/npm run buildcompile + prerender.next/optimized outputnpm run startproduction server
What "build" means

Option 1: Vercel (easiest)

Terminal – push the project to GitHub
git init
git add .
git commit -m "EduSite first version"
git branch -M main
git remote add origin https://github.com/your-name/edusite.git
git push -u origin main
  1. 1vercel.com → Sign up with GitHub
  2. 2Add New → Project → import the edusite repository
  3. 3Environment Variables → add SITE_URL (and DB/secret keys)
  4. 4Deploy → you get edusite.vercel.app in about a minute
  5. 5Settings → Domains → add edusite.in and set the DNS records shown
Every git push now deploys automatically

Option 2: VPS with PM2 + Nginx

Visitorhttps://edusite.inNginx :443SSL, gzip, reverse proxyPM2keeps next start alive, restarts on crashNext.js :3000your appMySQLsame server
Typical VPS setup
Terminal – server setup
# On a fresh Ubuntu VPS (as a sudo user)
curl -fsSL https://deb.nodesource.com/setup_22.x | sudo -E bash -
sudo apt install -y nodejs nginx git
sudo npm install -g pm2

git clone https://github.com/your-name/edusite.git
cd edusite
echo "SITE_URL=https://edusite.in" > .env.production.local
npm ci && npm run build

pm2 start npm --name edusite -- start     # runs "next start" on port 3000
pm2 save && pm2 startup                   # restart automatically after reboot
Nginx – reverse proxy
# /etc/nginx/sites-available/edusite
server {
    listen 80;
    server_name edusite.in www.edusite.in;

    location / {
        proxy_pass http://127.0.0.1:3000;
        proxy_http_version 1.1;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
    }
}

# enable it
sudo ln -s /etc/nginx/sites-available/edusite /etc/nginx/sites-enabled/
sudo nginx -t && sudo systemctl reload nginx

Free SSL with Certbot

Terminal
sudo apt install -y certbot python3-certbot-nginx
sudo certbot --nginx -d edusite.in -d www.edusite.in
# certificates renew automatically (check: sudo certbot renew --dry-run)

Point your domain's A record to the VPS IP address first (in your domain registrar's DNS panel), then run Certbot.

Option 3: Static export for shared hosting

If your site is only pages (no Server Actions, no cookies, no proxy, no dynamic API), Next.js can produce plain HTML files that any hosting — even PHP shared hosting — can serve.

JS – next.config.mjs
// next.config.mjs
const nextConfig = {
  output: 'export',            // writes plain HTML/CSS/JS into the "out" folder
  images: { unoptimized: true },
  trailingSlash: true,         // /about/ → out/about/index.html (works on Apache)
}
export default nextConfig
Terminal – build output
$ npm run build ✓ Exported to /out out/ index.html about/index.html courses/index.html courses/nextjs/index.html blog/how-to-start-coding/index.html sitemap.xml robots.txt _next/… # Upload everything inside "out/" to public_html via File Manager or FTP

Works in static export

  • Static pages, [slug] with generateStaticParams
  • sitemap.js, robots.js
  • Client Components, CSS, fonts

Does NOT work

  • Server Actions (contact form)
  • cookies(), proxy.js, auth
  • Route Handlers reading the request, ISR
Know the limits before choosing

For EduSite's contact form on static hosting, post the form to a small PHP script or a form service instead of a Server Action.

Updating the live site

Terminal – VPS update
# VPS: pull, rebuild, restart with zero hassle
cd ~/edusite
git pull
npm ci
npm run build
pm2 restart edusite

Common mistakes

  • Uploading the source folder to public_html → shared hosting cannot run it; upload out/ from a static export.
  • Forgetting env vars on the host → database errors or localhost URLs in the sitemap.
  • Old Node.js (v18) on the server → Next.js 16 needs 20.9+.
  • Running npm run dev on the server → slow and insecure; use build + start.

Summary

  • Vercel: push to GitHub → import → deploy.
  • VPS: build, run with PM2, Nginx reverse proxy, Certbot SSL.
  • Static export (output: 'export') for simple sites on shared hosting.
✅ Practice

Deploy EduSite to Vercel, then make a small text change, push it, and watch the new deployment go live automatically.

Frequently Asked Questions

Can I host Next.js on Hostinger shared hosting?
Shared PHP hosting cannot run a Node.js server. You can upload a static export (output: 'export') if your site does not use Server Actions, cookies, proxy or dynamic API routes. For full features use a Node.js plan, a VPS or Vercel.
Is Vercel free?
Vercel has a free Hobby plan for personal, non-commercial projects. Commercial sites should use a paid plan or another host.
Which Node.js version do I need for Next.js 16?
Node.js 20.9 or newer. Check with node -v on the server.
← Next.js Tutorial
🔗

Share this topic with a friend

यह topic किसी दोस्त को भेजें

Found it useful? Send it to a classmate learning the same thing.

अच्छा लगा? जो दोस्त यही सीख रहा है, उसे भेज दीजिए।

Next topicProject: Plan the EduSite Website Your progress: 30 / 37 (81%) · Lesson 31 / 37 Continue →

How was this lesson?

Your feedback helps us make the content better.

Write a review or suggestion (optional)

After approval, your name and city may appear publicly with your review. Please do not write your email or phone number.

▶ CodingEasily on YouTube

Learn with video lessons in easy Hindi

Featured video: RDBMS Part 3 – Class XI Commerce IT

▶ Subscribe – it’s free