Hoe werken loading.tsx en error.tsx?

Question

Accepted Answer

Dit zijn **speciale bestanden** in de App Router die automatisch loading- en error-states voor een routesegment bieden — Next.js koppelt ze aan React Suspense en Error Boundaries, zodat je die boilerplate niet zelf hoeft te schrijven. ## Waarom het belangrijk is These files give you robust loading and error handling per route **for free** — Suspense-based loading UI that enables streaming, and segment-scoped error boundaries with retry. Instead of threading `isLoading`/`error` state through components, you drop in a `loading.tsx` and `error.tsx` and Next.js handles the wiring, producing a resilient, responsive UX. ## loading.tsx — instant loading UI via Suspense ```tsx // app/dashboard/loading.tsx export default function Loading() { return ; // shown while the page's data is being fetched } ``` Next.js verpakt het segment's `page.tsx` automatisch in een ``-grens met dit als fallback. Terwijl een async Server Component wacht op zijn gegevens, ziet de gebruiker onmiddellijk de `loading.tsx` UI — daarna wordt de echte inhoud gestreamed. Geen handmatig loading-state management. ```text User navigates → loading.tsx shows INSTANTLY → data resolves → page replaces it ``` ## error.tsx — error boundary voor het segment ```tsx "use client"; // error components MUST be Client Components export default function Error({ error, reset, }: { error: Error; reset: () => void; // retry: re-renders the segment }) { return (

Something went wrong: {error.message}

); } ``` Als de pagina (of het ophalen van gegevens) een fout gooit, vangt Next.js deze op met deze Error Boundary en rendert `error.tsx` **in plaats van de hele app te laten crashes**. De `reset()`-functie stelt de gebruiker in staat opnieuw te proberen zonder volledig opnieuw te laden. Fouten zijn *beperkt* tot het segment — de layout en de rest van de app blijven intact. ## Gerelateerde speciale bestanden ```text loading.tsx → Suspense fallback (loading state) error.tsx → error boundary (must be "use client") not-found.tsx → 404 UI (triggered by notFound()) global-error.tsx → catches errors in the root layout itself ```