Hizi ni faili za kawaida katika App Router ambazo kiotomatiki hutoa hali za upakiaji na hitilafu kwa sehemu ya njia — Next.js inaunganisha na React Suspense na Error Boundaries kwa hivyo huwezi kuandika cod hio mwenyewe.
() {
;
}
Next.js kiotomatiki inaandika page.tsx ya sehemu katika kuzuia <Suspense> na hii kama fallback. Habari Server Component isiyo na mipango inasubiri data yake, mtumiaji anakuona haraka UI kutoka loading.tsx — kisha maudhui halisi yanapakibwa. Hakuna usimamizi wa kazi wa hali ya upakiaji.
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>
);
}
Ikiwa ukurasa (au ukutani wake wa data) unakupiga kosa, Next.js inakufa kwa Error Boundary hii na kumudu error.tsx badala ya kuangusha programu nzima. Chaguo la reset() huruhusu mtumiaji kujaribu tena bila kupakia tena kamili. Hitilafu ni umezuiliwa kwa sehemu — muundo na sehemu nyingine ya programu zinabaki salama.
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
Faili hizi zikupidia usimamizi wenye nguvu wa upakiaji na hitilafu kwa njia kwa haba — Suspense-hadithi UI wa upakiaji ambayo inaruhusu kupakibwa, na hitilafu ya mpaka iliyozuiliwa na sehemu yenye kujaribu tena.
Badala ya kupitia hali isLoading/error kupitia components, unaweka loading.tsx na error.tsx na Next.js hushughulikia uunganisho, unatozalisha UX yenye nguvu na inayoitikia.