9.1 KiB
Les 14 — Docenttekst (normaal)
Online les via Teams. Voor uitgebreide voorbereiding + context per blok.
Voor letterlijk voorleesbaar script: zie Les14-Docenttekst-Autocue.md.
Lesvorm en flow
| Onderdeel | Indeling |
|---|---|
| Theorie + demo | ±1 uur klassikaal (live demo via screenshare) |
| Pauze | 15 minuten |
| Nu jullie | ±1,5 uur zelf doen met begeleiding via chat |
Setup tijdens de les:
- Monitor 1 (privé): autocue-document fullscreen
- Monitor 2 (gedeeld in Teams): Cursor + browser + terminal + slides naast elkaar
Tip voor de online-les: zet je Teams-deelvenster zo in dat slides en code allebei zichtbaar zijn. Cursor + terminal samen, slides klein in een hoek.
Voorbereiding — week vooraf
Accounts checken (studenten allemaal):
- GitHub-account met
ghCLI ingelogd (gh auth login) - Vercel-account met CLI:
npm i -g vercel && vercel login - Cursor geïnstalleerd, Pro of Business plan actief, ingelogd
Communicatie: stuur een Slack-bericht een dag vooraf met deze checklist. Als iemand morgen vastloopt op de installatie ben je een kwartier kwijt.
Voorbereiding — dag van de les
30 minuten vooraf:
- Cursor open in een nieuwe lege folder voor de demo
- Browser tabs: github.com (logged in), vercel.com/dashboard, vercel.com/new
- Twee terminals klaar (één in de demo-folder, één voor ad-hoc commando's)
- Slides in een aparte fullscreen of klein in een hoek
- Autocue-document op tweede monitor
Backup scenario:
- Een eerder voltooide demo-folder klaar voor het geval live demo vastloopt
- Screenshots van Vercel preview-URL's voor het geval Vercel traag deploy't
- Pre-gemaakte
.cursor/rules/general.mdcenAGENTS.mdom snel te kunnen plakken
Copy-paste-klaar materiaal:
- Repo-naam (
mijn-portfolioof vergelijkbaar) - Twee feature-prompts (zie autocue Bijlage C)
.cursor/rules/general.mdcinhoud (zie autocue Bijlage A)AGENTS.mdinhoud (zie autocue Bijlage B)
Per blok — wat je extra wilt zeggen
Blok 1 — Welkom + Vandaag (slides 1–2)
Doel: verwachtingen zetten — het is een live demo van begin tot eind.
Maak duidelijk dat het anders is dan eerdere lessen: je bouwt een hele cyclus voor hun ogen op. Vraag tussendoor of het tempo klopt — online is het lastig om non-verbale signalen te lezen. Laat ze hun hand opsteken (Teams reactie) als iets onduidelijk is.
Blok 2 — Scaffold + Git + Vercel (slides 3–7)
Doel: in 15 minuten van leeg naar live productie-URL.
Slide 3 — Scaffold: ga niet door de create-next-app prompts heen alsof het triviaal is. Studenten hebben dit vaak nog nooit gedaan. Beschrijf elke keuze kort:
- TypeScript: ja, want strict typing
- ESLint: ja, standaard
- Tailwind: ja, we gebruiken het hele jaar
- src/ dir: ja, het houdt root schoon
- App Router: ja, dat is de moderne flow
- Turbopack: ja als default, geeft betere DX
Slide 4 — Git: veelgemaakte fout is git push zonder eerst remote add. Laat zien wat de foutmelding eruitziet en hoe je het oplost. Wijs ook expliciet op .gitignore — je toont dat node_modules en .env.local NIET in de eerste commit zitten.
Slide 5 — Vercel: wacht écht de 45 seconden af. Gebruik die tijd om uit te leggen wat Vercel doet onder de motorkap (clone, install, build, deploy). Het wachten levert spanning op — gebruik het didactisch.
Slide 6/7 — URLs en env vars: dit is nog theorie, want we hebben nog geen secrets. Belofte aan studenten: "zo direct ga ik dit ook live gebruiken met Vercel CLI."
Blok 3 — Vercel CLI (slides 8–10)
Doel: student begrijpt het verschil tussen dashboard en CLI, en ziet één concrete workflow (link + env pull).
Belangrijk: maak duidelijk dat we GEEN env vars echt hebben — we tonen de syntax. Als je het wilt demonstreren met een echte var, voeg er één toe (MIJN_NAAM=Tim) en pull die naar lokaal, om te laten zien dat de file gevuld wordt.
vercel env pull is een eye-opener voor veel studenten. Het scheelt je manuelle gepruts elke keer als productie-vars wijzigen.
Blok 4 — Cursor in detail (slides 11–17)
Doel: student kent de hoofdfeatures en weet wanneer welke te gebruiken.
Deze 7 slides zijn de inhoudelijke kern. Niet door doorheen jakkeren. Geef per modus een micro-demo:
- Slide 12 (modi): open de chat met Cmd+L, sluit met Esc. Druk Cmd+K op een regel in code en typ "rename this variable". Toggle Plan-mode in de chat — laat zien hoe de UI verandert.
- Slide 13 (@-mentions): typ
@in chat, laat het autocomplete-menu zien. Probeer@web:Next.js 16 release notesvoor een live web-search demo. - Slide 14 (Cursor Rules): maak live een
.cursor/rules/general.mdcaan. Zet er één duidelijke regel in (bv. "altijd functional components, nooit class components"). Test daarna in een nieuwe chat dat de AI die regel volgt. - Slide 15 (AGENTS.md): plak je voorbereide voorbeeld. Leg uit waarom ook Claude Code en Copilot dit lezen.
- Slide 16 (Background agents): demo de feature-2-prompt al hier even kort, om visueel te maken hoe een agent in een aparte tab opent.
Vraag aan het eind van dit blok: "welke modus zou je gebruiken voor X?" — twee of drie scenario's. Kort, voor engagement.
Blok 5 — Live feature-workflow (slides 18–22)
Doel: de hele cyclus laten zien — niet alleen Cursor, niet alleen Vercel, maar de combo.
Slide 19 — Demo 1: plan + apply. Maak het visueel: open de chat, plak de feature-1-prompt, wacht tot het plan verschijnt, lees het door, klik Apply. Dan met Cmd+K één tweak. Commit.
Slide 20 — Push + preview: push, switch naar browser tab Vercel, wacht op build, open preview-URL. Gebruik de wachttijd om te zeggen: "kijk, vanaf hier ben je niet meer alleen — je kunt deze URL nu delen met collega's of klanten zonder dat zij iets hoeven te installeren."
Slide 21 — Demo 2 background agent: dit is de WOW-moment van de les. Plak de feature-2-prompt, klik "open in background", en demonstreer LETTERLIJK dat je in main editor blijft werken. Doe een Cmd+K in een ander bestand. Dat illustreert het parallel-werken.
Slide 22 — Merge: open beide PR's op github.com. Toon de Vercel-bot comment. Merge één naar main. Switch terug naar Vercel dashboard om de productie-deploy te zien starten.
Blok 6 — Recap + Nu jullie (slides 23–25)
Doel: overgang naar zelf-doen.
Voor de pauze: vraag of er nog iets onduidelijk was uit de demo. In een online setting moet je actief uitlokken — studenten typen vaak niet uit zichzelf.
Na de pauze: laat een gedeelde chat open zodat studenten kunnen tonen waar ze vastlopen. Wees actief in de chat. Loop om de 15 minuten een check-in: "hoe ver iedereen?"
Veelvoorkomende vragen + antwoorden
"Waarom Cursor en niet gewoon VS Code met GitHub Copilot?" Beide werken. Cursor's voordeel: tighter integratie van plan/build/agent flows en background agents. VS Code + Copilot is solid voor inline-completion. Voor agent-workflows is Cursor (of Claude Code) doorgaans soepeler. Test allebei en kies.
"Wat kost Cursor?" Hobby tier is gratis met limits. Pro is rond €20/maand. Voor de cursus genoeg.
"Kan ik mijn API-key in Cursor gebruiken in plaats van hun subscription?" Ja — Settings → Models. Voeg je OpenAI/Anthropic key toe. Goedkoper bij weinig gebruik, duurder bij veel.
"Wat als ik een typo maak in .cursor/rules/?"
Cursor parseert de YAML front-matter, gooit een waarschuwing bij syntax errors. Open de file en kijk linksonder voor de error.
"Zal Cursor mijn code naar OpenAI sturen?" Hangt af van je settings. Cursor heeft "Privacy mode" — code wordt niet bewaard door OpenAI of Anthropic. Check Settings → Privacy.
"Hoe kies ik tussen Plan en Build?" Plan voor onbekende terrein of grote features. Build als je precies weet wat je wilt en het kleiner is. Bij twijfel: Plan, dan klik je Apply als het bevalt.
"Werkt Vercel CLI ook voor andere frameworks?" Ja — Astro, SvelteKit, Vue, Remix, alles wat Vercel ondersteunt. De link- en env-flow is identiek.
"Wat als ik géén Vercel wil gebruiken?" Alternatieven: Netlify (vergelijkbare workflow), Cloudflare Pages (goedkoper bij schaal), zelf hosten op een Hetzner box met Coolify (zoals Tim doet). De Cursor-workflow blijft hetzelfde — alleen de deploy-step verandert.
Foutmodi tijdens de les
| Probleem | Snelle fix |
|---|---|
gh repo create faalt — niet ingelogd |
gh auth login opnieuw |
| Vercel detecteert geen Next.js | Build directory leeg gelaten, niet out/ typen |
| Vercel build crasht op env var | Tijdelijk een dummy zetten in dashboard |
| Cursor verliest context | Esc, nieuwe chat starten, opnieuw @-mention |
| Background agent doet niets | Eerst zien of het Pro/Business-plan vereist |
vercel link koppelt aan verkeerd project |
rm -rf .vercel en opnieuw |
Vooruitblik Les 15
Volgende les: RAG met embeddings. We bouwen een PDF Q&A-app. Studenten moeten daarvoor hun Next.js-app van vandaag live hebben staan, met minstens twee PR's gemerged. Anders missen ze het fundament voor de RAG-stack.
Stuur de avond ervoor een Slack-bericht: "checklist voor Les 15 — productie-URL + 2 merged PR's — laat in chat zien als je vastzit."