# Les 6: Next.js — QuickPoll Compleet - Docenttekst

**NOVI Hogeschool | Instructeur: Tim | Duur: 180 minuten**

---

## VOORBEREIDING

**Checklist (30 minuten voor les):**
- [ ] Demo project klaarzetten: `quickpoll-demo` uitpakken, `npm install`
- [ ] `git checkout stap-0` → startpunt
- [ ] Test: `git checkout bonus` → volledige app draait
- [ ] Terug naar `git checkout stap-0`
- [ ] Cursor openen, terminal font minimaal 16pt
- [ ] Browser met `localhost:3000` open
- [ ] **Scherm delen:** Teams → deel alleen het Cursor-venster
- [ ] Browser/notities op apart Space (voor stiekem opzoeken)
- [ ] Losse stap-zipjes als backup

**Tempo-indicatie:**
| Blok | Tijd | Inhoud |
|------|------|--------|
| Stap 0-3 (recap) | 0:00-0:40 | Project, types, layout, homepage, GET route |
| Stap 4 | 0:40-1:00 | POST vote route |
| Stap 5 | 1:00-1:15 | Poll detail pagina |
| **PAUZE** | **1:15-1:30** | |
| Stap 6 | 1:30-2:10 | VoteForm (logica + UI) |
| Stap 7 | 2:10-2:30 | Loading, Error, Not-Found |
| Stap 8 | 2:30-2:45 | Middleware |
| Afsluiting | 2:45-3:00 | Huiswerk, vragen |

---

## STAP 0-3: RECAP (0:00-0:40)

*Dit gaat snel — studenten kennen het al. Doel: iedereen op hetzelfde punt krijgen.*

### Slide 1: Titel + Plan (0:00-0:02)

> "Welkom terug! Vorige les hebben jullie kennis gemaakt met Next.js. Vandaag bouwen we de hele QuickPoll app van scratch tot werkend."

> "Ik code, jullie volgen mee. Stap 0-3 kennen jullie — dat gaat snel. Stap 4-8 is nieuw, daar nemen we de tijd voor."

---

### Slide 2: Stap 0 — Project Aanmaken (0:02-0:07)

*Tim opent terminal.*

> "Stap 0: `npx create-next-app@latest quickpoll`. TypeScript, Tailwind, App Router — alles yes."

*Tim wacht tot iedereen `npm run dev` draait.*

> "Zie je de Next.js standaard pagina? Door."

**⚡ Snelheid:** Studenten die dit al hebben kunnen alvast door naar stap 1.

---

### Slide 3: Stap 1 — Types & Data (0:07-0:15)

> "Twee bestanden: `src/types/index.ts` met de Poll interface, en `src/lib/data.ts` met onze in-memory database."

*Tim typt de interface.*

> "Een poll: id, question, options, votes. De votes array loopt parallel met options — index 0 van votes hoort bij index 0 van options."

*Tim typt data.ts.*

> "Drie helper functies: getPolls, getPollById, votePoll. Dit is onze 'database' — later vervangen we dit door Supabase."

*Checkpoint: "Beide bestanden staan er? Door."*

---

### Slide 4: Stap 2 — Layout (0:15-0:22)

> "De layout wrapt elke pagina. Navbar, main content, footer. Verandert nooit."

*Tim vervangt layout.tsx.*

> "`Link` is Next.js client-side navigatie — geen page reload. `metadata` is je SEO titel."

**⚡ Tip:** Niet te lang stilstaan, dit kennen ze.

---

### Slide 5: Stap 2 vervolg — Homepage (0:22-0:30)

> "De homepage: een Server Component die alle polls ophaalt en cards rendert."

*Tim vervangt page.tsx.*

> "Geen `'use client'`, geen useEffect, geen loading state. Server Component haalt data direct op. Dat is het voordeel."

> "De `.map()` rendert een card per poll. `.reduce()` telt totaal stemmen."

*Checkpoint: "3 cards op localhost:3000? Mooi."*

---

### Slide 6: Stap 3 — GET API Route (0:30-0:40)

> "Onze eerste API route. De folder-structuur IS je URL: `api/polls/[id]/route.ts` wordt `/api/polls/1`."

*Tim maakt het bestand.*

> "Dynamic route: `[id]` met vierkante haakjes. De waarde uit de URL wordt de `id` parameter."

> "`await params` — Next.js 15 ding. Params zijn een Promise. Vergeet de await niet."

*Tim test in browser: localhost:3000/api/polls/1.*

> "JSON! Test ook `/api/polls/999` — 404. Mooi, recap klaar. Nu het nieuwe werk."

---

## STAP 4-5: NIEUW MATERIAAL DEEL 1 (0:40-1:15)

### Slide 7: Stap 4 — POST Vote Route (0:40-1:00)

**💡 Theorie-moment: POST vs GET**

> "GET leest data, POST wijzigt data. Het patroon voor elke POST route: params, body, validatie, actie, response. Vijf stappen, altijd."

*Tim maakt src/app/api/polls/[id]/vote/route.ts.*

> "Nieuwe folder: `vote/` in de `[id]/` folder. Zo krijg je `/api/polls/1/vote`."

*Tim typt de code langzaam.*

> "`request.json()` leest de body — wat de client stuurt. Hier: welke optie."

> "Twee error checks: 400 als data ongeldig, 404 als poll niet bestaat. Altijd beide."

*Tim opent browser console, test met fetch.*

> "Plak dit in je console. Zie je? Votes veranderd in de JSON. Onze stem-API werkt."

*Checkpoint: "Heeft iedereen JSON in de console? Mooi."*

---

### Slide 8: Stap 5 — Poll Detail Pagina (1:00-1:15)

**💡 Theorie-moment: generateMetadata & notFound**

> "`generateMetadata` — speciale Next.js functie voor dynamische SEO. Elke poll krijgt z'n eigen browser tab titel."

> "`notFound()` — roep je aan als data niet bestaat. Next.js toont automatisch de 404 pagina."

*Tim maakt src/app/poll/[id]/page.tsx.*

> "Dit is de combinatie: Server Component haalt data, rendert Client Component (`VoteForm`). Server = data, client = interactie."

> "We importeren VoteForm maar die bestaat nog niet — dat bouwen we na de pauze."

*Checkpoint: "/poll/1 geeft een error — dat klopt, VoteForm bestaat nog niet."*

---

## PAUZE (1:15-1:30)

### Slide 9: Pauze

> "Pauze! 15 minuten. Stap 0-5 staan er. Na de pauze bouwen we het interactieve hart: de VoteForm."

*Tim loopt rond en helpt studenten die achterlopen.*

---

## STAP 6: VOTEFORM (1:30-2:10)

*Dit is het langste en lastigste stuk. Neem de tijd.*

### Slide 10: Stap 6 deel 1 — Logica (1:30-1:50)

**💡 Theorie-moment: Client Components & useState**

> "`'use client'` bovenaan — dit component draait in de browser. Alles met useState, onClick, of interactiviteit MOET een Client Component zijn."

*Tim maakt src/components/VoteForm.tsx.*

> "Vier states."

*Tim typt elke state en legt uit.*

> "`selectedOption: number | null` — null want er kan nog niks geselecteerd zijn."
> "`hasVoted: boolean` — toggle na stemmen."
> "`isSubmitting: boolean` — voorkom dubbel klikken."
> "`currentPoll: Poll` — de actuele data, updated na stemmen."

*Checkpoint: "Heeft iedereen de vier useState regels?"*

*Tim typt handleVote.*

> "De handleVote functie: dezelfde fetch als in de console bij stap 4. POST naar de API, update state als het lukt."

*Checkpoint: "Tot hier mee?"*

---

### Slide 11: Stap 6 deel 2 — UI (1:50-2:10)

*Tim typt de JSX rustig, stopt na elk blok.*

> "De UI heeft twee toestanden. Vóór stemmen: selecteer een optie. Na stemmen: percentage bars."

*Tim typt de map over options.*

> "Elke optie is een button. onClick selecteert de optie — maar alleen als je nog niet gestemd hebt."

> "De conditional classes: `isSelected ? 'border-purple-500' : 'border-gray-200'`. Ternary operators in className — zo style je conditioneel in Tailwind."

*Tim typt de percentage bar.*

> "De percentage bar: een div met `absolute inset-0`, breedte is percentage, `transition-all duration-500` animeert. Pure CSS."

*Tim typt stem-knop en bedankt-bericht.*

> "Stem-knop verdwijnt na stemmen. Bedankt-bericht verschijnt. Allebei conditional rendering met `hasVoted`."

*Tim test: localhost:3000/poll/1 → klik optie → stem.*

> "Werkt het? Klik een optie, klik Stem, zie de animatie!"

*Tim loopt rond en helpt. **Neem hier 10-15 min extra als nodig.** Dit is het lastigste stuk.*

**Waar lopen studenten vast?**
- `"use client"` vergeten → crash
- `selectedOption` niet nullable (`number` i.p.v. `number | null`)
- Fetch URL zonder backticks (template literal)
- Tailwind class typos
- Vergeten om het bestand op te slaan

**Snelle fix:** "Check je terminal — TypeScript error? Heb je `'use client'` bovenaan?"

---

## STAP 7-8: FINISHING TOUCHES (2:10-2:45)

### Slide 12: Stap 7 — Loading, Error & Not-Found (2:10-2:30)

**💡 Theorie-moment: Speciale bestanden**

> "In gewoon React bouw je dit zelf. In Next.js: maak een bestand aan en het werkt."

*Tim maakt loading.tsx.*

> "Skeleton loading. `animate-pulse` — Tailwind class. Vijf regels, professioneel resultaat."

*Tim maakt error.tsx.*

> "Error boundary. **`'use client'` is verplicht!** Error boundaries draaien altijd in de browser. `reset` herlaadt het gefaalde component."

*Tim maakt not-found.tsx.*

> "404 pagina. Test: `/poll/999`. Daar is 'm. Werkt door `notFound()` in de poll pagina."

*Checkpoint: "Alle drie aangemaakt en werkend?"*

---

### Slide 13: Stap 8 — Middleware (2:30-2:45)

**💡 Theorie-moment: Middleware**

> "Middleware is een portier. Elke request passeert hier eerst."

*Tim maakt src/middleware.ts.*

> "Let op de locatie: `src/middleware.ts`. Niet in `app/`, niet in een subfolder. Dit is het enige bestand waar de locatie uitmaakt."

> "De `matcher` bepaalt welke routes het raakt. API routes en poll pagina's — de homepage skipt het."

> "Open je terminal. Klik op een poll. Zie je `[GET] /poll/1`? Dat is middleware in actie."

> "Nu loggen we alleen. Bij Supabase wordt dit authenticatie: is de user ingelogd? Zo niet, redirect."

*Checkpoint: "Logs in je terminal? App compleet!"*

---

## AFSLUITING (2:45-3:00)

### Slide 14: Huiswerk & Afsluiting

> "Wat hebben we vandaag gedaan? De hele QuickPoll app van scratch: types, layout, homepage, API routes, detail pagina, VoteForm met animaties, loading states, middleware."

> "De Next.js flow: Route → Page → Client Component → API Route → Response. Dat is het hele framework in één zin."

> "Huiswerk: app niet af? Afmaken. Wel af? Probeer de bonus: een '/create' pagina met een form en POST naar `/api/polls`."

> "Volgende les: Tailwind CSS en shadcn/ui. Dan geven we QuickPoll een styling upgrade."

> "In één les van nul naar werkende app. Goed gedaan!"

---

## POST-SESSIE

**Na afloop checken:**
- [ ] Hoeveel studenten hebben werkende VoteForm?
- [ ] Was het tempo goed? (stap 0-3 snel genoeg, stap 4-8 genoeg tijd?)
- [ ] Terugkerende problemen notieren voor v2
- [ ] Was van-scratch beter dan doorgaan waar Les 5 stopte?