Ce sont des fichiers spéciaux dans l'App Router qui fournissent automatiquement des états de chargement et d'erreur pour un segment de route — Next.js les câble avec React Suspense et les Error Boundaries pour que vous n'ayez pas à écrire ce code boilerplate.
() {
;
}
Next.js enveloppe automatiquement le page.tsx du segment dans une frontière <Suspense> avec ceci comme fallback. Donc, pendant qu'un Server Component asynchrone attend ses données, l'utilisateur voit immédiatement l'interface utilisateur loading.tsx — puis le contenu réel arrive en streaming. Aucune gestion d'état de chargement manuelle.
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 page (ou sa récupération de données) lève une erreur, Next.js la capture avec cette Error Boundary et affiche error.tsx au lieu de faire s'effondrer toute l'application. La fonction reset() permet à l'utilisateur de réessayer sans rechargement complet. Les erreurs sont contenues au segment — la layout et le reste de l'application restent intacts.
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
Ces fichiers vous offrent une gestion robuste du chargement et des erreurs par route gratuitement — une interface utilisateur de chargement basée sur Suspense qui active le streaming, et des error boundaries à scope du segment avec possibilité de réessai.
Au lieu de faire passer l'état isLoading/error à travers les composants, vous déposez un loading.tsx et error.tsx et Next.js gère le câblage, produisant une UX résiliente et réactive.