# Les 13: Externe APIs + Cursor agents + Vercel deploy

> ✅ **Deze les is volledig uitgewerkt**

## Lesmateriaal

- [Slide Overzicht](../Les13-Cursor-Vercel-Deploy/Les13-Slide-Overzicht.md)
- [Docenttekst](../Les13-Cursor-Vercel-Deploy/Les13-Docenttekst.md)
- [Lesstof](../Les13-Cursor-Vercel-Deploy/Les13-Lesstof.md)
- [Lesopdracht](../Les13-Cursor-Vercel-Deploy/Les13-Lesopdracht.md)
- [Huiswerk](../Les13-Cursor-Vercel-Deploy/Les13-Huiswerk.md)

---

## Deel
**Deel 3 — AI Development** (Les 11-16)

## Beschrijving
We verlaten `localhost:3000`. We bouwen een kleine Pokédex die de PokéAPI gebruikt (geen LLM nodig), zetten Cursor's Composer + Background Agent in voor feature branches, en deployen naar Vercel met preview deployments + GitHub Actions CI.

---

## Te Behandelen

### Theorie
- Externe APIs in Next.js (server-side fetch, caching)
- Cursor Composer vs. Background Agent — wanneer welke?
- Vercel preview deployments per branch
- GitHub Actions CI (lint + build per PR)
- Environment variables: lokaal vs. Vercel

### Live demo's
1. Nieuwe Pokédex-app — PokéAPI integreren
2. Feature branch via Cursor Composer
3. Background Agent: PR + diff review
4. Vercel deploy + preview URL per PR
5. GH Actions workflow voor lint + typecheck

---

## Tools
- Next.js 16
- Cursor (Composer + Background Agent)
- Vercel (productie + previews)
- GitHub Actions
- PokéAPI (geen key nodig)

---

## Lesopdracht (in-class, 60 min)

Studenten kijken mee. In-class oefening:
- Clone de Pokédex-starter
- Maak een feature branch via Cursor Composer ("voeg type-filter toe")
- Push naar GitHub en bekijk je Vercel preview URL
- Merge de PR — zie GH Actions runnen

**Inleveren:** Screenshot van werkende preview URL.

---

## Huiswerk (take-home)

Neem je AI SDK-project uit Les 11/12:
- Deploy naar Vercel
- Voeg minimaal 1 externe API toe (geen LLM)
- Configureer GH Actions CI (lint + build)
- README beschrijft hoe lokaal + hoe productie

**Inleveren:** GitHub + Vercel URL via Teams.

---

## Leerdoelen
Na deze les kan de student:
- Externe APIs aanroepen vanuit een Next.js server route
- Het verschil uitleggen tussen Cursor Composer en Background Agent
- Een feature branch + preview deployment opzetten
- GitHub Actions CI configureren voor een Next.js project
- Environment variables veilig beheren tussen lokaal en Vercel