Acestea sunt fișiere speciale în App Router care furnizează automat stări de încărcare și eroare pentru un segment de rută — Next.js le conectează cu React Suspense și Error Boundaries, astfel încât nu trebuie să scrii acel boilerplate.
() {
;
}
Next.js învelește automat page.tsx-ul segmentului într-o limită <Suspense> cu aceasta ca fallback. Deci în timp ce un Server Component asincron așteaptă datele sale, utilizatorul vede imediat interfața loading.tsx — apoi conținutul real se transmite. Fără gestionare manuală a stării de încărcare.
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>
);
}
Dacă pagina (sau preluarea datelor acesteia) aruncă o eroare, Next.js o prinde cu această Error Boundary și redă error.tsx în loc ca întreaga aplicație să se blocheze. Funcția reset() permite utilizatorului să reînceapă fără o reîncărcare completă. Erorile sunt conținute în segment — dispunerea și restul aplicației rămân intacte.
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
Aceste fișiere vă oferă gestionare robustă a încărcării și erorilor pe rută gratuit — interfață de încărcare bazată pe Suspense care permite streaming și limite de eroare cu domeniu de segment cu încercare din nou.
În loc să transmiți starea isLoading/error prin componente, apelezi loading.tsx și error.tsx și Next.js se ocupă de cablajul electric, producând o experiență utilizator resilientă și responsivă.