8.9 KiB
Les 3 — Lesstof
Cursor Basics
Vak: AI-Assisted Development Opleiding: NOVI Hogeschool Utrecht Vorige les: Les 2 — OpenCode Volgende les: Les 4 — TypeScript Fundamentals
Doel van deze les
Aan het einde van deze les heb je:
- Cursor geïnstalleerd en geactiveerd met je Student Plan
- Skills/Docs geconfigureerd voor Next.js, React, Tailwind
- Een werkend Next.js project opgezet via
npx create-next-app - De drie hoofdsneltoetsen (Tab / Cmd+K / Cmd+L) actief gebruikt
- Een
.cursorrules-bestand in je project - Een Hero-component, een styling-tweak en één extra feature gebouwd
- Je eerste commit naar Git gedaan
1. Wat is Cursor
Cursor is een fork van Visual Studio Code met AI als kernfeature ingebouwd. Dat betekent: alles wat je in VS Code kunt — file explorer, terminal, debugger, extensies — werkt hier ook. Het verschil: AI is geen plug-in maar een onderdeel van de editor zelf.
Werkt met meerdere modellen
Cursor laat je per chat kiezen welk AI-model je gebruikt:
- Claude (Opus, Sonnet, Haiku) — sterk in code-redenering
- GPT (4, 4o, 5) — solide allround
- Gemini (Pro, Flash) — snel en goedkoop
- Lokaal (via Ollama) — privacy en kosten-vriendelijk
Waarom relevant
- Industry-standard in AI-assisted development
- Veel vacatures noemen het expliciet
- Gratis Pro Student voor NOVI-studenten
2. Student Plan activeren
Wat krijg je
| Tier | Fast requests/maand | Premium models | Tab-completion |
|---|---|---|---|
| Free | 50 | beperkt | onbeperkt |
| Pro | 500 | volledig | onbeperkt |
| Pro Student | 500 | volledig | onbeperkt |
| Business | 1000+ | volledig | onbeperkt |
Pro Student = gewone Pro, maar gratis voor verified studenten.
Hoe activeer je
- Ga naar
cursor.com/students - Log in met je NOVI e-mailadres (niet je persoonlijke Gmail)
- SheerID verifieert je via NOVI's inschrijfsysteem (1–10 min)
- Cursor upgrade je account automatisch naar Pro Student
Verifiëren
Open Cursor → Settings (Cmd+,) → Tab General → check Account. Status moet "Pro Student" zijn.
Als het "Free" blijft: log opnieuw in via cursor.com/students en herstart Cursor.
3. Installeren
# 1. Download van cursor.com (kies je OS)
# 2. Installeer als gewone app (sleep naar Applications op Mac,
# next-next-finish op Windows)
# 3. Open Cursor → Sign in
# 4. Optioneel: importeer VS Code instellingen (klik Ja bij de prompt)
Eerste keer Cursor opent vraagt hij:
- VS Code settings importeren? Ja (theme, keybindings, extensies blijven)
- Welk model kiezen? Voor nu: laat default staan
4. Skills / Docs configureren
Cursor kan officiële framework-documentatie indexeren. Vervolgens kun je in chat schrijven @docs:Next.js en de AI antwoordt met actuele info uit die docs.
Setup
- Settings → Features → Docs
- Klik + Add new doc
- Voeg toe (één voor één):
Next.js(URL:https://nextjs.org/docs)React(URL:https://react.dev)Tailwind CSS(URL:https://tailwindcss.com/docs)
- Wacht tot indexering klaar is (1–2 min per doc)
Gebruiken
In Cmd+L (chat):
@docs:Tailwind hoe centreer ik verticaal en horizontaal met flex?
Cursor antwoordt met de juiste Tailwind-classes uit de officiële docs.
5. Eerste Next.js project
Scaffolden
cd ~/web # of waar jij je projecten houdt
npx create-next-app@latest mijn-eerste-cursor-app
Prompts:
| Vraag | Aanbevolen | Waarom |
|---|---|---|
| TypeScript? | Ja | strict typing voorkomt bugs |
| ESLint? | Ja | code-style consistency |
| Tailwind CSS? | Ja | utility-first styling |
src/ directory? |
Ja | houdt project-root schoon |
| App Router? | Ja | moderne Next.js flow |
| Turbopack? | Ja | snellere dev-builds |
Import alias @/*? |
Ja | @/components/x ipv ../../components/x |
Starten
cd mijn-eerste-cursor-app
npm run dev # → http://localhost:3000
Openen in Cursor
cursor . # opent huidige folder in Cursor
Of: File → Open Folder → kies de map.
6. De drie hoofdsneltoetsen
| Sneltoets | Functie | Kost |
|---|---|---|
| Tab | Accept AI auto-completion | Gratis |
| Cmd+K | Inline edit op selectie | 1 request |
| Cmd+L | Chat-paneel openen | 1 request |
Tab — autocomplete
Cursor analyseert je hele bestand én recente edits. Hij suggereert hele blokken code, niet alleen één woord.
Voorbeeld: typ een commentaar // render team list op een lege regel. Cursor genereert de hele component eronder. Druk Tab om te accepteren, Esc om te negeren.
Wanneer: boilerplate, herhalende patronen, voorspelbare code (CRUD, list renders).
Cmd+K — inline edit
Voor gerichte één-bestand-wijzigingen.
Stappen:
- Selecteer code (of zet cursor op een regel)
- Druk Cmd+K
- Input-balkje opent boven je code
- Typ je instructie: "converteer naar TypeScript"
- Cursor toont een diff direct in de editor
- Tab = Accept, Esc = Reject
Wanneer: variabele hernoemen, één functie refactoren, types toevoegen, commentaar uitleggen.
Cmd+L — Chat
Voor vragen en grotere taken.
Stappen:
- Druk Cmd+L — chat-paneel opent rechts
- Optioneel: gebruik
@-mentions voor context (zie volgende sectie) - Typ je vraag of taak
- Cursor antwoordt + kan diffs voorstellen
- Apply / Reject per file
Wanneer: uitleg vragen, grote multi-file taken, code-review.
7. Context via @-mentions
In Cmd+L (chat) type je @ voor een autocomplete-menu:
| Tag | Wat het doet |
|---|---|
@file:foo.tsx |
inclusief één specifiek bestand |
@folder:components |
hele map |
@code:functionName |
losse functie of class |
@docs:Next.js |
officiële Next.js docs (eerst configureren) |
@web |
live web-search |
@git |
git history / blame |
Voorbeeld:
@file:page.tsx Refactor deze component zodat hij @docs:React useReducer gebruikt in plaats van useState.
8. Request management
500 requests per maand klinkt veel, maar zonder discipline ben je er in een week doorheen.
Tips
- Combineer in 1 Cmd+L: "maak een Hero met titel, ondertitel, twee CTA-knoppen, gradient achtergrond en responsive" = één request voor een hele feature.
- Tab is gratis — gebruik het voor alles wat eenvoudig is.
- Cmd+K voor gerichte edits — niet voor "maak iets nieuws".
- Cmd+L met
@file— bespaar Cursor het zoeken naar context.
Anti-patterns
- Tien losse Cmd+K's voor één feature
- Cmd+L met te weinig context ("maak iets cools")
- Vergeten dat Tab bestaat
9. .cursorrules
Een bestand in de root van je project dat Cursor bij elke prompt meeleest.
Voorbeeld
# .cursorrules
- Gebruik TypeScript strict mode
- Tailwind voor styling, geen CSS modules
- Server components by default; "use client" alleen waar nodig
- Imports met @/ alias voor src/
- Functional components, geen classes
- Geen any-types; expliciete return types op exports
Genereren
Vraag Cursor het zelf in Cmd+L:
Maak een .cursorrules voor dit Next.js project. Focus op TypeScript strict, Tailwind, en App Router conventies.
Cursor stelt een goede basis voor. Pas aan naar smaak en commit het in je repo.
Effect
Je hoeft niet elke keer "vergeet niet TypeScript te gebruiken" in je chat te typen. Cursor weet het al.
Vooruitblik (Les 14): in nieuwere Cursor-versies is er ook een
.cursor/rules/-map met meerdere.mdc-bestanden + YAML front-matter (alwaysApply,globs). Voor nu is.cursorrulesin de root prima en simpeler.
10. Hands-on — wat je gaat bouwen
Drie kleine taken in je net gescaffolde project:
| Taak | Wat | Sneltoets |
|---|---|---|
| 1 | Hero-component (titel, subtitel, 2 CTA-knoppen, gradient, responsive) | Cmd+L |
| 2 | Styling-tweak: kleuren/spacing van de knoppen | Cmd+K |
| 3 | Extra feature naar keuze: FeatureCards / ContactForm / Footer | Cmd+L of Cmd+K |
Daarna git add . && git commit -m "first cursor build".
Exacte stappen + voorbeeldprompts: zie Les03-Lesopdracht.pdf.
11. Verder lezen
- Cursor docs —
cursor.com/docs— features, sneltoetsen, rules-syntax - Cursor changelog —
cursor.com/changelog— wat is nieuw - Next.js docs —
nextjs.org/docs - Tailwind docs —
tailwindcss.com/docs
Samenvatting
Vandaag heb je geleerd:
- Cursor is een VS Code-fork met AI ingebouwd
- Student Plan = 500 requests/maand gratis (via cursor.com/students)
- Drie sneltoetsen: Tab (gratis), Cmd+K (inline edit), Cmd+L (chat)
- Context via
@-mentions: file, folder, code, docs, web, git .cursorrulesper project voor consistente AI-output- Eerste hands-on met Hero / tweak / extra feature
Volgende les: TypeScript Fundamentals. Veel later (Les 14): Cursor 3 deep dive met Editor / Agents Window en deployment.