Dette er spesielle filer i App Router som automatisk gir loading- og error-tilstander for et ruttsegment — Next.js tilkoblet dem med React Suspense og Error Boundaries slik at du ikke trenger å skrive den boilerplaten selv.
() {
;
}
Next.js omslutter automatisk segmentets page.tsx i en <Suspense>-grense med dette som fallback. Så mens en async Server Component venter på dataene sine, ser brukeren umiddelbar loading.tsx-en UI — deretter streames det virkelige innholdet inn. Ingen manuell loading-state-styring.
User navigates → loading.tsx shows INSTANTLY → data resolves → page replaces it
"use client"; // error components MUST be Client Components
export default function Error({
error,
reset,
}: {
error: Error;
reset: () => void; // retry: re-renders the segment
}) {
return (
<div>
<p>Something went wrong: {error.message}</p>
<button onClick={reset}>Try again</button>
</div>
);
}
Hvis siden (eller datahentingen) kaster en feil, fanger Next.js den med denne Error Boundary og gjengir error.tsx i stedet for at hele appen krasjer. Funksjonen reset() lar brukeren prøve på nytt uten fullasting. Feil er begrenset til segmentet — layouten og resten av appen forblir intakt.
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
Disse filene gir deg robust loading- og feilvarsling per rute gratis — Suspense-basert loading-UI som muliggjør streaming, og segmentbegrenset feilgrenser med omprøving.
I stedet for å tråde isLoading/error-tilstand gjennom komponenter, sletter du en loading.tsx og error.tsx og Next.js håndterer ledningen, og produserer en motstandsdyktig, responsiv brukeropplevelse.