# Les 16: Deployment & Production

---

## Hoofdstuk
**Hoofdstuk 3: Advanced** (Les 10-18)

## Beschrijving
Deploy je eindproject naar productie. Leer environment variables, Vercel deployment, en basis performance optimalisatie.

---

## Te Behandelen

### Vercel Deployment Flow

**Hoe Vercel werkt:**
1. Connect GitHub repository
2. Push naar main → automatische deploy
3. Push naar andere branch → preview URL
4. Alles automatisch (build, SSL, CDN)

**Waarom Vercel voor Next.js:**
- Gemaakt door dezelfde makers
- Zero-config deployment
- Gratis tier ruim voldoende
- Automatische HTTPS
- Global CDN

---

### Environment Variables in Vercel

**Lokaal (.env.local) vs Productie (Vercel Dashboard):**

| Waar | Bestand/Locatie | Voorbeeld |
|------|-----------------|-----------|
| Lokaal | `.env.local` | Development |
| Vercel | Dashboard → Settings → Env Vars | Production |

**Stap voor stap:**
1. Ga naar je Vercel project
2. Settings → Environment Variables
3. Voeg toe:
   - `NEXT_PUBLIC_SUPABASE_URL`
   - `NEXT_PUBLIC_SUPABASE_ANON_KEY`
   - `OPENAI_API_KEY`
4. Selecteer environment (Production, Preview, Development)
5. Save & Redeploy

**Let op:**
- `NEXT_PUBLIC_` prefix = zichtbaar in browser
- Zonder prefix = alleen server-side (API routes)

---

### Supabase Productie Setup

**Redirect URLs configureren:**
1. Ga naar Supabase → Authentication → URL Configuration
2. Voeg toe bij "Redirect URLs":
   - `https://jouw-app.vercel.app/**`
   - `https://jouw-app.vercel.app`

**Waarom:**
- Auth redirects werken alleen naar toegestane URLs
- Wildcards (`**`) voor sub-routes

---

### Deployment Checklist

**Voor deployment:**
- [ ] `npm run build` werkt lokaal
- [ ] Geen TypeScript errors
- [ ] Environment variables gedocumenteerd in `.env.example`
- [ ] `.gitignore` bevat `.env*.local`
- [ ] README up-to-date

**Na deployment:**
- [ ] App laadt correct
- [ ] Auth werkt (login/logout)
- [ ] Data wordt opgehaald uit Supabase
- [ ] AI features werken (indien van toepassing)
- [ ] Geen console errors

---

### Performance Basics

**Lighthouse Audit:**
1. Open Chrome DevTools
2. Tab "Lighthouse"
3. Klik "Analyze page load"
4. Aim for score >80 in elke categorie

**Quick wins:**
- Gebruik Next.js `Image` component (niet `<img>`)
- Lazy load components die niet direct nodig zijn
- Verwijder ongebruikte dependencies

---

### Security Checklist

**Belangrijk voor productie:**
- [ ] API keys nooit in client-side code
- [ ] Supabase RLS enabled (Row Level Security)
- [ ] Error messages geven geen gevoelige info
- [ ] HTTPS (automatisch via Vercel)

---

### Monitoring Basics

**Vercel Dashboard toont:**
- Deployments history
- Function logs
- Analytics (optioneel)

**Supabase Dashboard toont:**
- Database usage
- Auth logs
- API requests

---

## Tools
- Vercel
- GitHub
- Supabase
- Chrome DevTools (Lighthouse)

---

## Lesopdracht (2 uur)

### Deploy Je Eindproject

**Deel 1: Pre-Deployment Check (30 min)**

Run door de checklist:
1. `npm run build` - fix eventuele errors
2. Check TypeScript errors
3. Maak/update `.env.example`
4. Update README met project info

**Deel 2: Vercel Deployment (30 min)**

1. Ga naar [vercel.com](https://vercel.com)
2. "Add New Project"
3. Import je GitHub repository
4. Voeg environment variables toe
5. Deploy!

**Deel 3: Supabase Config (20 min)**

1. Voeg Vercel URL toe aan Supabase redirect URLs
2. Test auth in productie
3. Verifieer data access

**Deel 4: Testing & Lighthouse (40 min)**

1. Test alle features in productie:
   - Login/logout
   - CRUD operaties
   - AI chat (indien aanwezig)
2. Run Lighthouse audit
3. Fix issues tot score >80
4. Screenshot resultaat

### Deliverable
- Werkende productie URL
- Lighthouse screenshot (score >80)
- Test rapport: wat werkt, wat niet

---

## Huiswerk (2 uur)

### Polish & Documentatie

**Deel 1: Bug Fixes (1 uur)**

1. Test je app grondig in productie
2. Fix gevonden bugs
3. Test edge cases:
   - Lege states
   - Error states
   - Loading states
4. Redeploy

**Deel 2: Performance Optimization (30 min)**

1. Run Lighthouse opnieuw
2. Fix top 3 performance issues
3. Document wat je hebt verbeterd

**Deel 3: Documentatie Afronden (30 min)**

Update je `README.md`:
- Werkende productie URL
- Features lijst
- Tech stack
- Setup instructies
- Screenshots

Update `docs/`:
- PROMPT-LOG.md (minimaal 10 entries)
- AI-DECISIONS.md (minimaal 5 entries)

### Deliverable
- Geoptimaliseerde productie app
- Complete documentatie
- Lighthouse score >85

---

## Leerdoelen
Na deze les kan de student:
- Een Next.js app deployen naar Vercel
- Environment variables configureren in Vercel
- Supabase redirect URLs instellen voor productie
- Een deployment checklist doorlopen
- Lighthouse gebruiken voor performance audit
- Basis security checks uitvoeren
- Productie monitoring begrijpen