These are special files in the App Router that automatically provide loading and error states for a route segment — Next.js wires them up with React Suspense and Error Boundaries so you don't write that boilerplate.
() {
;
}
Next.js automatically wraps the segment's page.tsx in a <Suspense> boundary with this as the fallback. So while an async Server Component awaits its data, the user immediately sees the loading.tsx UI — then the real content streams in. No manual loading-state management.
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>
);
}
If the page (or its data fetching) throws, Next.js catches it with this Error Boundary and renders error.tsx instead of crashing the whole app. The reset() function lets the user retry without a full reload. Errors are contained to the segment — the layout and the rest of the app stay intact.
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
These files give you robust loading and error handling per route for free — Suspense-based loading UI that enables streaming, and segment-scoped error boundaries with retry.
Instead of threading isLoading/error state through components, you drop in a loading.tsx and error.tsx and Next.js handles the wiring, producing a resilient, responsive UX.