79 lines
2.8 KiB
Markdown
79 lines
2.8 KiB
Markdown
# 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
|