Ini adalah file khusus di App Router yang secara otomatis menyediakan status loading dan error untuk segmen rute — Next.js menghubungkannya dengan React Suspense dan Error Boundaries sehingga Anda tidak perlu menulis boilerplate ini.
() {
;
}
Next.js secara otomatis membungkus page.tsx segmen dalam batas <Suspense> dengan ini sebagai fallback. Jadi sementara Server Component async menunggu datanya, pengguna segera melihat UI loading.tsx — kemudian konten sebenarnya distream. Tidak ada manajemen status loading 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>
);
}
Jika halaman (atau pengambilan datanya) melempar error, Next.js menangkapnya dengan Error Boundary ini dan merender error.tsx alih-alih menghancurkan seluruh aplikasi. Fungsi reset() memungkinkan pengguna mencoba kembali tanpa reload penuh. Error terbatas pada segmen — layout dan sisa aplikasi tetap utuh.
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 ini memberikan Anda penanganan loading dan error yang robust per rute secara gratis — UI loading berbasis Suspense yang mengaktifkan streaming, dan error boundaries dengan cakupan segmen dengan kemampuan retry.
Alih-alih membawa status isLoading/error melalui komponen, Anda tinggal memasukkan loading.tsx dan error.tsx dan Next.js menangani wiring, menghasilkan UX yang tangguh dan responsif.
Perpustakaan pertanyaan wawancara IT dengan jawaban mendetail — dari Junior hingga Senior.
Donasi