Les 14: Cursor + Vercel — van leeg project naar preview-deploys

✅ Deze les is volledig uitgewerkt

Lesmateriaal

Deel

Deel 3 — AI Development (Les 11-16)

Beschrijving

Online les via Teams. Tim demonstreert live de hele cyclus van een vers npx create-next-app project naar een live Vercel-deployment, met Cursor als bouwpartner. We gaan diep op Cursor's features: Chat, Plan, Build, Inline edit, Rules, AGENTS.md, en Background agents. Twee features worden in eigen branches gebouwd, elk met preview-URL.

Te Behandelen

Theorie + live demo

Scaffolden met npx create-next-app (alle prompts uitgelegd)
Git init + GitHub push (via gh CLI)
Vercel project koppelen — productie + preview URLs
Vercel CLI — link, env pull, env add/rm, logs
Environment variables — drie environments, NEXT_PUBLIC_ prefix
Cursor in detail:
- Vier modi: Chat / Plan / Build / Inline
- Context: @-mentions (file, folder, code, docs, web, git)
- .cursor/rules/ met YAML front-matter
- AGENTS.md als shared project-context
- Background agents (Kanban-flow)
- Top 7 power-user tips
Feature-workflow: plan → branch → build → push → preview
Twee live demo's: hero (plan+build) en about (background agent)

Tools

Next.js 16 (App Router)
Git + GitHub CLI (gh)
Vercel (hobby tier + CLI)
Cursor (Pro of Business)

Lesopdracht (na de pauze, ±1,5 uur)

Studenten doorlopen de hele cyclus voor hun eigen project:

npx create-next-app — eigen onderwerp
Push naar eigen GitHub
Vercel project + eerste deploy
vercel link + vercel env pull
.cursor/rules/general.mdc + AGENTS.md
Feature 1 via Plan + Build
Feature 2 via Background agent
PR + merge naar productie

Inleveren: productie-URL + tweede preview-URL + PR-URL in de chat.

Leerdoelen

Na deze les kan de student:

Een Next.js project scaffolden met create-next-app en zinnige defaults kiezen
Een lokale repo aan GitHub koppelen (via gh CLI of handmatig)
Een Vercel-project aanmaken via GitHub-import
Het verschil uitleggen tussen NEXT_PUBLIC_ en server-only env vars
Env vars zetten via Vercel UI én via Vercel CLI
De Cursor CLI link + env pull workflow uitvoeren
Cursor's vier interactie-modi inzetten op de juiste momenten
Een .cursor/rules/general.mdc en een AGENTS.md schrijven voor zijn project
Een Background agent inzetten voor parallel werk
Een feature van Plan tot live preview-URL brengen in onder de 15 minuten

2.8 KiB Raw Blame History