Loading, error y not found boundaries en Next.js

Loading, error y not found boundaries en Next.js | Nicolás Garzón

Texto

DashboardLayout
├─ Navigation              → permanece disponible
└─ Orders segment
   ├─ loading.tsx           → espera
   ├─ error.tsx             → fallo inesperado
   ├─ not-found.tsx         → recurso inexistente
   └─ page.tsx              → contenido normal

TypeScript

// app/dashboard/orders/loading.tsx
export default function OrdersLoading() {
  return (
    <section aria-busy="true" aria-labelledby="orders-heading">
      <h1 id="orders-heading">Pedidos</h1>
      <OrdersTableSkeleton rows={8} />
    </section>
  );
}

TypeScript

import { Suspense } from "react";

export default function DashboardPage() {
  return (
    <main>
      <h1>Resumen</h1>

      <Suspense fallback={<SalesSkeleton />}>
        <SalesSummary />
      </Suspense>

      <Suspense fallback={<ActivitySkeleton />}>
        <RecentActivity />
      </Suspense>
    </main>
  );
}

TypeScript

// app/dashboard/orders/error.tsx
"use client";

import { useEffect } from "react";

export default function OrdersError({
  error,
  reset,
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  useEffect(() => {
    reportClientError({
      message: error.message,
      digest: error.digest,
    });
  }, [error]);

  return (
    <section role="alert">
      <h2>No fue posible cargar los pedidos</h2>
      <p>Intenta nuevamente. Si continúa, comparte el código de referencia.</p>
      {error.digest && <code>{error.digest}</code>}
      <button type="button" onClick={reset}>
        Intentar de nuevo
      </button>
    </section>
  );
}

TypeScript

"use server";

export async function loginAction(
  _previousState: LoginState,
  formData: FormData,
): Promise<LoginState> {
  const parsed = loginSchema.safeParse(Object.fromEntries(formData));

  if (!parsed.success) {
    return { status: "invalid", errors: parsed.error.flatten().fieldErrors };
  }

  const result = await authenticate(parsed.data);

  if (!result.ok) {
    return { status: "invalidCredentials" };
  }

  redirect("/dashboard");
}

TypeScript

import { notFound } from "next/navigation";

export default async function ProductPage({
  params,
}: PageProps<"/products/[slug]">) {
  const { slug } = await params;
  const product = await getProductBySlug(slug);

  if (!product) {
    notFound();
  }

  return <ProductDetails product={product} />;
}

TypeScript

// app/products/[slug]/not-found.tsx
import Link from "next/link";

export default function ProductNotFound() {
  return (
    <section>
      <h1>Producto no encontrado</h1>
      <p>El producto pudo eliminarse o cambiar de dirección.</p>
      <Link href="/products">Volver al catálogo</Link>
    </section>
  );
}

TypeScript

"use client";

export default function GlobalError({ reset }: { reset: () => void }) {
  return (
    <html lang="es">
      <body>
        <h1>La aplicación no pudo cargarse</h1>
        <button onClick={reset}>Reintentar</button>
      </body>
    </html>
  );
}