Wat is Next.js en wat voegt het toe aan React?

Question

Accepted Answer

**Next.js** is een full-stack React **framework**. React zelf is slechts een UI-bibliotheek — het rendert componenten maar overlaat routing, data fetching, server rendering en build tooling aan jou. Next.js biedt dit alles uit de doos, plus een server runtime. ## Wat React alleen achterlaat (en Next.js toevoegt) ```text React (library) → Next.js (framework) adds: ────────────────────────────────────────────────── UI rendering only → File-based routing (folders = routes) Client-side rendering → Server rendering (SSR), static generation (SSG), ISR You wire data fetching → Built-in data fetching + caching No backend → API routes / Route Handlers (full-stack) Manual bundling → Zero-config build, code splitting, optimization Manual → next/image (auto-optimized images), next/font ``` ## Een concreet voorbeeld: een route is gewoon een bestand ```tsx // app/about/page.tsx → automatically served at /about export default function About() { return

About us

; } ``` In gewone React zou je een router installeren, routes configureren en een build instellen. In Next.js is het bestand *zelf* de route. ## Waarom het belangrijk is - **SEO & performance** — server-rendered HTML betekent dat inhoud in het initiële response zit (goed voor crawlers en snelle eerste paint), in tegenstelling tot een client-only React SPA die een lege pagina verstuurt en dan hydraté. - **Full-stack in één project** — frontend en backend (API routes, Server Actions) bevinden zich samen. - **Production-ready defaults** — automatische code splitting, afbeeldings-/lettertypeoptimalisatie, caching. ## Waarom het belangrijk is Next.js is het meest populaire React-framework omdat het React transformeert van een UI-bibliotheek naar een compleet applicatieplatform — met afhandeling van renderingstrategie, routing, data en een backend, zodat jij je op functies kunt concentreren in plaats van infrastructure. Het is de standaardkeuze wanneer je SEO, performance of server-side logica met React nodig hebt.