Iki minangka file spesial ing App Router sing sacara otomatis ngawehi keadaan loading lan error kanggo segmen route — Next.js ngubungake kanthi React Suspense lan Error Boundaries supaya sampeyan ora nulis boilerplate kasebut.
() {
;
}
Next.js sacara otomatis mbungkus page.tsx segmen ing watesan <Suspense> karo iki minangka fallback. Dadi nalika Server Component asinkron nantang datane, pangguna langsung weruh UI loading.tsx — banjur isi asli ngraja. Ora ana manajemen keadaan loading sing manual.
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>
);
}
Yen halaman (utawa data fetching-ne) mula, Next.js nangkep kanthi Error Boundary iki lan nggawe error.tsx tinimbang buat kabeh aplikasi jebol. Fungsi reset() ngidini pangguna nyoba maneh tanpa reload lengkap. Kesalahan dikuthentikake — layout lan liyane aplikasi tetep aman.
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
File-file iki menehi sampeyan manajemen loading lan error sing kuat per route kanthi gratis — UI loading adhedhasar Suspense sing aktifake streaming, lan watesan error kanthi scope segmen lan retry.
Alih-alih nglindhung keadaan isLoading/error lumawar komponen, sampeyan nelak loading.tsx lan error.tsx lan Next.js nakoni kabelan, nggawe UX sing tahan lan tanggap.