🚀 SEO, Performance और Deploy · Lesson 30
Next.js Deploy करें (Vercel, VPS, Static)
Deployment option चुनें
| Option | Cost | सारे features? | किसके लिए best |
|---|---|---|---|
| Vercel | Free (hobby) / paid | ✅ हाँ | सबसे तेज़ शुरुआत, हर Git push पर preview |
| VPS (Hostinger VPS, DigitalOcean…) | ₹400+/month | ✅ हाँ + अपना MySQL | पूरा control, Indian region |
| Node.js hosting (Hostinger Node.js apps, Render, Railway) | अलग-अलग | ✅ हाँ | Server admin के बिना managed Node |
| Shared hosting पर Static export | आपका मौजूदा plan | ⚠️ Server features नहीं | Brochure sites, blogs |
Local production build
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 (सबसे आसान)
Terminal – project को GitHub पर push
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 → GitHub से Sign up
- 2Add New → Project → edusite repository import
- 3Environment Variables → SITE_URL (और DB/secret keys) जोड़ें
- 4Deploy → लगभग एक मिनट में edusite.vercel.app मिल जाता है
- 5Settings → Domains → edusite.in जोड़ें और दिखाए गए DNS records set करें
Option 2: PM2 + Nginx के साथ VPS
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 nginxCertbot से free SSL
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)
पहले domain का A record VPS IP address पर point करें (domain registrar के DNS panel में), फिर Certbot चलाएँ।
Option 3: Shared hosting के लिए static export
अगर site में सिर्फ़ pages हैं (Server Actions, cookies, proxy, dynamic API नहीं), तो Next.js plain HTML files बना सकता है जिन्हें कोई भी hosting — PHP shared hosting भी — 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
Static export में चलता है
- Static pages, generateStaticParams वाले [slug]
- sitemap.js, robots.js
- Client Components, CSS, fonts
नहीं चलता
- Server Actions (contact form)
- cookies(), proxy.js, auth
- Request पढ़ने वाले Route Handlers, ISR
Static hosting पर EduSite contact form के लिए Server Action की जगह form को छोटे PHP script या form service पर post करें।
Live site update करना
Terminal – VPS update
# VPS: pull, rebuild, restart with zero hassle cd ~/edusite git pull npm ci npm run build pm2 restart edusite
आम गलतियाँ
- Source folder को public_html में upload करना → shared hosting इसे चला नहीं सकती; static export का
out/upload करें। - Host पर env vars भूलना → database errors या sitemap में localhost URLs।
- Server पर पुराना Node.js (v18) → Next.js 16 को 20.9+ चाहिए।
- Server पर
npm run devचलाना → धीमा और insecure; build + start use करें।
सारांश
- Vercel: GitHub पर push → import → deploy।
- VPS: build, PM2 से चलाएँ, Nginx reverse proxy, Certbot SSL।
- Shared hosting पर simple sites के लिए static export (
output: 'export')।
✅ Practice
EduSite को Vercel पर deploy कीजिए, फिर छोटा सा text बदलकर push कीजिए और नई deployment को अपने आप live होते देखिए।
अक्सर पूछे जाने वाले प्रश्न (FAQ)
क्या Next.js को Hostinger shared hosting पर host कर सकते हैं?
Shared PHP hosting Node.js server नहीं चला सकती। अगर site Server Actions, cookies, proxy या dynamic API routes use नहीं करती तो static export (output: 'export') upload कर सकते हैं। पूरे features के लिए Node.js plan, VPS या Vercel use करें।
क्या Vercel free है?
Vercel का free Hobby plan personal, non-commercial projects के लिए है। Commercial sites को paid plan या दूसरा host use करना चाहिए।
Next.js 16 के लिए कौन सा Node.js version चाहिए?
Node.js 20.9 या नया। Server पर node -v से check करें।
