Vercel & Netlify Deployment

# Vercel & Netlify Deployment

## Vercel

### CLI deploy
```bash
npm install -g vercel
vercel login
vercel             # deploy to preview URL
vercel --prod      # deploy to production
```

### vercel.json
```json
{
  "buildCommand": "npm run build",
  "outputDirectory": ".next",
  "framework": "nextjs",
  "regions": ["hkg1", "sin1"],
  "headers": [
    {
      "source": "/api/(.*)",
      "headers": [{ "key": "Cache-Control", "value": "no-store" }]
    }
  ],
  "rewrites": [
    { "source": "/old/:path*", "destination": "/new/:path*" }
  ],
  "redirects": [
    { "source": "/docs", "destination": "https://docs.example.com", "permanent": true }
  ]
}
```

### Edge Functions
```ts
// app/api/geo/route.ts
import { NextRequest } from 'next/server'
export const runtime = 'edge'
export function GET(req: NextRequest) {
  const country = req.geo?.country ?? 'unknown'
  return Response.json({ country })
}
```

### Environment variables
- Dashboard -> Project -> Settings -> Environment Variables
- `VERCEL_ENV`: `production` | `preview` | `development`
- `NEXT_PUBLIC_` prefix for client-side exposure

---

## Netlify

### netlify.toml
```toml
[build]
  command = "npm run build"
  publish = "dist"       # or ".next" for Next.js

[build.environment]
  NODE_VERSION = "20"

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200          # SPA fallback

[[headers]]
  for = "/assets/*"
  [headers.values]
    Cache-Control = "public, max-age=31536000, immutable"

[[plugins]]
  package = "@netlify/plugin-nextjs"
```

### Netlify Functions
```ts
// netlify/functions/hello.ts
import type { Handler } from '@netlify/functions'
export const handler: Handler = async (event) => ({
  statusCode: 200,
  body: JSON.stringify({ message: 'Hello', path: event.path }),
})
```

### Deploy via CLI
```bash
npm install -g netlify-cli
netlify login
netlify init
netlify deploy --dir=dist          # preview
netlify deploy --dir=dist --prod   # production
```

## Custom domain (both platforms)
1. Add domain in dashboard
2. At DNS provider: add CNAME `www` -> `cname.vercel-dns.com` (Vercel) or similar
3. Or use A record pointing to platform IP
4. SSL auto-provisioned via Let's Encrypt

## Preview deployments
- Every git branch/PR gets a unique preview URL automatically
- Set branch-specific env vars for staging configs