rubberducky/novi-lessons
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
main
novi-lessons/Les14-Cursor-Vercel-Deploy/Les14-Slide-Overzicht.md
Tim Rijkse ad8b25e70c fix: les
2026-06-17 07:15:32 +02:00

16 KiB
Raw Permalink Blame History

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:

  1. npx create-next-app — vers project
  2. Git init + push naar GitHub
  3. Vercel project koppelen → eerste deploy
  4. Vercel CLI: link, env pull/add
  5. Cursor open: Plan, Build, Context, Rules, Background agents
  6. Feature in nieuwe branch → preview-URL
  7. 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
  • .gitignore met .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:

  1. vercel.com/new → Import Git Repository
  2. Kies je mijn-portfolio repo
  3. 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 project
  • vercel env pull — productie-env-vars → .env.local
  • vercel env add / rm — vars beheren zonder dashboard
  • vercel logs — bekijk runtime logs
  • vercel --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:

  1. Cmd+Shift+N — switcht naar Editor Window (classic IDE-layout)
  2. Linker zijbalk = file explorer, midden = editor, onder = terminal
  3. Cmd+L — opent chat-paneel rechts
  4. Voor snelle inline edits: selecteer code, druk Cmd+K, beschrijf wijziging
  5. Cursor toont diff inline in de editor
  6. Accept (Tab) of Reject (Esc)
  7. Voor file-search: Cmd+P (zoals VS Code)
  8. 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:

  1. In Editor Window: Cmd+L — chat opent rechts
  2. Bovenaan chat: mode-selector → kies "Agent"
  3. Typ de hele taak: "Bouw een /about pagina met team-grid in onze huisstijl"
  4. Enter — agent start zelfstandig
  5. Cursor toont een lopende takenlijst + voortgang
  6. Agent edit meerdere files, runt terminal-commando's (vraagt vooraf), kan web browsen
  7. Geen limiet op het aantal tool-calls per taak
  8. 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:

  1. Cmd+Shift+N → naar Agents Window
  2. Klik "New agent" (of + in de kop)
  3. Kies environment: local / cloud / remote SSH
  4. Beschrijf de taak — specifiek, alsof het een ticket is
  5. Optioneel: kies branch-naam (feature/about)
  6. Klik "Start"
  7. Agent draait → je kunt switchen terug naar Editor Window en doorwerken

Hoe je resultaten ophaalt:

  1. Cmd+Shift+N terug naar Agents Window
  2. Klare agents staan op "Done" in de agents-lijst
  3. Klik agent → zie diff + commit message + uitgevoerde stappen
  4. "Open in PR" → automatische PR op GitHub
  5. 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.md of PROJECT.md in 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:

  1. Cmd+I voor Composer met multi-file context
  2. @-everything aanvullen — Cursor onthoudt context per chat
  3. Plan + Apply per stap — niet alles tegelijk accepteren
  4. alwaysApply: false Rules voor opt-in conventies
  5. Auto-mode — Cursor kiest beste model per taak
  6. Diff-preview vóór accept — Cmd+Shift+Enter
  7. 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:

  1. Plan in Cursor: beschrijf de feature
  2. Branch: git checkout -b feature/x (Cursor kan dit ook)
  3. Build: laat Cursor de code schrijven
  4. Commit + push → Vercel start automatisch een preview-deploy
  5. 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:

  1. Beide branches → PR's openen
  2. Reviewen in preview-URL's
  3. Mergen naar main
  4. Vercel detecteert merge → bouwt productie-deploy
  5. 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):

  1. npx create-next-app — je eigen project (kies een onderwerp dat je leuk vindt)
  2. Push naar GitHub
  3. Vercel project + eerste deploy
  4. vercel link + vercel env pull
  5. Open in Cursor → schrijf één .cursor/rules/general.mdc
  6. Schrijf één AGENTS.md
  7. Bouw 2 features in eigen branches via Cursor (Plan → Build)
  8. Push beide → check preview-URL's
  9. 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.

Reference in New Issue View Git Blame Copy Permalink