16 KiB
Les 14 — Cursor + Vercel: van leeg project naar preview
Slide Overzicht (Klas A — online, demo-driven)
Lesvorm: online via Teams. Tim deelt scherm met slides + Cursor + browser.
Demo: een vers npx-gescaffold Next.js project, gebouwd live in Cursor.
Aansluit op: Les 13 (Polderfest-agent op localhost) → Les 15 (RAG).
Blok-structuur
| Blok | Onderwerp | Slides |
|---|---|---|
| 1 | Welkom + Vandaag | 1–2 |
| 2 | Scaffold + Git + Vercel koppelen | 3–7 |
| 3 | Vercel CLI + env vars | 8–10 |
| 4 | Cursor — Editor / Agent / Background + rules | 11–19 |
| 5 | Live feature-workflow (plan → branch → preview) | 20–24 |
| 6 | Recap + Nu jullie | 25–27 |
Slide 1: Title
Les 14 — Cursor + Vercel
Visual:
- Background: CREAM
- "Les 14" in BLUE
- "Cursor + Vercel" in BLACK
- Subtitle: "Van leeg project naar preview-deploys — met AI"
- Iconen onderaan: Cursor-logo, Vercel-driehoek, GitHub-octocat
Slide 2: Vandaag
Wat we live gaan bouwen
Vandaag in één lopend voorbeeld:
npx create-next-app— vers project- Git init + push naar GitHub
- Vercel project koppelen → eerste deploy
- Vercel CLI: link, env pull/add
- Cursor open: Plan, Build, Context, Rules, Background agents
- Feature in nieuwe branch → preview-URL
- Tweede feature via een Background agent
Werkwijze: ik bouw klassikaal, jullie kijken en knopen mee. Na pauze doen jullie het zelf.
Visual: workflow-pijl van leeg project → Cursor-features → preview-URL.
Slide 3: Scaffold met npx
Vers Next.js project in 30 seconden
npx create-next-app@latest mijn-portfolio
# kies: TypeScript, Tailwind, App Router, src/ dir
cd mijn-portfolio
npm run dev
Wat je krijgt:
- Werkende Next.js 16 app op
localhost:3000 - TypeScript + Tailwind preconfigured
- ESLint klaar
.gitignoremet.env.local,node_modules,.next
Visual: terminal-screenshot van create-next-app vragen.
Slide 4: Git init + push naar GitHub
Code online krijgen
git init
git add .
git commit -m "init"
git branch -M main
gh repo create mijn-portfolio --public --source=. --push
Of handmatig:
- github.com → New repository → naam → empty
git remote add origin <url>git push -u origin main
Resultaat: je code staat op github.com — basis voor alles wat volgt.
Visual: flow-diagram local → GitHub.
Slide 5: Vercel project koppelen
Van GitHub-repo naar live URL
Drie stappen:
- vercel.com/new → Import Git Repository
- Kies je
mijn-portfoliorepo - Framework auto-detect: Next.js → Deploy
Wat Vercel doet:
- Klonet je repo
- Draait
npm install+npm run build - Deploy't naar het Edge Network
- Geeft je een URL:
mijn-portfolio-<scope>.vercel.app
Voortaan: elke git push → automatische deploy. Geen extra werk.
Visual: Vercel "Import Project" scherm.
Slide 6: Productie-URL + branches
Wat krijg je gratis
Twee URL-types:
| Type | URL-formaat | Wanneer |
|---|---|---|
| Productie | mijn-portfolio-<scope>.vercel.app |
push naar main |
| Preview | ...-git-<branch>-<scope>.vercel.app |
push naar elke andere branch |
Voordeel preview-URLs:
- Iedereen kan klikken zonder lokale setup
- PR-bot post URL automatisch in je Pull Request
- Per push update de preview vanzelf
Visual: twee URL-bubbels (groen = productie, blauw = preview).
Slide 7: Env vars in Vercel UI
Geheimen veilig op productie
Wat je vandaag NOG niet hebt (lege app), maar binnenkort wel:
- Database URLs
- API keys (OpenAI, Stripe, etc.)
- Secret tokens
Drie environments:
| Environment | Wanneer actief |
|---|---|
| Production | main branch deploys |
| Preview | alle andere branches |
| Development | vercel dev lokaal |
NEXT_PUBLIC_ prefix → variabele wordt in browser-bundle gestopt. Zonder prefix = server-only.
Visual: Vercel env-vars dashboard screenshot.
Slide 8: Vercel CLI — waarom
Sneller dan klikken in het dashboard
Wat de CLI je geeft:
vercel link— koppel lokale folder aan Vercel projectvercel env pull— productie-env-vars →.env.localvercel env add/rm— vars beheren zonder dashboardvercel logs— bekijk runtime logsvercel --prod— handmatige productie-deploy
Installeren:
npm i -g vercel
vercel login
Visual: terminal-screenshot van vercel --help.
Slide 9: vercel link + vercel env pull
Lokaal werken met dezelfde env vars als productie
cd mijn-portfolio
vercel link
# → kiest scope (org/team) + project
# → maakt .vercel/project.json aan
vercel env pull .env.local
# → trekt ALLE env vars uit je gekoppelde environment
# → schrijft naar .env.local (overschrijft bestaande)
Voordeel: je hoeft je env vars niet handmatig te kopiëren. Eén commando = synced lokaal.
Tip: vercel env pull --environment=preview voor preview-specifieke vars.
Visual: terminal-output van een succesvolle env pull.
Slide 10: vercel env add/rm
Vars wijzigen vanuit terminal
# Toevoegen
vercel env add OPENAI_API_KEY production
# → vraagt om waarde
# Voor alle 3 environments tegelijk:
vercel env add DATABASE_URL production preview development
# Verwijderen
vercel env rm OPENAI_API_KEY production
# Lijst
vercel env ls
Wanneer handig: als je een API-key roteert, hoef je niet via dashboard. Eén CLI-commando, klaar.
Visual: CLI-flow met prompt-balletjes.
Slide 11: Cursor — alles in één IDE
Wat is het, waarom belangrijk
Wat is Cursor:
- VS Code-fork met AI native ingebouwd
- Niet een extensie — het IS de IDE
- Werkt met Claude, GPT, Gemini en lokale modellen
Wat je krijgt boven gewone VS Code:
- Chat met volledige codebase-context
- Plan-mode (eerst denken, dan doen)
- Build-mode (autonoom uitvoeren)
- Inline edit (Cmd+K)
- Background agents (cloud, async)
- Cursor Rules (per-project instructies)
- Tab-completion die meekijkt met je hele bestand
Visual: vier kwadranten met de hoofdfeatures.
Slide 12: De twee windows + Agent mode
Cursor 3 — wat zit waar
In Cursor 3 zijn er twee hoofdvensters die je met Cmd+Shift+N wisselt:
| Window | Wanneer | Hoe |
|---|---|---|
| Editor Window (classic) | Code schrijven en reviewen | Cmd+Shift+N → Editor |
| Agents Window | Meerdere agents parallel managen | Cmd+Shift+N → Agents |
Binnen Editor Window:
- Cmd+L — chat opent rechts (kies modus: Ask / Agent / Plan)
- Cmd+K — inline edit op selectie
- Tab — completion
Binnen Agents Window:
- Lijst met running / done agents
- Lokale agents, cloud (background) agents, remote SSH
Gouden regel:
- Code schrijven of 1 ding bouwen → Editor Window + Agent mode in chat
- Meerdere features parallel → Agents Window met Background agents
Visual: twee windows naast elkaar + sneltoets-pijl.
Slide 13: Editor Window — stap voor stap
Je hoofdwerkplek voor code
Wat je live ziet:
- Cmd+Shift+N — switcht naar Editor Window (classic IDE-layout)
- Linker zijbalk = file explorer, midden = editor, onder = terminal
- Cmd+L — opent chat-paneel rechts
- Voor snelle inline edits: selecteer code, druk Cmd+K, beschrijf wijziging
- Cursor toont diff inline in de editor
- Accept (Tab) of Reject (Esc)
- Voor file-search: Cmd+P (zoals VS Code)
- Tab — accepteert AI auto-completion suggesties
Wanneer kies je dit:
- Je standaard coding-flow — alles wat je in VS Code zou doen
- Wanneer je veel files tegelijk wilt zien (split screen)
- Voor VS Code extensions (linters, formatters, debugger)
Visual: screenshot Editor Window met file explorer + editor + Cmd+K-diff.
Slide 14: Agent mode — stap voor stap
AI bouwt autonoom in je Editor Window
Wat je live ziet:
- In Editor Window: Cmd+L — chat opent rechts
- Bovenaan chat: mode-selector → kies "Agent"
- Typ de hele taak: "Bouw een /about pagina met team-grid in onze huisstijl"
- Enter — agent start zelfstandig
- Cursor toont een lopende takenlijst + voortgang
- Agent edit meerdere files, runt terminal-commando's (vraagt vooraf), kan web browsen
- Geen limiet op het aantal tool-calls per taak
- Aan het einde: samenvatting → Keep / Accept all of per file
Wanneer kies je dit:
- Grotere feature die meerdere files raakt
- Refactors, nieuwe pagina's, API-routes opzetten
- Je vertrouwt het plan en hebt tijd om aan het eind te reviewen
Visual: chat-paneel met mode-dropdown + lopende takenlijst.
Slide 15: Background agents — stap voor stap
Cloud-based async — in Agents Window
Wat het is:
- Async agents die in geïsoleerde cloud VMs draaien
- Werken parallel in eigen Git branches
- Beheer via Agents Window (Cmd+Shift+N) of
cursor.com/agents
Hoe een agent aanmaken:
- Cmd+Shift+N → naar Agents Window
- Klik "New agent" (of
+in de kop) - Kies environment: local / cloud / remote SSH
- Beschrijf de taak — specifiek, alsof het een ticket is
- Optioneel: kies branch-naam (
feature/about) - Klik "Start"
- Agent draait → je kunt switchen terug naar Editor Window en doorwerken
Hoe je resultaten ophaalt:
- Cmd+Shift+N terug naar Agents Window
- Klare agents staan op "Done" in de agents-lijst
- Klik agent → zie diff + commit message + uitgevoerde stappen
- "Open in PR" → automatische PR op GitHub
- Vercel maakt preview-URL → review → merge
Wanneer: 2–4 parallelle features, lange refactors die je niet wilt babysitten, of taken die je triggert vanuit je telefoon / Slack / Linear.
Visual: Agents Window screenshot met agents-lijst.
Slide 16: Context — @-mentions
Hoe Cursor je codebase begrijpt
Wat je kunt taggen in chat:
| Tag | Betekenis |
|---|---|
@file:foo.tsx |
specifiek bestand |
@folder:components |
hele map |
@code:functionName |
losse functie/class |
@docs |
externe documentatie |
@web |
live web-search |
@git |
git history / blame |
@recommended |
Cursor's eigen suggestie |
Voorbeeld: "Refactor @file:UserCard.tsx zodat het @code:useUser uit @folder:hooks gebruikt"
Visual: chat-bubble met meerdere @-tags highlighted.
Slide 17: Cursor Rules
Per-project instructies aan de AI
Wat zijn rules:
- Markdown-bestanden in
.cursor/rules/ - Worden aan ELKE prompt toegevoegd als systeem-instructie
- Per-bestand-glob: alleen actief op matching bestanden
Voorbeeld .cursor/rules/general.mdc:
---
description: Algemene project-conventies
alwaysApply: true
---
- Gebruik TypeScript strict mode
- Tailwind voor styling — geen CSS modules
- Server components by default; "use client" alleen waar nodig
- Imports: gebruik @/ alias voor src/
- Geen any-types
Visual: mappenstructuur met .cursor/rules/ uitgevouwen.
Slide 18: Project context — AGENTS.md
High-level documentatie voor AI
Naast Cursor Rules:
AGENTS.mdofPROJECT.mdin repo root- Beschrijft architectuur, conventies, "hoe wij hier dingen doen"
- Cursor + Claude Code + GitHub Copilot lezen dit alle drie
Wat erin staat:
- Tech stack + waarom die keuzes
- Belangrijke patronen (auth flow, error handling, etc.)
- Hoe testen, hoe lokaal runnen, hoe deployen
- Pointers naar belangrijke bestanden
Effect: AI begrijpt je codebase in plaats van wilde gokken te doen.
Visual: AGENTS.md structuur als outline.
Slide 19: Tips & Tricks
Wat Cursor-power-users doen
De top 7:
- Cmd+I voor Composer met multi-file context
- @-everything aanvullen — Cursor onthoudt context per chat
- Plan + Apply per stap — niet alles tegelijk accepteren
alwaysApply: falseRules voor opt-in conventies- Auto-mode — Cursor kiest beste model per taak
- Diff-preview vóór accept — Cmd+Shift+Enter
- Notepads — herbruikbare prompt-snippets per project
Anti-pattern: alles in één gigantische chat dumpen. Hou chats focused.
Visual: tips als badges met nummering.
Slide 20: De feature-workflow
Hoe één feature van idee naar preview-URL gaat
Vijf stappen die we live doen:
- Plan in Cursor: beschrijf de feature
- Branch:
git checkout -b feature/x(Cursor kan dit ook) - Build: laat Cursor de code schrijven
- Commit + push → Vercel start automatisch een preview-deploy
- Open preview-URL → test, geef feedback, itereer
Cyclus duurt ±10 minuten per feature. Inclusief AI denkwerk.
Visual: circulair diagram met de 5 stappen.
Slide 21: Live demo 1 — Hero section
Plan → Build via Cursor Chat
Wat ik demonstreer:
- Nieuwe branch:
git checkout -b feature/hero - Cursor Chat: "Plan een hero-section voor de homepage. Gradient achtergrond, een grote titel, ondertitel, twee CTA-knoppen."
- Plan bekijken → Apply
- Inline tweaks via Cmd+K voor finetuning
git add . && git commit -m "feat: hero section"
Visual: screenshot van Cursor met Plan-output.
Slide 22: Push → preview-URL
Vercel doet de rest
git push -u origin feature/hero
Binnen 30–60 seconden:
- Vercel start build
- Preview-URL verschijnt
- (Als er een PR open is) Vercel-bot plakt URL onder de PR
Open de preview-URL: je nieuwe hero section staat live, gedeeld met iedereen die de link heeft.
Visual: Vercel build-progress screen.
Slide 23: Live demo 2 — About page (background agent)
Parallel werken
Wat ik demonstreer:
- Nieuwe branch:
git checkout -b feature/about - Cursor → "Open background agent: bouw een /about pagina met team-leden in een grid. Gebruik onze hero-section als stijlreferentie."
- Agent gaat in eigen tab aan de slag
- Ik blijf in main editor verder werken
- Agent meldt zich klaar → review diff → apply
- Commit + push → tweede preview-URL
Effect: twee features tegelijk, beide met eigen preview.
Visual: twee preview-URLs naast elkaar.
Slide 24: PR mergen → productie
De cyclus afsluiten
Op GitHub:
- Beide branches → PR's openen
- Reviewen in preview-URL's
- Mergen naar
main - Vercel detecteert merge → bouwt productie-deploy
- Productie-URL update vanzelf
Mentaliteit: main is altijd deploy-baar. Feature branches zijn experimenteerruimte.
Visual: PR-pagina met "Merge" knop gemarkeerd.
Slide 25: Recap
Wat we vandaag hebben gedaan
- Vers Next.js project gescaffold met
npx - Git repo + push naar GitHub
- Vercel project gekoppeld + eerste deploy
- Vercel CLI: link, env pull/add
- Cursor in detail: Chat, Plan, Build, Inline, Rules, Background agents
- Twee features in eigen branches → twee preview-URL's
- PRs gemerged → productie
Wat je nu kunt: elke nieuwe app uit deze opleiding (of erbuiten) op deze manier opzetten. Cursor + Vercel zijn je standaard-werkbank.
Visual: checklist met alle stappen.
Slide 26: Nu jullie — Lesopdracht
Bouw je eigen Cursor + Vercel flow
Wat je gaat doen (in eigen tempo, ±1,5 uur):
npx create-next-app— je eigen project (kies een onderwerp dat je leuk vindt)- Push naar GitHub
- Vercel project + eerste deploy
vercel link+vercel env pull- Open in Cursor → schrijf één
.cursor/rules/general.mdc - Schrijf één
AGENTS.md - Bouw 2 features in eigen branches via Cursor (Plan → Build)
- Push beide → check preview-URL's
- Open één PR, deel beide URL's in de chat
Voor exacte stappen: Les14-Lesopdracht.pdf.
Visual: opdrachtkaart met checklist.
Slide 27: Volgende les
Wat komt eraan
Les 15 — RAG + Embeddings:
- AI antwoorden op basis van eigen documenten
- Embeddings + pgvector + context-injectie
- We bouwen een PDF Q&A-app
Voorbereiding:
- Je Next.js-app uit vandaag staat live op Vercel
- Je hebt minstens 2 PR's met preview-URL's gemerged
- Cursor draait, AGENTS.md en
.cursor/rules/zijn ingevuld
Visual: plaatje document → embedding → AI-antwoord.