React & Next.js — webapplicaties met hoge prestaties
Voor al onze frontendprojecten zetten we React 18 en Next.js 15 (App Router) in: van de bedrijfswebsite tot complexe SaaS met tienduizenden gebruikers. De code is strikt getypeerd TypeScript, de tests zijn geautomatiseerd en de deployment verloopt via een pipeline.
Waarom Next.js voor onze projecten
Next.js 15 met App Router biedt een uniek hybride model: statische pagina's (SSG) worden direct vanaf het CDN geserveerd, dynamische pagina's draaien als Server Components die geen overbodige JavaScript naar de browser sturen, en pagina's met realtimedata gebruiken geïsoleerde Client Components.
Afbeeldingen worden via de `<Image>`-component automatisch geoptimaliseerd (WebP/AVIF, responsieve srcSet, lazy loading), lettertypen komen met `next/font` inline in de kritieke CSS terecht, en scripts van derden worden geladen volgens prioriteitsstrategieën. Samen zijn deze optimalisaties erop gericht de laadtijd van de pagina te beperken.
- Server Components voor marketingpagina's — nul client-JS, direct crawlen
- Streaming SSR met Suspense voor dashboards met livedata
- Incremental Static Regeneration (ISR) voor halfdynamische content
- Route Groups en Parallel Routes voor complexe layouts zonder re-render
Strikt TypeScript — geen stille bugs
Al onze projecten gebruiken TypeScript met `strict: true`, `noImplicitAny`, `exactOptionalPropertyTypes` en `noUncheckedIndexedAccess`. Deze instellingen blokkeren hele categorieën runtimefouten al bij het compileren: toegang tot undefined, onvolledige types bij API-antwoorden, verkeerde vergelijkingen. Een typisch project heeft 0 TypeScript-fouten in de CI, nog voordat er ook maar één test draait.
Voor state management gebruiken we Zustand (lichtgewicht, zonder boilerplate) of React Context voor lokale state. Het ophalen van data doet TanStack Query (automatische cache, slimme invalidatie, stale-while-revalidate). Formulieren met React Hook Form + Zod-schemavalidatie — synchrone en asynchrone controle zonder dubbele code.
- ESLint met eigen regels voor verboden patronen (any, console.log, magic strings)
- Prettier met één uniforme configuratie — geen enkele PR sneuvelt op opmaak
- Zod voor runtimevalidatie van data uit externe API's
- Path aliases (`@/components/...`) — heldere imports zonder `../../..`
Geautomatiseerde tests en CI/CD
Unittests met Vitest (snel, compatibel met de Jest-API), componenttests met React Testing Library, E2E met Playwright in 3 browsers (Chromium, Firefox, WebKit). De GitHub Actions-pipeline draait bij elke PR alle tests; de merge wordt geblokkeerd zodra er één faalt. Minimaal 80% coverage op de businesslogica.
- Lighthouse CI — een score onder de 90 blokkeert de staging-deployment
- Automatische bundle-analyzer — alarm zodra de bundle meer dan 5% groeit ten opzichte van main
- Storybook voor UI-componenten — levende visuele documentatie
Voordelen en beperkingen
Voordelen
- Lighthouse CI als poort: een score onder de 90 blokkeert de staging-deployment.
- SSR en SSG standaard ingebouwd — volledige HTML voor Google en AI-zoekmachines.
- Strikt TypeScript vangt bugs af bij het compileren, niet in productie.
- Volwassen ecosysteem: Vercel, duizenden pakketten, enorme community.
Beperkingen
- De leercurve van App Router en Server Components is steil.
- Frequente wijzigingen tussen major versies — vraagt om doorlopend onderhoud.
- Voor een eenvoudige statische pagina kan Next.js overkill zijn ten opzichte van pure HTML.
- Grote builds verhogen de compileertijd en de CI-kosten.
Kort oordeel
Kies React & Next.js voor websites en webapplicaties die snel, indexeerbaar en schaalbaar moeten zijn. Voor één enkele statische landingspagina zonder interactiviteit volstaat een eenvoudigere oplossing.
Specificatietabel
| Mogelijkheid | Grens / drempel | Typische inzet | |
|---|---|---|---|
| Rendering | SSR, SSG, ISR, CSR | Server Components beperken browser-API's | Statische marketing + dynamisch dashboard |
| Performance | Lighthouse CI-poort: score onder 90 blokkeert de deployment | Hydration-JS groeit mee met de interactiviteit | Websites met veel verkeer, SEO-kritisch |
| Schaalbaarheid | Tienduizenden gebruikers, edge-CDN | Vereist Node-hosting of serverless | SaaS, portalen, e-commerce |
| Typische kosten | Open source, hosting vanaf circa 0 € | Serverless functies worden per gebruik afgerekend | Van kleine projecten tot enterprise |
Next.js vergeleken met alternatieven
| Criterium | Next.js | Nuxt / Astro / Vite |
|---|---|---|
| SSR + SSG in één framework | Ja, native | Gedeeltelijk (Nuxt wel, Vite niet) |
| React-ecosysteem | Volledig | Vue (Nuxt) of multi-framework (Astro) |
| Optimaal voor puur statische pagina's | Goed | Astro is lichter |
Veelgestelde vragen
Waarom Next.js en niet gewoon React (Vite)?
React met Vite rendert alleen in de browser, dus de initiële HTML is leeg — slecht voor SEO en GEO. Next.js voegt SSR en SSG toe en levert volledige HTML die Google en AI-zoekmachines meteen kunnen lezen.
Is Next.js goed voor SEO?
Ja. SSR/SSG leveren indexeerbare HTML, metadata en JSON-LD worden aan de serverkant gegenereerd, en de Core Web Vitals worden in de bouw meegenomen — allemaal factoren waar zoekmachines naar kijken.
Kan ik een bestaande website migreren naar Next.js?
Ja, stap voor stap: de pagina's worden één voor één overgezet, waarbij URL's en 301-redirects behouden blijven, zodat URL's en 301-redirects de bestaande posities zoveel mogelijk behouden.
Welke hosting heeft Next.js nodig?
Statische pagina's draaien op elk CDN. Dynamische functies (SSR, API Routes) vereisen Node.js of een serverless runtime zoals Vercel, Netlify of een Docker-container.