Dessa är specialfiler i App Router som automatiskt tillhandahåller inladdnings- och feltillstånd för ett ruttsegment — Next.js kopplar dem med React Suspense och Error Boundaries så att du inte behöver skriva den koden själv.
() {
;
}
Next.js omsluter automatiskt segmentets page.tsx i en <Suspense>-gräns med detta som fallback. Medan en asynkron Server Component väntar på sin data ser användaren omedelbar UI från loading.tsx — sedan strömmas det verkliga innehållet in. Ingen manuell hantering av inladdningstillstånd.
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>
);
}
Om sidan (eller dess datahämtning) kastar ett fel fångar Next.js det med denna Error Boundary och renderar error.tsx istället för att krascha hela appen. Funktionen reset() låter användaren försöka igen utan en full uppdatering. Fel är begränsade till segmentet — layouten och resten av appen förblir 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
Dessa filer ger dig robust inladdnings- och felhantering per ruttväg gratis — Suspense-baserad inladdnings-UI som möjliggör streaming och segmentbegränsade felgränser med försök igen.
Istället för att trä igenom isLoading/error-tillstånd genom komponenter, lägger du in en loading.tsx och error.tsx och Next.js hanterar kopplingen, vilket skapar en motståndskraftig och responsiv UX.
Ett bibliotek med IT-intervjufrågor och detaljerade svar — från Junior till Senior.
Donera