novi-lessons/Samenvattingen/Les17-Samenvatting.md

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-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