Ini adalah fail khusus di App Router yang secara otomatis menyediakan status pemuatan dan kesalahan untuk segmen rute — Next.js menghubungkannya dengan React Suspense dan Error Boundaries sehingga Anda tidak perlu menulis kode boilerplate tersebut.
() {
;
}
Next.js secara otomatis membungkus page.tsx segmen dalam batas <Suspense> dengan ini sebagai fallback. Jadi sementara Server Component asinkron menunggu datanya, pengguna segera melihat UI loading.tsx — kemudian konten sebenarnya mengalir. Tidak ada manajemen status pemuatan 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, Next.js menangkapnya dengan Error Boundary ini dan merender error.tsx daripada menghancurkan seluruh aplikasi. Fungsi reset() memungkinkan pengguna mencoba ulang tanpa memuat ulang penuh. Kesalahan terbatas pada segmen — tata letak 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 memberi Anda penanganan pemuatan dan kesalahan yang kuat per rute secara gratis — UI pemuatan berbasis Suspense yang memungkinkan streaming, dan batas kesalahan dengan cakupan segmen dengan percobaan ulang.
Alih-alih mengalirkan status isLoading/error melalui komponen, Anda melepas loading.tsx dan error.tsx dan Next.js menangani pengkabelan, menghasilkan UX yang tangguh dan responsif.