Loading & error states
<Skeleton>, loading.tsx, error.tsx, global-error.tsx — pattern Next.js pour gérer les états de chargement et les exceptions.
Pattern Next.js 16 standard pour les états de chargement et les exceptions runtime, branché dans le boilerplate.
<Skeleton>
Bloc avec animation pulse, à composer pour reproduire la shape de l'UI qui va arriver :
import { Skeleton } from "@/components/ui/skeleton";
<div className="space-y-3">
<Skeleton className="h-8 w-1/3" />
<Skeleton className="h-32 w-full" />
</div>Code : components/ui/skeleton.tsx. Pas de variantes — c'est juste
un <div> stylé. Compose-les pour les patterns plus complexes.
loading.tsx (par route)
Next.js affiche automatiquement le loading.tsx voisin pendant le
streaming d'un Server Component. Pas besoin de Suspense manuel.
Routes lentes équipées :
app/[locale]/(dashboard)/admin/analytics/loading.tsx— KPI cards + 3 chartsapp/[locale]/(dashboard)/admin/billing/loading.tsx— KPI + table
Pour ajouter un loading sur une autre route, crée juste un loading.tsx
à côté du page.tsx. Tu peux composer des <Skeleton> qui matchent
la structure de la page finale (perception de vitesse).
error.tsx (boundary par segment)
app/error.tsx — capture les exceptions runtime du tree React et
affiche une page propre au lieu de l'écran rouge default.
"use client"; // OBLIGATOIRE — error.tsx doit être Client Component
export default function Error({ error, reset }: { error: Error & { digest?: string }; reset: () => void }) {
// useEffect → Sentry / PostHog si tu en ajoutes un
return <div>...<Button onClick={reset}>Réessayer</Button></div>;
}Le digest est l'identifiant Next.js de l'erreur côté serveur — utile
pour retrouver la stack dans Vercel logs / Sentry.
Tu peux ajouter un error.tsx plus spécifique dans une sous-route
(app/[locale]/(dashboard)/error.tsx, etc.) pour personnaliser par
contexte.
global-error.tsx
app/global-error.tsx — fallback ultime qui catch les erreurs
survenant dans le RootLayout lui-même (que error.tsx ne peut
pas catch puisqu'il vit en dessous).
Particularités :
- Doit re-render
<html>et<body>(Next.js le requiert) - Pas de styles complexes / pas de Tailwind — il s'exécute quand même la chaîne de providers est cassée
C'est le filet de sécurité. En pratique, tu le verras rarement.
Branchement Sentry / PostHog
Dans le useEffect de error.tsx et global-error.tsx, log l'erreur
vers ton tracker :
useEffect(() => {
if (typeof window !== "undefined" && (window as any).posthog) {
(window as any).posthog.captureException(error);
}
}, [error]);Pas inclus par défaut pour rester léger. Voir Helpers pour les helpers utilitaires existants.