60 lines
1.5 KiB
Markdown
60 lines
1.5 KiB
Markdown
# Les 6: Next.js — QuickPoll Vervolg (Part 2)
|
|
|
|
---
|
|
|
|
## Hoofdstuk
|
|
**Deel 2: Technical Foundations** (Les 4-8)
|
|
|
|
## Beschrijving
|
|
Vervolg Next.js: API Routes, Middleware, Deployment. Hands-on: QuickPoll app Part 2 (stap 4-7) klassikaal afbouwen en deployen.
|
|
|
|
---
|
|
|
|
## Te Behandelen (~30-40 min)
|
|
|
|
- Recap Les 5 + Q&A
|
|
- API Route Handlers dieper: GET, POST met NextResponse, request body parsen
|
|
- Middleware: src/middleware.ts, matcher config, use cases
|
|
- Environment Variables: .env.local, NEXT_PUBLIC_ prefix
|
|
- Loading, Error, Not-Found special files
|
|
- next/image, next/link optimalisaties
|
|
- Metadata type voor SEO
|
|
- Deployment op Vercel (git push → auto deploy)
|
|
- Cursor/AI workflow: .cursorrules, Cmd+K, Cmd+L
|
|
|
|
---
|
|
|
|
## Lesopdracht (120 min, klassikaal)
|
|
|
|
### QuickPoll App Part 2 — samen met Tim
|
|
|
|
- **Stap 4:** API POST vote route (validation, votePoll)
|
|
- **Stap 5:** Poll detail pagina (server component met data)
|
|
- **Stap 6:** VoteForm (client component, fetch, results display)
|
|
- **Stap 7:** Loading, error, not-found states
|
|
- **Bonus:** Create poll pagina
|
|
- **Deploy naar Vercel**
|
|
|
|
Huiswerk: App afmaken, deployen op Vercel, bonus features
|
|
|
|
---
|
|
|
|
## Tools
|
|
- Next.js 15
|
|
- Cursor
|
|
- TypeScript
|
|
- Tailwind CSS
|
|
- Vercel
|
|
|
|
---
|
|
|
|
## Leerdoelen
|
|
|
|
Na deze les kan de student:
|
|
- API Route Handlers schrijven (GET, POST)
|
|
- Middleware implementeren
|
|
- Environment variables gebruiken
|
|
- Special files (loading, error, not-found) toepassen
|
|
- Een Next.js app deployen op Vercel
|
|
- Cursor/AI workflow toepassen
|