🚀 SEO, Performance & Deploy · Lesson 30
Deploy Next.js (Vercel, VPS, Static)
Choose a deployment option
| Option | Cost | All features? | Best for |
|---|---|---|---|
| Vercel | Free (hobby) / paid | ✅ Yes | Fastest start, previews per Git push |
| VPS (Hostinger VPS, DigitalOcean…) | ₹400+/month | ✅ Yes + your own MySQL | Full control, Indian region |
| Node.js hosting (Hostinger Node.js apps, Render, Railway) | Varies | ✅ Yes | Managed Node without server admin |
| Static export on shared hosting | Your existing plan | ⚠️ No server features | Brochure 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
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
- 1vercel.com → Sign up with GitHub
- 2Add New → Project → import the edusite repository
- 3Environment Variables → add SITE_URL (and DB/secret keys)
- 4Deploy → you get edusite.vercel.app in about a minute
- 5Settings → Domains → add edusite.in and set the DNS records shown
Option 2: VPS with PM2 + Nginx
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 nginxFree 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 nextConfigTerminal – 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
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 devon 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.
