# 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