Loading, error y not-found: UX profesional

Estados de UI: loading, error y not-found

Una aplicación real nunca está siempre en su estado "feliz": hay esperas, fallos de red y URLs que no existen. El App Router te da archivos especiales para cubrir cada caso sin tener que cablear manualmente la lógica. Cada uno se coloca dentro de la carpeta de la ruta y Next los conecta automáticamente.

Los tres archivos clave

• loading.tsx: se muestra mientras el Server Component asíncrono está cargando. Por debajo, Next lo envuelve en un <Suspense>. Ideal para skeletons.


• error.tsx: captura errores lanzados durante el render de esa ruta. Debe ser Client Component y recibe error y reset.


• not-found.tsx: se renderiza cuando llamas a la función notFound() o cuando una URL no coincide con ninguna ruta.

Ejemplo de loading con skeleton

// app/dashboard/loading.tsx

export default function Loading() {

  return <div className="skeleton h-40 w-full animate-pulse" />;

}

Ejemplo de error con reintento

// app/dashboard/error.tsx

"use client";



export default function Error({ error, reset }) {

  return (

    <div>

      <p>Algo salió mal: {error.message}</p>

      <button onClick={() => reset()}>Reintentar</button>

    </div>

  );

}

Disparar un 404 desde el código

import { notFound } from "next/navigation";



const curso = await db.curso.findUnique({ where: { slug } });

if (!curso) notFound(); // renderiza not-found.tsx

Ejercicio práctico