# Les 17: Advanced Deployment & Production (Vercel)

> 📋 **Lesmateriaal nog niet uitgewerkt**
>
> De volgende bestanden worden gegenereerd wanneer deze les wordt uitgewerkt:
> - Les17-Slide-Overzicht.md
> - Les17-Lesplan.md
> - Les17-Docenttekst.md
> - Les17-Bijlage-A-Lesopdracht.md
> - Les17-Bijlage-B-Huiswerkopdracht.md

---

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

## Beschrijving
Production-ready deployment.

---

## Te Behandelen

### Vercel Deployment Deep Dive

**Hoe werkt Vercel:**
- Edge network
- Serverless
- Automatic builds

**Git Integratie:**
- Push main → deploy
- Branches → preview URLs
- Preview deployments
- Instant rollbacks
- Environments

### Environment Variables
- Verschillende vars per environment
- Secrets handlen
- Accessing (process.env, NEXT_PUBLIC_)
- Best practices

### Custom Domains
- Domein toevoegen
- DNS config
- HTTPS automatic
- Multiple domains

### Performance Optimization

| Categorie | Technieken |
|-----------|------------|
| Images | Next.js Image, lazy loading, responsive, WebP/AVIF |
| Fonts | next/font, font-display, reducing files |
| Code | Dynamic imports, lazy loading, route-based splitting |
| General | Bundle analyse, caching strategies, connection pooling |

### Vercel Analytics

**Web Vitals:**
- CLS (Cumulative Layout Shift)
- FID (First Input Delay)
- LCP (Largest Contentful Paint)
- FCP (First Contentful Paint)
- TTFB (Time to First Byte)

**Features:**
- Real user monitoring
- Speed insights
- Audience insights

### Error Tracking
- Edge Function logs
- Error boundaries
- Logging services (Sentry, LogRocket)

### CI/CD
- GitHub Actions
- Automated testing
- Type checking
- Linting
- E2E on previews

### Supabase Production
- Connection pooling
- Backups
- Monitoring
- Rate limiting

### Security Checklist
- Env vars secure
- No secrets exposed
- HTTPS
- CSP headers
- Rate limiting
- Validation
- Dependency updates

---

## Tools
- Vercel
- GitHub Actions
- Sentry/LogRocket
- Lighthouse
- Cursor

---

## Lesopdracht (2 uur)

### Production-Ready Deployment van Beste Project

**(Todo app aanbevolen)**

### Phase 1: Pre-Deployment Checklist (30 min)

Verify:
- Env vars
- Error boundaries
- Loading states
- 404 page
- SEO basics
- Favicon
- TypeScript errors

### Phase 2: Performance Optimization (45 min)

- Run Lighthouse (aim 90+)
- Fix met Cursor:
  - Optimize images
  - Reduce bundle
  - Optimize fonts
  - Improve Core Web Vitals
- Re-run
- Document

### Phase 3: Deploy & Monitor (45 min)

- Deploy naar Vercel
- Custom domain (optional)
- Enable Analytics
- Setup error monitoring
- Maak monitoring dashboard
- Test grondig

### Deliverable
- Production URL
- Lighthouse screenshot
- Dashboard access

---

## Huiswerk (2 uur)

### Maak Production Deployment Playbook

### Deel 1: Comprehensive Checklist (1 uur)

Schrijf checklists voor:
- Pre-Deployment
- Environment Setup
- Performance Requirements
- Monitoring Setup
- Post-Deployment
- Rollback Plan

### Deel 2: GitHub Actions (optional, 30 min)
- Setup automated checks op PRs

### Deel 3: Monitoring Dashboard (30 min)

Bouw admin dashboard met:
- Deployment status
- Errors
- Performance metrics
- Database usage
- API usage
- Custom metrics
- Auto-refresh 5min

### Deliverable
- Playbook
- GitHub Actions
- Dashboard
- Reflectie (200 woorden)

---

## Leerdoelen
Na deze les kan de student:
- Vercel deployment configureren met Git integration
- Environment variables veilig beheren
- Custom domains configureren
- Performance optimaliseren voor Web Vitals
- Analytics en monitoring opzetten
- CI/CD implementeren met GitHub Actions
- Security best practices toepassen voor productie