Këto janë skedarë të veçantë në App Router që automatikisht ofrojnë gjendje ngarkimi dhe gabimi për një segment rrugë — Next.js i lidh ato me React Suspense dhe Error Boundaries kështu që nuk duhet të shkruani atë kod të plotë.
() {
;
}
Next.js automatikisht mbështjell page.tsx e segmentit në një kufi <Suspense> me këtë si fallback. Ndërsa një Server Component asinkron pret të dhënat e tij, përdoruesi menjëherë sheh UI nga loading.tsx — më pas përmbajtja e vërtetë rrjedh. Pa menaxhimin manual të gjendjeve të ngarkimit.
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>
);
}
Nëse faqja (ose marrja e të dhënave të saj) hedh një gabim, Next.js e kap atë me këtë Error Boundary dhe në vend të kësaj përjashton error.tsx në vend që të rrëzojë të gjithë aplikacionin. Funksioni reset() lejon përdoruesin të provojë përsëri pa një rifreskuese të plotë. Gabimet janë të kufizuara në segment — paraqitja dhe pjesa tjetër e aplikacionit mbeten të padëmtuara.
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
Këta skedarë ju japin menaxhimin robust të ngarkimit dhe të gabimit për rrugë për të ardhmen — UI i ngarkimit bazuar në Suspense që mundëson rrjedhjen, dhe kufi gabimi të kufizuar në segment me mundësinë e riprovojit.
Në vend të ndarjes së gjendjës isLoading/error përmes komponentëve, ju hidhni në loading.tsx dhe error.tsx dhe Next.js e bën lidhjen, duke prodhuar një UX të qëndrueshëm dhe të ndjeshëm.