Day 98

Deployment

13 min
JavaScript 100 Days

App banana aur deploy karna — dono zaroori hain! Vercel Next.js ka creator hai — zero-config deployment. GitHub se connect karo, push karo, deploy ho jao!

Deploy to Vercel

Next.js Vercel par deploy karo.

deploy.sh
bash
# Option 1: Vercel CLI
npm install -g vercel
vercel login
vercel  # deploy karo
vercel --prod  # production deploy

# Option 2: GitHub Integration (recommended)
# 1. GitHub par repo push karo
# 2. vercel.com par sign in karo
# 3. "New Project" → GitHub repo connect karo
# 4. Framework: Next.js (auto-detected)
# 5. Environment Variables add karo
# 6. Deploy!

# Har push par auto-deploy hogi!

# vercel.json — custom config
{
  "headers": [
    {
      "source": "/api/(.*)",
      "headers": [
        { "key": "Cache-Control", "value": "no-store" }
      ]
    }
  ]
}

Environment Variables on Vercel

Production secrets set karo.

env-setup.sh
bash
# Vercel Dashboard ya CLI se env vars set karo

# CLI se:
vercel env add MONGODB_URI production
vercel env add JWT_SECRET production
vercel env add NEXT_PUBLIC_API_URL production  # NEXT_PUBLIC_ = client-side bhi accessible

# Types:
# - Production   — live site
# - Preview      — PR deployments
# - Development  — local dev

# .env.local — local development ke liye
MONGODB_URI=mongodb://localhost:27017/myapp
JWT_SECRET=local-dev-secret-only

# Next.js mein access:
const url = process.env.MONGODB_URI;           // server only
const apiUrl = process.env.NEXT_PUBLIC_API_URL; // client + server

🎯 Practice Challenge

Is JS 100 Days course ki website Vercel par deploy karo. Custom domain connect karo. Analytics enable karo.