novi-lessons/Les14-Cursor-Vercel-Deploy/Les14-Lesopdracht.md

Les 14 — Lesopdracht

Bouw je eigen Cursor + Vercel flow

Vak: AI-Assisted Development Opleiding: NOVI Hogeschool Utrecht Werkvorm: zelfstandig na de pauze (±1,5 uur) Status: klaar = productie-URL + PR-URL in de chat delen

---

Doel

Je doorloopt de hele cyclus die in de demo is gedaan, maar nu voor je eigen project. Aan het einde heb je een live Next.js-app op Vercel, twee features in eigen branches met preview-URLs, en één Pull Request gemerged naar productie.

---

Wat je nodig hebt

• GitHub-account + gh CLI ingelogd (gh auth login)
• Vercel-account + CLI (npm i -g vercel && vercel login)
• Cursor (Pro of Business) ingelogd

---

Stappenplan

Stap 1 — Project scaffolden

cd ~/web   # of waar jij je projecten houdt
npx create-next-app@latest mijn-portfolio

Beantwoord de prompts:

• TypeScript: Ja
• ESLint: Ja
• Tailwind CSS: Ja
• src/ directory: Ja
• App Router: Ja
• Turbopack: Ja
• Import alias: @/*

cd mijn-portfolio
npm run dev

Open http://localhost:3000 en check dat het werkt.

Stap 2 — Naar GitHub

git init
git add .
git commit -m "init"
git branch -M main

gh repo create mijn-portfolio --public --source=. --push

Check op github.com dat je code er staat. Controleer dat .env.local NIET in de commit zit.

Stap 3 — Vercel project aanmaken

1. Ga naar vercel.com/new
2. Klik Import Git Repository
3. Kies mijn-portfolio
4. Framework: Next.js (auto-detect)
5. Klik Deploy

Wacht ±45 seconden. Open de productie-URL in een nieuw tabblad.

Stap 4 — Vercel CLI koppelen

cd mijn-portfolio
vercel link
# kies scope (je persoonlijke) en project (mijn-portfolio)

vercel env pull .env.local
# trekt eventuele env vars (nu nog leeg)

vercel env ls
# zie wat er staat

Stap 5 — Cursor configureren

Open je project in Cursor. Maak twee bestanden aan:

.cursor/rules/general.mdc:

---
description: Algemene project-conventies voor mijn-portfolio
alwaysApply: true
---

- Gebruik TypeScript strict mode
- Geen any-types
- Tailwind voor styling — geen CSS modules
- Server components by default; "use client" alleen waar nodig
- Imports met @/ alias

AGENTS.md in repo-root:

# Mijn Portfolio — Project Guide

## Stack
- Next.js 16 (App Router)
- TypeScript strict
- Tailwind CSS v4
- Vercel hosting

## Conventies
- Server components by default
- "use client" alleen voor interactie
- @/ alias verwijst naar src/

## Lokaal draaien
\`\`\`bash
npm install
vercel env pull .env.local
npm run dev
\`\`\`

## Deploy
- Productie: merge naar main → Vercel deploy't automatisch
- Preview: push naar feature branch → eigen preview-URL

git add .cursor AGENTS.md
git commit -m "chore: cursor rules + agents.md"
git push

Stap 6 — Feature 1: Hero section

git checkout -b feature/hero

In Cursor (Chat + Plan mode):

Plan een hero-section voor de homepage. Specs:
- Gradient achtergrond (subtiel)
- Grote titel (jouw naam)
- Ondertitel (jouw rol)
- Twee CTA-knoppen: een primaire en een secundaire
- Responsive
- Tailwind, geen custom CSS

Wacht op het plan → Apply. Eventueel inline tweaks (Cmd+K).

git add . && git commit -m "feat: hero section"
git push -u origin feature/hero

Check je Vercel dashboard — je preview-URL verschijnt binnen een minuut.

Stap 7 — Feature 2: About pagina (Background agent)

git checkout main
git checkout -b feature/about

In Cursor → Open background agent met deze prompt:

Bouw een /about pagina met team-leden in een grid.
- 6 team-leden (mock data)
- 1 kolom mobiel, 2 tablet, 3 desktop
- Per persoon: foto-placeholder, naam, rol, korte bio
- Stijl matched onze hero-section
- Header bovenaan: "Het team"

Terwijl de agent werkt, doe wat anders — bv. tweak je hero. Wanneer de agent klaar is, review zijn diff en apply.

git add . && git commit -m "feat: about page"
git push -u origin feature/about

Stap 8 — Pull Request openen

Op github.com (of gh pr create --fill --web):

• Open één PR (kies welke feature je eerst wilt mergen)
• Wacht tot Vercel-bot de preview-URL post als comment
• Open de preview-URL en check je feature live

Stap 9 — Mergen

Klik Merge pull request → Confirm merge.

Open je Vercel dashboard. Je productie-URL update binnen 30–60 seconden.

Stap 10 — Delen

In de chat (Teams) plak je:

• Productie-URL van je app
• PR-URL met de Vercel-bot comment zichtbaar
• Preview-URL van je tweede feature

---

Bonus — als je tijd over hebt

• Voeg een custom domein toe (Vercel → Settings → Domains)
• Schrijf een tweede .cursor/rules/-bestand met globs: ["**/*.tsx"] dat alleen op React-bestanden actief is
• Probeer @-recommended in Cursor chat
• Test of background agent ook op grotere taken werkt (bv. "voeg een contact-form toe met server action validatie")

---

Op te leveren

In de chat (Teams):

1. Productie-URL
2. PR-URL met Vercel-bot comment
3. Tweede preview-URL

---

Vastgelopen?

Probleem	Oplossing
npx create-next-app hangt	check internet, of probeer npm cache clean --force
gh: command not found	brew install gh (Mac) of winget install GitHub.cli
Vercel detecteert geen Next.js	Output dir leeg laten in import-scherm
.env.local lekt in commit	git rm --cached .env.local + check .gitignore
Cursor rules werken niet	Check YAML front-matter syntax (geen tabs gebruiken)
Background agent reageert niet	Vereist Pro of Business plan — check je Cursor-account
Preview-URL geeft 404	Build kan nog lopen — wacht 30s, check dashboard logs

Vraag in de chat als je vastloopt — ik kijk mee.

Veel succes — en wees trots: je hele cyclus is van leeg project naar live productie.