Free tutorials & notes in Hindi & English · Clean code examples 🧰 मुफ़्त PDF और फ़ोटो टूल्स →
🚀 SEO, Performance और Deploy  ·  Lesson 30

Next.js Deploy करें (Vercel, VPS, Static)

Deployment option चुनें

OptionCostसारे features?किसके लिए best
VercelFree (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
source codeapp/, components/npm run buildcompile + prerender.next/optimized outputnpm run startproduction server
"Build" का मतलब

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
  1. 1vercel.com → GitHub से Sign up
  2. 2Add New → Project → edusite repository import
  3. 3Environment Variables → SITE_URL (और DB/secret keys) जोड़ें
  4. 4Deploy → लगभग एक मिनट में edusite.vercel.app मिल जाता है
  5. 5Settings → Domains → edusite.in जोड़ें और दिखाए गए DNS records set करें
अब हर git push अपने आप deploy होता है

Option 2: PM2 + Nginx के साथ VPS

Visitorhttps://edusite.inNginx :443SSL, gzip, reverse proxyPM2next start चालू रखता है, crash पर restartNext.js :3000आपका appMySQLउसी 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

Certbot से 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 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

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
चुनने से पहले limits जानें

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 करें।
← Next.js Tutorial
🔗

Share this topic with a friend

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

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

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

अगला topicProject: EduSite Website की Planning आपकी प्रगति: 30 / 37 (81%) · Lesson 31 / 37 आगे बढ़ें →

यह lesson कैसा लगा?

आपकी राय से हम content और बेहतर बनाते हैं।

अपना review और सुझाव लिखें (वैकल्पिक)

Review approve होने के बाद आपका नाम और शहर इसके साथ public दिख सकते हैं। Email या phone न लिखें।

▶ CodingEasily on YouTube

Video से सीखें – आसान Hindi में

चुनी हुई video: RDBMS भाग 3 – Class XI Commerce IT

▶ Channel subscribe करें