Les 13: Externe APIs + Cursor agents + Vercel deploy

✅ Deze les is volledig uitgewerkt

Lesmateriaal

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

Nieuwe Pokédex-app — PokéAPI integreren
Feature branch via Cursor Composer
Background Agent: PR + diff review
Vercel deploy + preview URL per PR
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

2.3 KiB Raw Blame History