Questi sono file speciali nell'App Router che forniscono automaticamente stati di caricamento e errore per un segmento di route — Next.js li collega con React Suspense e Error Boundaries in modo da non dover scrivere quel boilerplate.
() {
;
}
Next.js avvolge automaticamente il page.tsx del segmento in un boundary <Suspense> con questo come fallback. Quindi, mentre un Server Component asincrono attende i suoi dati, l'utente vede immediatamente l'UI di loading.tsx — quindi il contenuto reale viene trasmesso. Nessuna gestione manuale dello stato di caricamento.
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>
);
}
Se la pagina (o il suo data fetching) lancia un errore, Next.js lo cattura con questo Error Boundary e renderizza error.tsx invece di far crashare l'intera app. La funzione reset() permette all'utente di riprovare senza un reload completo. Gli errori sono contenuti al segmento — il layout e il resto dell'app rimangono intatti.
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
Questi file ti danno una gestione robusta del caricamento e degli errori per ogni route gratuitamente — un UI di caricamento basato su Suspense che abilita lo streaming, e error boundary con scope al segmento e retry.
Invece di passare lo stato isLoading/error attraverso i componenti, rilasci un loading.tsx e error.tsx e Next.js gestisce il cablaggio, producendo un'UX resiliente e reattiva.