novi-lessons/Samenvattingen/Les16-Samenvatting.md

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