Dette er specielle filer i App Router, der automatisk giver loading- og error-states for et rutesegment — Next.js forbinder dem med React Suspense og Error Boundaries, så du ikke skal skrive det boilerplate-kode.
() {
;
}
Next.js omslutter automatisk segmentets page.tsx i en <Suspense>-grænse med dette som fallback. Så mens en async Server Component venter på sine data, ser brugeren straks loading.tsx-UI'et — og så streamer det rigtige indhold ind. Ingen manuel loading-state-håndtering.
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 dens datahentning) kaster en fejl, fanger Next.js den med denne Error Boundary og gengiver error.tsx i stedet for at crashe hele appen. Funktionen reset() lader brugeren prøve igen uden en fuld genindlæsning. Fejl er indeholdt til segmentet — layoutet og resten af appen forbliver 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 filer giver dig robust loading- og error-håndtering pr. rute gratis — Suspense-baseret loading-UI, der muliggør streaming, og segment-scoped error boundaries med retry.
I stedet for at lede isLoading/error-state gennem komponenter slipper du en loading.tsx og error.tsx af, og Next.js håndterer forbindelsen, hvilket producerer en resilient, responsiv brugeroplevelse.
Et bibliotek af IT-interviewspørgsmål med detaljerede svar — fra Junior til Senior.
Donér