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

> ✅ **Deze les is volledig uitgewerkt**

## Lesmateriaal

- [Slide Overzicht](../Les14-Cursor-Vercel-Deploy/Les14-Slide-Overzicht.md)
- [Docenttekst](../Les14-Cursor-Vercel-Deploy/Les14-Docenttekst.md)
- [Docenttekst Autocue](../Les14-Cursor-Vercel-Deploy/Les14-Docenttekst-Autocue.md)
- [Lesstof](../Les14-Cursor-Vercel-Deploy/Les14-Lesstof.md)
- [Lesopdracht](../Les14-Cursor-Vercel-Deploy/Les14-Lesopdracht.md)

---

## 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:
1. `npx create-next-app` — eigen onderwerp
2. Push naar eigen GitHub
3. Vercel project + eerste deploy
4. `vercel link` + `vercel env pull`
5. `.cursor/rules/general.mdc` + `AGENTS.md`
6. Feature 1 via Plan + Build
7. Feature 2 via Background agent
8. 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