5.6 KiB
Les 3 — Lesopdracht
Bouw je eerste Cursor-componenten
Vak: AI-Assisted Development
Opleiding: NOVI Hogeschool Utrecht
Werkvorm: in-class, na de pauze (±75 minuten)
Status: klaar = drie components live op localhost:3000 + eerste git commit
Doel
Je gebruikt vandaag voor het eerst Cursor's drie hoofdsneltoetsen — Tab, Cmd+K en Cmd+L — om een werkende Next.js homepage te bouwen. Aan het eind heb je een Hero, een styling-tweak en één extra feature in je code, plus een eerste git commit.
Wat je nodig hebt (klaar uit de demo)
- Cursor geïnstalleerd + Pro Student actief
- Skills/Docs voor Next.js, React, Tailwind toegevoegd
- Vers Next.js-project:
mijn-eerste-cursor-app npm run devdraait oplocalhost:3000
Stappenplan
Stap 1 — .cursorrules genereren
Open Cursor in je project. Druk Cmd+L voor de chat. Plak deze prompt:
Maak een .cursorrules voor dit Next.js 16 project. Focus op:
- TypeScript strict mode
- Tailwind CSS voor styling, geen CSS modules
- Server components by default; "use client" alleen waar nodig
- @/ import alias
- Functional components
Geef alleen het bestand terug, geen extra uitleg.
Cursor geeft een bestand. Kopieer de inhoud naar een nieuw bestand .cursorrules in de root van je project. Save.
Stap 2 — Taak 1: Hero-component (via Cmd+L)
Open src/app/page.tsx. Druk Cmd+L voor de chat (nieuwe chat). Plak deze prompt:
@file:src/app/page.tsx
Vervang de huidige inhoud met een Hero-component. Specs:
- Gradient achtergrond (subtiele blauwe verloop)
- Grote titel: "Mijn Eerste Cursor App"
- Ondertitel: "Gebouwd in les 3 met Cursor"
- Twee CTA-knoppen: "Aan de slag" (primair) en "Meer info" (secundair)
- Responsive: stack op mobiel, naast elkaar op desktop
- Tailwind only, geen custom CSS
- Inline in app/page.tsx houden (geen aparte component file)
Cursor toont een diff. Bekijk de code, klik Accept all. Save. Open http://localhost:3000 in je browser.
✅ Check: je ziet je Hero. Responsive: maak browser smaller, knoppen moeten onder elkaar staan.
Stap 3 — Taak 2: Styling-tweak (via Cmd+K)
Selecteer in src/app/page.tsx de twee knoppen (de hele button- of link-blokken). Druk Cmd+K. Plak deze prompt in het balkje:
Verander de primaire knop naar een paars gradient (purple-600 naar pink-600). Maak de secundaire knop transparant met een paarse border en paarse tekst. Voeg een hover-effect toe aan beide.
Cursor toont een inline diff. Druk Tab om te accepteren. Save. Refresh browser.
✅ Check: knoppen zijn paars, hover werkt.
Stap 4 — Taak 3: Extra feature (vrije keuze)
Kies één van de drie. Gebruik Cmd+L of Cmd+K naar wat het beste past.
Optie A — FeatureCards (3 cards onder de Hero)
Voeg onder de Hero in @file:src/app/page.tsx een sectie toe met 3 feature-cards.
Per card: een emoji-icoon, een titel, een korte beschrijving.
Drie features: "Snel", "AI-powered", "Open Source".
Grid layout: 1 kolom mobiel, 3 kolommen desktop.
Tailwind styling, matched de Hero.
Optie B — ContactForm (form onderaan)
Voeg onder de Hero in @file:src/app/page.tsx een contact-form toe.
Velden: naam, e-mail, bericht (textarea).
Een submit-knop in dezelfde paarse stijl als de Hero CTAs.
Form moet er goed uitzien — max-width, padding, ronde hoeken.
"use client" gebruiken, met useState voor de velden (nog geen echte submit-logica).
Optie C — Footer (footer met links + copyright)
Voeg een Footer toe onder de hele page-inhoud in @file:src/app/page.tsx.
Drie kolommen: "Product" (3 links), "Resources" (3 links), "Contact" (e-mail + locatie).
Copyright-regel onderaan: "© 2026 Mijn Eerste Cursor App".
Matched de Hero-stijl, donkere achtergrond voor contrast.
Cursor toont diff → Accept → save → refresh.
✅ Check: je extra feature staat in de pagina, matched de Hero-stijl.
Stap 5 — Git commit
Open een terminal in Cursor (Ctrl+ ` of Terminal → New Terminal).
git init
git add .
git commit -m "first cursor build: hero + tweaks + extra feature"
Optioneel: push naar GitHub.
gh repo create mijn-eerste-cursor-app --public --source=. --push
(Vereist gh auth login.)
Op te leveren
In de chat (Teams):
- Screenshot van je
localhost:3000met Hero + extra feature zichtbaar - Korte tekst: welke optie (A/B/C) heb je gekozen voor taak 3?
- Optioneel: GitHub-URL als je hebt gepushed
Bonus — als je tijd over hebt
- Vraag Cursor om een dark/light mode toggle toe te voegen
- Probeer
@docs:Tailwindom een geavanceerde animatie te toevoegen - Voeg een tweede pagina toe (
src/app/about/page.tsx) en link ernaar vanuit de Hero - Genereer favicon + metadata via Cursor
Vastgelopen?
| Probleem | Snelle fix |
|---|---|
| Cursor reageert niet bij Cmd+L | Settings → Account: nog Pro Student? Anders opnieuw activeren |
| Tab-completion komt niet | Settings → Features → Cursor Tab → check enabled |
| Tailwind classes worden niet toegepast | Check globals.css op @tailwind base/components/utilities |
| Diff is verkeerd | Esc om te rejecten, herformuleer prompt specifieker |
@file werkt niet |
Wacht 5 sec na file aanmaken (Cursor moet indexeren) |
| Geen requests meer | Wacht op nieuwe maand, of plug je eigen OpenAI/Claude key in via Settings |
Tim loopt rond — vragen gewoon stellen.
Reflectie (na afloop)
Denk na voor jezelf:
- Hoeveel requests heb je gebruikt? (Settings → Account toont saldo)
- Welke sneltoets voelde het meest natuurlijk?
- Wanneer zou je liever zelf typen dan Cursor laten genereren?
Dat zijn de gewoontes die je deze opleiding gaat ontwikkelen.
Veel succes!