Đây là các file đặc biệt trong App Router tự động cung cấp trạng thái loading và error cho một route segment — Next.js nối dây chúng với React Suspense và Error Boundary để bạn không phải viết boilerplate đó.
() {
;
}
Next.js tự động bọc page.tsx của segment trong một ranh giới <Suspense> với cái này làm fallback. Nên trong khi một async Server Component đang await dữ liệu, người dùng ngay lập tức thấy UI loading.tsx — rồi nội dung thật stream vào. Không cần quản lý loading-state thủ công.
User navigates → loading.tsx shows INSTANTLY → data resolves → page replaces it
"use client"; // các component error PHẢI là Client Component
export default function Error({
error,
reset,
}: {
error: Error;
reset: () => void; // retry: render lại segment
}) {
return (
<div>
<p>Something went wrong: {error.message}</p>
<button onClick={reset}>Try again</button>
</div>
);
}
Nếu page (hoặc việc fetch dữ liệu của nó) ném lỗi, Next.js bắt nó bằng Error Boundary này và render error.tsx thay vì làm sập cả app. Hàm reset() cho phép người dùng thử lại mà không reload toàn trang. Lỗi được giới hạn trong segment — layout và phần còn lại của app vẫn nguyên vẹn.
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
Các file này cho bạn xử lý loading và error theo từng route một cách vững chắc miễn phí — UI loading dựa trên Suspense cho phép streaming, và error boundary giới hạn theo segment với retry.
Thay vì luồn state isLoading/error qua các component, bạn thả vào một loading.tsx và error.tsx và Next.js lo phần nối dây, tạo ra một UX kiên cố và phản hồi tốt.