Waɗannan su ne faɗoɗi na ƙayyade a cikin App Router wanda ke samar da yanayin ɗamawa da kuskure ta atomatik ga ɓangare na hanya — Next.js yana dandana su tare da React Suspense da Error Boundaries don kada ka rubuta wannan boilerplate code.
() {
;
}
Next.js ta atomatik yana naɗa page.tsx na ɓangare a cikin iyaka na <Suspense> tare da wannan a matsayin fallback. Don haka yayin da async Server Component ke jira bayansa, mai amfani zai ga UI na loading.tsx nan da nan — sannan ainihin abun da aka kasuwa cikin jami'i. Babu gudanarwa na yanayin ɗamawa ta hannu.
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>
);
}
Idanukkan ƙuri'ar (ko neman bayanta) ta yin kuskure, Next.js ta karbe shi da wannan Error Boundary kuma ta ɗaga error.tsx maimakon cika dukkan app tare da kuskure. Aikin reset() yana ba da damar mai amfani na sake yunwa ba tare da cire gida ba. Kuskurewa ne a cikin ƓAMon — layout da sauran app suke lafiya.
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
Waɗannan faɗoɗi suna ba ka ɓatacin jiyya da kuskure gudanarwa ƴa hanya kyauta — Suspense-tushen ɗamawa UI wanda ke kunna jami'i, da ƀangare-scoped error boundaries tare da sake yunwa.
aidda ka tunanin isLoading/error state ta cikin abubuwa, ka aje loading.tsx da error.tsx kuma Next.js yana sarrafa dandana, samar da ɗorewa, sauran UX.