59 lines
1.5 KiB
Markdown
59 lines
1.5 KiB
Markdown
# Les 5: Next.js — Het React Framework (Part 1)
|
|
|
|
---
|
|
|
|
## Hoofdstuk
|
|
**Deel 2: Technical Foundations** (Les 4-8)
|
|
|
|
## Beschrijving
|
|
Introductie Next.js voor React developers. App Router, routing, server/client components, data fetching. Hands-on: QuickPoll app Part 1 (stap 0-3) klassikaal bouwen.
|
|
|
|
---
|
|
|
|
## Te Behandelen (~45 min theorie)
|
|
|
|
- Waarom Next.js? React is een library, Next.js is het framework
|
|
- Create-next-app setup met TypeScript + Tailwind
|
|
- App Router: folder-based routing (page.tsx = route)
|
|
- Layouts: root layout, nested layouts
|
|
- Dynamic Routes: [id] met Promise-based params (Next.js 15)
|
|
- Server Components vs Client Components
|
|
- "use client" directive
|
|
- Data Fetching in async Server Components
|
|
- Server Actions introductie ("use server")
|
|
- Route Groups ((marketing))
|
|
- Project structuur best practices
|
|
|
|
---
|
|
|
|
## Lesopdracht (120 min, klassikaal)
|
|
|
|
### QuickPoll App Part 1 — samen met Tim
|
|
|
|
- **Stap 0:** Setup (create-next-app, npm install, dev server)
|
|
- **Stap 1:** Layout met navigatie (Tailwind styling)
|
|
- **Stap 2:** Homepage met polls lijst (server component)
|
|
- **Stap 3:** API route GET single poll (dynamic route, 404 handling)
|
|
|
|
Huiswerk: Stap 0-3 zelfstandig afmaken
|
|
|
|
---
|
|
|
|
## Tools
|
|
- Next.js 15
|
|
- Cursor
|
|
- TypeScript
|
|
- Tailwind CSS
|
|
|
|
---
|
|
|
|
## Leerdoelen
|
|
|
|
Na deze les kan de student:
|
|
- Uitleggen wat Next.js toevoegt aan React
|
|
- Een Next.js project opzetten met App Router
|
|
- Verschil tussen Server en Client Components
|
|
- File-based routing gebruiken
|
|
- Dynamic routes met parameters maken
|
|
- Data fetchen in Server Components
|