rubberducky/novi-lessons

Fork 0

Files

Tim Rijkse 9ffdecf2c4 fix: les 6

2026-03-11 14:07:00 +01:00

21 KiB

Raw Permalink Blame History

Les 05: Next.js — Het React Framework - Docenttekst

NOVI Hogeschool | Instructeur: Tim | Duur: 180 minuten

VOORBEREIDING

Checklist voor Tim (30 minuten voor les):

Cursor openen en create-next-app commando klaar hebben
Terminal groot genoeg zodat klas kan zien (terminal font minimaal 16pt)
Browser met localhost:3000 open
Vercel account ingelogd (voorbeeldproject gereed)
.cursorrules bestand voorbereid
Slides open in presentatiemodus
WiFi stabiel en npm packages cached
Backup laptop met dezelfde setup klaar (plan B)

Hardware check:

HDMI/USB-C verbinding stabiel
Scherm groot genoeg voor klas (10+ personen)
Audio werkt (voor eventuele demo video's)

BLOK 1: HET PROBLEEM & DE OPLOSSING (0:00-0:20)

Slide 1: Titel

Tijd: 0:00-0:02

Tim staat op, enthousiastisch, maakt oogcontact met de klas

"Welkom bij Les 5! De afgelopen weken hebben jullie HTML, CSS, JavaScript, en TypeScript geleerd. Vandaag maken we een grote stap: we gaan van losse technologieën naar een echt framework. Next.js."

Tim loopt even heen en weer

"Na vandaag kun je een complete webapplicatie bouwen. Met routing, API's, middleware — alles. En het mooiste? Het is gebouwd op React, dus alles wat je al kent werkt gewoon."

Tim duim enthousiast met twee duimen omhoog

Slide 2: Planning Vandaag

Tijd: 0:02-0:05

Tim wijst naar het scherm met een pointer

"Dit is het plan. Eerst: waarom zou je Next.js gebruiken? Wat mist er in gewoon React? Dan duiken we in routing en project structuur — hoe organiseer je een Next.js app. Daarna TypeScript in Next.js, server en client components, en hoe je data ophaalt."

Tim loopt langs de slide

"In het laatste blok: API routes, middleware, environment variables, hoe je deployed op Vercel, en Cursor workflow. Flink programma, maar het is allemaal praktisch."

Tim klapt in handen

"Na de pauze gaan we SAMEN de setup doen. Ik loop het voor, jullie volgen mee. Zo heeft iedereen een werkend project staan. Daarna gaan jullie zelfstandig verder bouwen."

Tim knikt stellig

Slide 3: Terugblik Les 4 — TypeScript

Tijd: 0:05-0:08

Tim leunt tegen het bureau

"Vorige week hebben jullie TypeScript geleerd. Types, interfaces, unions, narrowing — en natuurlijk die escaperoom. Wie heeft alle 10 kamers gehaald?"

Tim steekt hand op, kijkt rond

"Nice. Die TypeScript kennis gaan we vandaag direct gebruiken. Next.js is volledig TypeScript-first. Alles wat je schrijft in Next.js is getypt. Dus jullie zijn al voorbereid."

Tim wijst naar zijn hoofd

"Je hebt het juiste mental model al."

Slide 4: Het Probleem met Pure React

Tijd: 0:08-0:14

Tim opent Cursor, navigeert naar een browser

"Oké, stel je voor: je bouwt een webshop met React. Klanten moeten producten kunnen vinden via URL — /products/laptop. Je wilt dat Google de shop indexeert. Je wilt snelle laadtijden. Je wilt een API backend."

Tim telt op zijn vingers

"React kan pagina's renderen. Maar routing? React-router nodig. Server-side rendering? Niet standaard. API? Aparte Express server. Images optimaliseren? Extra library. En alles moet je zelf configureren."

Tim doet alsof hij achter een puinhoop zit

"Je bent meer bezig met setup dan met je app bouwen. Dat is het probleem."

Slide 5: Next.js = Het React Framework

Tijd: 0:14-0:18

Tim opent de slide met Next.js logo's

"Next.js pakt al die problemen en lost ze op in één framework. Routing? Maak een folder. API? Maak een route.ts bestand. Server-side rendering? Standaard aan. TypeScript? Zero configuratie."

Tim slaat op het bureau voor nadruk

"Het is gemaakt door Vercel — dat is ook een hosting platform. Dus van development tot deployment zit het allemaal erin."

Tim kijkt direct naar de klas

"En het belangrijkste: Next.js is gebouwd OP React. Je schrijft gewoon React components. useState, useEffect, JSX — alles wat je kent werkt gewoon. Next.js voegt er alleen superkrachten aan toe."

Slide 6: Wie Gebruikt Next.js?

Tijd: 0:18-0:20

Tim toont een logo wall op het scherm

"Netflix, TikTok, Nike, Notion — ze vertrouwen op Next.js. Waarom? Performance, SEO, developer experience. Snel itereren, snel deployen."

Tim wijst naar de logos

"Als jullie straks solliciteren en Next.js op je CV staat, dan weten bedrijven: die kan een complete webapplicatie bouwen."

BLOK 2: APP ROUTER & PROJECT STRUCTUUR (0:20-0:40)

Slide 7: create-next-app (Live Demo)

Tijd: 0:20-0:28

Tim opent Terminal in Cursor, groot zichtbaar voor de klas

"Laten we het meteen proberen. Ik typ dit commando."

Tim typt langzaam: npx create-next-app@latest demo-app

Wacht tot het begint en loopt door opties

"TypeScript? Ja, Les 4 was niet voor niks. Tailwind? Ja, maakt styling makkelijker. App Router? Ja — dat is modern. Src directory? Ja, houdt je code netjes."

Tim wacht totdat het installeert, ongeveer 30 seconden

"Nu: cd demo-app && npm run dev. Boem. Werkende app."

Tim opent browser op localhost:3000

"Dat is alles. Geen webpack config, geen babel setup. Het werkt gewoon. Dit is Next.js."

Tim toont de default welcome page

Slide 8: App Router — Folder = Route

Tijd: 0:28-0:32

Tim toont de slide met de gouden regel

"Dit is het meest elegante aan Next.js. De gouden regel: elke folder in app/ is een route. Wil je een /about pagina? Maak een about folder met een page.tsx erin."

Tim maakt live in zijn project een nieuwe folder about/page.tsx aan

"En klaar. Geen router config, geen complexe imports. Folder = route."

Tim navigeert in browser naar /about en toont dat het werkt

"En nesting werkt hetzelfde. Dashboard met settings subpagina? dashboard/settings/page.tsx. Next.js snapt automatisch de structuur."

Slide 9: Speciale Bestanden

Tijd: 0:32-0:35

Tim wijst naar de slide

"Next.js heeft speciale bestanden. page.tsx — dat is je pagina. layout.tsx — dat is je wrapper. loading.tsx — loading spinner. error.tsx — error handler. route.ts — API endpoint."

Tim opent de file explorer en wijst files aan

"Wat heel krachtig is: layouts nesten. Je root layout heeft een navbar. Je blog layout voegt een sidebar toe. Alles composeert vanzelf."

Slide 10: Layouts in Actie

Tijd: 0:35-0:38

Tim toont de code slide met RootLayout

"Kijk. De root layout wraps alles. Elke pagina krijgt deze nav en footer. En het mooie: als je navigeert, wordt de layout NIET opnieuw gerenderd. Alleen de children wisselt."

Tim highlight de children prop

"En Metadata? Dat is type-safe SEO. Title, description, Open Graph — alles is getypt."

Slide 11: Dynamic Routes

Tijd: 0:38-0:41

Tim wijst naar vierkante haken op de slide

"Stel je hebt een blog met 100 posts. Je gaat geen 100 folders aanmaken. Je maakt één folder met vierkante haken: [slug]. Dat is een variabele."

Tim maakt een blog/[slug]/page.tsx folder aan

"Alles wat je in de URL typt wordt beschikbaar als parameter. /blog/mijn-eerste-post — slug is mijn-eerste-post."

Tim loopt de TypeScript typing uit

"En weer TypeScript. params is een Promise. Dat is Next.js 15. Je await't params en dan heb je slug."

Slide 12: Route Groups

Tijd: 0:41-0:44

Tim toont de slide met ronde haken

"Route Groups met ronde haken. (marketing) en (dashboard). Ze verschijnen NIET in de URL — het is puur organisatie."

Tim maakt folders aan met ronde haken

"Dus (marketing)/about/page.tsx wordt gewoon /about. En elk group kan zijn eigen layout hebben. Marketing met hero en footer, dashboard met sidebar."

Tim knikt

"Hoe grote Next.js apps georganiseerd zijn."

Slide 13: Project Structuur Best Practices

Tijd: 0:44-0:47

Tim toont de folder tree

"Hier is hoe je een project organiseert. app/ is ALLEEN voor routing — geen componenten. Componenten gaan in components/. Types in types/. Business logic in lib/."

Tim wijst naar elk onderdeel

"Dit is geen harde regel van Next.js. Maar het is wel de conventie. Als je in een team werkt, weet iedereen meteen waar dingen staan."

BLOK 3: TYPESCRIPT, COMPONENTS & DATA (0:47-1:07)

Slide 14: TypeScript in Next.js

Tijd: 0:47-0:52

Tim toont de code met PageProps

"Hier komt Les 4 echt samen. Alles in Next.js is getypt. Page props? Getypt. API request bodies? Getypt."

Tim highlight de interface

"We definiëren een PageProps interface met params en searchParams. Beiden zijn Promises. SearchParams kan optioneel query en page bevatten — die vraagtekens zijn optional syntax."

Tim tipt op het scherm

"Nu weet TypeScript precies wat er binnenkomt. Typ je body.titel in plaats van body.question, krijg je direct rood."

Slide 15: Server Components vs Client Components

Tijd: 0:52-0:58

Tim toont twee code blokken

"Dit is misschien het belangrijkste concept in Next.js. Standaard is elk component een Server Component. Het draait op de server, niet in de browser. De browser krijgt alleen HTML — geen JavaScript."

Tim maakt een gebaar van versturen

"Waarom is dat goed? Performance. Je stuurt minder code naar de browser. En je kunt direct data fetchen — await fetch() in je component."

Tim wijst naar het tweede blokje

"Maar: server components kunnen geen interactiviteit hebben. Geen useState, geen onClick. Daarvoor heb je Client Components nodig. Je zet 'use client' bovenaan en dan werkt het zoals je gewend bent."

Tim benadrukt

"De truc is: server components voor alles wat kan, en client components alleen voor interactiviteit. Meeste code is server."

Slide 16: Data Fetching in Server Components

Tijd: 0:58-1:02

Tim toont de server component met async function

"In gewoon React fetch je data met useEffect. useState voor loading, useState voor error, useState voor data. Drie states voor één ding. In Next.js? Niet nodig."

Tim wijst naar await fetch()

"Een server component kan async zijn. Je schrijft gewoon await fetch(). Component wacht op data en rendert het. Terwijl het wacht, toont Next.js automatisch je loading.tsx."

Tim highlight het revalidate object

"En dat revalidate: 60? Dat is caching. Eerste keer fetcht Next.js. Volgende 60 seconden serveert het cache. Dan opnieuw. Nul configuratie."

Slide 17: Server Actions

Tijd: 1:02-1:05

Tim toont de form met action={createPoll}

"Server Actions zijn relatief nieuw en ze veranderen hoe je met formulieren werkt. In plaats van onSubmit met fetch naar een API, gebruik je een action die direct een server functie aanroept."

Tim wijst naar 'use server'

"'use server' in de functie body. Dat draait op de server. Browser stuurt form, server verwerkt het. Geen API route nodig."

"Waarom? Minder code. Geen API route bestand, geen fetch, geen response handling. En het werkt zonder JavaScript in de browser."

Slide 18: Loading & Error States

Tijd: 1:05-1:07

Tim toont loading.tsx en error.tsx

"In gewoon React: eigen loading states beheren. useState(true), dan if (loading) return <Spinner />. In Next.js? Maak een loading.tsx en klaar."

Tim wijst naar error.tsx

"Hetzelfde met errors. error.tsx vangt fouten op. Gebruiker ziet nette foutmelding in plaats van crash."

Tim slaat handen in elkaar

"En TypeScript typing overal. error: Error en reset: () => void. Les 4 comes back!"

BLOK 4: API, MIDDLEWARE, DEPLOY & CURSOR (1:07-1:27)

Slide 19: next/image, next/link & Metadata

Tijd: 1:07-1:11

Tim toont drie imports

"Drie ding die je altijd gebruikt. Een: next/image. Gebruik dit in plaats van <img>. Next.js optimaliseert automatisch — lazy loading, juiste formaat."

"Twee: next/link. Gebruik dit in plaats van <a> tags. Client-side navigatie — pagina herlaadt niet, veel sneller."

"Drie: metadata. Exporteer een metadata object. TypeScript helpt met autocomplete — title, description, Open Graph. Alles voor SEO."

Slide 20: Route Handlers — Je Eigen API

Tijd: 1:11-1:16

Tim opent een route.ts bestand

"Route Handlers zijn API endpoints in je Next.js app. Bestand: route.ts — niet page.tsx!"

Tim toont de GET handler

"Je exporteert functies die GET, POST, PUT, DELETE heten. Dit bestand op /api/polls/route.ts betekent: GET /api/polls."

Tim navigeert in browser naar /api/polls

"En ik krijg JSON terug. Dat is mijn API. In hetzelfde project. Geen CORS issues, geen aparte server."

Tim highlight de TypeScript

"En alles is getypt. Poll interface, request body getypt, return type getypt."

Slide 21: Dynamic API Routes

Tijd: 1:16-1:19

Tim toont /api/polls/[id]/route.ts

"Net zoals pagina's kunnen API routes ook dynamisch zijn. /api/polls/1 geeft poll 1 terug, /api/polls/2 geeft poll 2."

Tim highlight de error handling

"En error handling is essentieel. Poll niet gevonden? 404 status. Alles getypt."

Slide 22: Environment Variables

Tijd: 1:19-1:22

Tim toont .env.local

"Environment variables zijn hoe je secrets beheert. Database URLs, API keys — niet hardcoden. In .env.local."

Tim benadrukt

"Twee regels. Een: NEXT_PUBLIC_ prefix? Beschikbaar in browser. Dus NOOIT secrets daarmee. Twee: zonder prefix? Alleen op server. Perfect voor secrets."

Tim wijst

".env.local staat automatisch in .gitignore. Komt nooit in Git."

Slide 23: Middleware

Tijd: 1:22-1:25

Tim opent het middleware bestand

"Middleware draait VÓÓR elke request. Eén bestand: middleware.ts in je src root. NIET in app/!"

Tim loopt door het voorbeeld

"Usecase: logging, auth check, redirects, rate limiting. Elke request gaat langs de beveiliger bij de deur."

Tim wijst naar matcher

"Met matcher bepaal je op welke routes het actief is. Wil je het alleen op API routes? /api/:path*."

Slide 24: Deployment op Vercel

Tijd: 1:25-1:27

Tim toont Vercel dashboard

"Vercel = makers van Next.js = beste hosting. Push naar GitHub, import project, KLAAR. Automatische deployments bij elke push."

Tim toont wat je gratis krijgt

"HTTPS, global CDN, preview deployments per branch. Environment variables in dashboard. Serverless functions voor API routes."

Tim knikt

"Voor het huiswerk: deploy op Vercel. Dan heb je een echte URL."

Slide 25: Next.js + Cursor — AI Development

Tijd: 1:27-1:30

Tim opent Cursor

"Cursor kent alle Next.js patterns. Zit je in route.ts, suggereert Tab-completie GET en POST handlers automatisch."

Tim waarschuwt

"Maar: AI is tool, geen vervanger. BEGRIJP wat Next.js doet. Cursor genereert Server Component met useState? JIJ ziet dat is fout."

Tim toont .cursorrules bestand

"Pro tip: maak .cursorrules. Vertel Cursor hoe je wilt coderen. Next.js 15, TypeScript, server components standaard. Veel betere suggesties."

Slide 26: Samenvatting — Next.js in Één Overzicht

Tijd: 1:30-1:33

Tim toont de tabel

"Dit is je cheat sheet. Bewaar deze slide. Alles wat je straks nodig hebt: pagina, layout, API route, middleware, loading, error."

Tim loopt de tabel door

"Print dit in je hoofd. Server Component standaard. Client met 'use client' voor interactiviteit. Server Action voor forms. Route Handler voor API."

Tim klapt

"Alles getypt met TypeScript. Alles op Vercel. Dit is je complete toolkit."

PAUZE (1:33-1:45)

Tim geeft pauzeaankondiging

"15 minuten pauze! Naar het toilet, koffie, stretch. Over 15 minuten gaan we SAMEN de setup doen. Iedereen een werkend project."

Tim loopt rond, praat informeel met studenten

BLOK 5: SAMEN OPZETTEN & BOUWEN (1:45-2:45)

Slide 27: Opdracht — QuickPoll App

Tijd: 1:45-1:48

Tim herstart na pauze, energiek

"Oké! We gaan QuickPoll bouwen — een poll/stemming app. Alles wat we net geleerd hebben: routing, API's, TypeScript, components."

Tim wijst naar de slide

"Aanpak: eerst SAMEN de setup. Ik loop het voor, jullie volgen mee. Daarna gaan jullie zelfstandig verder."

Slide 28: Samen Opzetten (Tim + Klas)

Tijd: 1:48-2:03

Tim opent Terminal, grote font, klas kan alles zien

"Open je terminal. We gaan dit samen doen. Typ mee. Stap 1: create-next-app."

Tim typt langzaam: npx create-next-app@latest quickpoll --typescript --tailwind --app --src-dir

Pauzeert bij elke vlag om uit te leggen

"TypeScript: yes. Tailwind: yes. App Router: yes. Src-dir: yes. Klaar?"

Wacht tot iedereen dezelfde output ziet

"Nu: cd quickpoll && npm run dev. Check of localhost:3000 werkt op je laptop."

Tim wacht 30 seconden

"Iedereen groen licht? Top!"

Tim opent zijn VS Code

"Stap 2: types. Dit is de TypeScript mindset. We beginnen ALTIJD met types. Maak src/types/index.ts."

Tim typt langzaam en klas volgt

export interface Poll {
  id: string;
  question: string;
  options: string[];
  votes: number[];
}

export interface CreatePollBody {
  question: string;
  options: string[];
}

Pauzeert na elke interface

"Dit zijn je core types. Alles in je app bouwt hierop. TypeScript helpt nu met autocomplete."

"Stap 3: folder structuur. Nog geen code — alleen bestanden aanmaken. Zo weet je wat je gaat bouwen."

Tim maakt folders aan op scherm, klas volgt in hun eigen IDE

src/app/
  ├── page.tsx (al aanwezig)
  ├── poll/
  │   └── [id]/
  │       └── page.tsx
  └── api/
      └── polls/
          ├── route.ts
          └── [id]/
              ├── route.ts
              └── vote/
                  └── route.ts

src/components/
  └── (leeg voor nu)

src/lib/
  └── data.ts

src/types/
  └── index.ts (net gemaakt)

Tim loopt langs elke folder

"Oké, iedereen klaar met setup? Mooi. Nu gaan jullie ZELF verder. Cursor Tab UIT. Zelf typen. Ik loop rond en help waar nodig. Begrenzing: 60 minuten."

Tim geeft de opdracht sheet

Slide 29: Individueel Bouwen (~60 min)

Tijd: 2:03-2:43

Tim loopt rond, klas werkt zelfstandig

Tim helpt bij veel voorkomende problemen:

"Vergeten 'use client' in component? Dat is een Server Component — je kan useState niet gebruiken."
"API route geeft 404? Check de folder path — /api/polls/route.ts geeft /api/polls."
"TypeScript error bij fetch? Zet het in een try/catch en type de response."

Tim monitort voortgang:

Na 10 min: "Iedereen verder dan stap 4? In-memory data? Top."
Na 25 min: "Wie zit al aan stap 6? API routes? Nice!"
Na 45 min: "Stap 7 is poll detail pagina. Daar is de meeste complexiteit. Zit je vast? Vraag hier."

Tim helpt met rondlopen:

Tips voor Rondlopen (Tim geeft deze hints als nodig):

Stap 4 (data): Array met 3-4 polls in lib/data.ts. IDs als strings.
Stap 5 (homepage): Import data, map() over polls, toon vraag + aantal opties.
Stap 6 (API routes): GET terug alle polls. POST voegt nieuwe toe. GET met [id] terug single poll.
Stap 7 (detail): Fetch poll data. Map options. VoteForm client component met onClick handler.
Stap 8 (middleware): Log alle requests. matcher: ["/api/*"].
Stap 9 (loading): loading.tsx met skeleton. Tailwind animate-pulse.

"Cursor Tab mag nu AAN als je echt vastloopt. Maar geef het eerst 5 minuten zelf."

"Vragen? Ik ben hier. Vraag buurman/buurvrouw ook — samen is sterker."

Tim circuliert, geeft high-fives aan wie stap 7 afmaken

BLOK 6: AFSLUITING (2:43-3:00)

Slide 30: Huiswerk — Next.js Mini Blog

Tijd: 2:43-2:50

Tim verzamelt klas

"Oké, huiswerk! Jullie bouwen een Mini Blog. Waarom een ander thema? Omdat ik wil dat je het ZELF kunt, niet dat je QuickPoll kopieert."

Tim loopt langs de eisen

"Homepage met blog posts. Dynamic route /post/[slug] voor elke post. API routes: GET alle posts, POST nieuwe. Middleware voor logging. Loading en error states. Minimaal 3 pagina's."

Tim benadrukt

"EN: deploy op Vercel. Ik wil werkende URL zien. Push naar GitHub, koppel Vercel, stuur link."

"Inleveren: GitHub repo + Vercel URL. Deadline: volgende les. Zorg dat npm run dev werkt."

Slide 31: Preview Les 6

Tijd: 2:50-2:55

Tim geeft sneak peek

"Volgende les: verdieping. Database — Prisma of Drizzle. Authentication — NextAuth. Caching en revalidation. Forms met Server Actions verdieping."

Tim wijst

"Zorg dat huiswerk af en deployed is. Les 6 bouwt hierop voort."

Slide 32: Afsluiting

Tijd: 2:55-3:00

Tim staat vooraan, serieus maar met lach

"Vandaag hebben jullie een COMPLETE Next.js app gebouwd. From scratch. Routing, API's, middleware, TypeScript — het hele pakket. Dat is impressive voor één les."

Tim loopt

"Onthoud: Next.js is React met extra's. Alles wat je al kende werkt. Nu heb je een framework dat je leven makkelijker maakt. En Vercel zet het online in twee minuten."

Tim maakt oogcontact

"Vragen? Nee? Mooi. Dan zie ik jullie volgende week. Vergeet huiswerk niet — ik wil URL zien!"

Tim geeft enthousiaste groet

POST-SESSIE CHECKLIST

Tim controleert (30 minuten na les):

Alle aanwezigen hebben werkend npm run dev
Typefiles sync'd met GitHub (voor huiswerk)
Vercel accounts actief (student weet hoe te deployen)
Huiswerkopdracht duidelijk — geen vragen open
Slides online gedeeld met klas
Feedback verzameld van moeilijke momenten

Voorbereiding Les 6:

Prisma setup docs klaar
NextAuth.js voorbeeld project
Database schema voorbeeld
Caching strategieën voorbereiding

21 KiB Raw Permalink Blame History

Les 05: Next.js — Het React Framework - Docenttekst

VOORBEREIDING

BLOK 1: HET PROBLEEM & DE OPLOSSING (0:00-0:20)

Slide 1: Titel

Slide 2: Planning Vandaag

Slide 3: Terugblik Les 4 — TypeScript

Slide 4: Het Probleem met Pure React

Slide 5: Next.js = Het React Framework

Slide 6: Wie Gebruikt Next.js?

BLOK 2: APP ROUTER & PROJECT STRUCTUUR (0:20-0:40)

Slide 7: create-next-app (Live Demo)

Slide 8: App Router — Folder = Route

Slide 9: Speciale Bestanden

Slide 10: Layouts in Actie

Slide 11: Dynamic Routes

Slide 12: Route Groups

Slide 13: Project Structuur Best Practices

BLOK 3: TYPESCRIPT, COMPONENTS & DATA (0:47-1:07)

Slide 14: TypeScript in Next.js

Slide 15: Server Components vs Client Components

Slide 16: Data Fetching in Server Components

Slide 17: Server Actions

Slide 18: Loading & Error States

BLOK 4: API, MIDDLEWARE, DEPLOY & CURSOR (1:07-1:27)

Slide 19: next/image, next/link & Metadata

Slide 20: Route Handlers — Je Eigen API

Slide 21: Dynamic API Routes

Slide 22: Environment Variables

Slide 23: Middleware

Slide 24: Deployment op Vercel

Slide 25: Next.js + Cursor — AI Development

Slide 26: Samenvatting — Next.js in Één Overzicht

PAUZE (1:33-1:45)

BLOK 5: SAMEN OPZETTEN & BOUWEN (1:45-2:45)

Slide 27: Opdracht — QuickPoll App

Slide 28: Samen Opzetten (Tim + Klas)

Slide 29: Individueel Bouwen (~60 min)

BLOK 6: AFSLUITING (2:43-3:00)

Slide 30: Huiswerk — Next.js Mini Blog

Slide 31: Preview Les 6

Slide 32: Afsluiting

POST-SESSIE CHECKLIST

21 KiB

Raw Permalink Blame History