1.5 KiB
1.5 KiB
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