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

```bash
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: **`@/*`**

```bash
cd mijn-portfolio
npm run dev
```

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

### Stap 2 — Naar GitHub

```bash
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

```bash
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`:**

```markdown
---
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:

```markdown
# 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
```

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

### Stap 6 — Feature 1: Hero section

```bash
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).

```bash
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)

```bash
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.

```bash
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.