Estos son archivos especiales en el App Router que proporcionan automáticamente estados de carga y error para un segmento de ruta — Next.js los conecta con React Suspense y Error Boundaries para que no tengas que escribir ese código repetitivo.
() {
;
}
Next.js automáticamente envuelve la page.tsx del segmento en un límite <Suspense> con esto como fallback. Entonces, mientras un Server Component asincrónico espera sus datos, el usuario ve inmediatamente la interfaz de loading.tsx — y luego el contenido real se transmite. Sin gestión manual de estado de carga.
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>
);
}
Si la página (o su obtención de datos) lanza un error, Next.js lo captura con este Error Boundary y renderiza error.tsx en lugar de que se bloquee toda la aplicación. La función reset() permite al usuario reintentar sin una recarga completa. Los errores están contenidos en el segmento — el layout y el resto de la aplicación permanecen intactos.
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
Estos archivos te proporcionan una carga sólida y manejo de errores por ruta de forma gratuita — interfaz de carga basada en Suspense que permite transmisión, y error boundaries con alcance de segmento con reintentos.
En lugar de pasar el estado isLoading/error a través de componentes, simplemente creas un loading.tsx y un error.tsx y Next.js maneja la conexión, produciendo una experiencia de usuario resistente y receptiva.