🚀Vercel & deployment

# Installeer Vercel CLI
npm install -g vercel

# Log in met je Vercel account
vercel login

# Deploy vanuit je projectmap
cd /mijn/project
vercel

# Vercel stelt vragen over je project:
# - Set up and deploy? Y
# - Which scope? (kies je account)
# - Link to existing project? N
# - Project name? (druk enter voor huidige naam)
# - In which directory is your code? ./

# Na succesvolle deploy krijg je een URL!

# Deploy naar productie
vercel --prod

# ── NOOIT naar git pushen — staat in .gitignore ──

# Anthropic / OpenAI
ANTHROPIC_API_KEY=sk-ant-api03-...
OPENAI_API_KEY=sk-proj-...

# Database (zie §47 voor Vercel KV en Postgres)
DATABASE_URL=postgresql://user:pass@localhost:5432/myapp_dev
KV_URL=redis://localhost:6379

# Authenticatie
NEXTAUTH_SECRET=genereer-met-openssl-rand-base64-32
NEXTAUTH_URL=http://localhost:3000

# Stripe betalingen
STRIPE_SECRET_KEY=sk_test_...
STRIPE_WEBHOOK_SECRET=whsec_...

# Public variabelen (NEXT_PUBLIC_ prefix = zichtbaar in browser)
NEXT_PUBLIC_SITE_URL=http://localhost:3000
NEXT_PUBLIC_STRIPE_PUBLIC_KEY=pk_test_...

# Lijst alle env vars
vercel env ls

# Voeg env var toe voor alle omgevingen
vercel env add ANTHROPIC_API_KEY

# Voeg toe voor specifieke omgeving
vercel env add DATABASE_URL production

# Haal productie-env vars lokaal op
vercel env pull .env.local

# Verwijder een env var
vercel env rm DEPRECATED_API_KEY

1. Jij schrijft code (met Claude Code)
        ↓
2. git commit + git push naar GitHub
        ↓
3. GitHub notificeert Vercel (webhook)
        ↓
4. Vercel bouwt je project (npm run build)
        ↓
5. Als build slaagt → Automatisch live (< 2 minuten)
   Als build faalt → E-mail met de fout, vorige versie blijft live
        ↓
6. Preview URL per branch / PR aangemaakt

# Stap 1: Installeer Vercel KV package
npm install @vercel/kv

# Stap 2: Maak een KV Store aan in Vercel Dashboard
# Storage → Create → KV → Kies naam → Create
# Vercel voegt automatisch env vars toe: KV_URL, KV_REST_API_URL, KV_REST_API_TOKEN

# Stap 3: Pull env vars naar lokaal
vercel env pull .env.local

import { kv } from '@vercel/kv'

// SET: Sla iets op (met optionele expiratie)
export async function POST(req: Request) {
  const { key, value } = await req.json()
  await kv.set(key, value, { ex: 3600 }) // ex: seconden tot expiratie
  return Response.json({ success: true })
}

// GET: Haal iets op
export async function GET(req: Request) {
  const { searchParams } = new URL(req.url)
  const key = searchParams.get('key')
  const value = await kv.get(key!)
  return Response.json({ value })
}

// Praktisch voorbeeld: API rate limiting
const requests = await kv.incr(`rate:${userId}`)
if (requests === 1) {
  await kv.expire(`rate:${userId}`, 60) // reset elke minuut
}
if (requests > 10) return new Response('Rate limited', { status: 429 })

# Stap 1: Installeer
npm install @vercel/postgres

# Stap 2: Maak DB aan via Vercel Dashboard
# Storage → Create → Postgres → Naam kiezen → Create
# Vercel voegt toe: POSTGRES_URL, POSTGRES_PRISMA_URL, etc.

# Stap 3: Pull env vars
vercel env pull .env.local

import { sql } from '@vercel/postgres'

// Tabel aanmaken (eenmalig)
await sql`
  CREATE TABLE IF NOT EXISTS users (
    id SERIAL PRIMARY KEY,
    email VARCHAR(255) UNIQUE NOT NULL,
    name VARCHAR(255),
    created_at TIMESTAMP DEFAULT NOW()
  )
`

// Gebruiker opslaan
export async function POST(req: Request) {
  const { email, name } = await req.json()
  const { rows } = await sql`
    INSERT INTO users (email, name)
    VALUES (${email}, ${name})
    RETURNING *
  `
  return Response.json(rows[0])
}

// Gebruikers ophalen
export async function GET() {
  const { rows } = await sql`SELECT * FROM users ORDER BY created_at DESC`
  return Response.json(rows)
}

{
  "crons": [
    {
      "path": "/api/cron/stuur-dagelijkse-emails",
      "schedule": "0 9 * * *"  // Elke dag om 9:00 UTC
    },
    {
      "path": "/api/cron/opruimen-oude-data",
      "schedule": "0 0 * * 0"  // Elke zondag om middernacht
    }
  ]
}

npm install @vercel/analytics @vercel/speed-insights

// app/layout.tsx
import { Analytics } from '@vercel/analytics/react'
import { SpeedInsights } from '@vercel/speed-insights/next'

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Analytics />        // Pageviews en events
        <SpeedInsights />   // Core Web Vitals (LCP, CLS, FID)
      </body>
    </html>
  )
}