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

1.5 KiB Raw Blame History