Ovo su posebne datoteke u App Routeru koja automatski pružaju stanja učitavanja i greške za segment rute — Next.js ih povezuje s React Suspense i Error Boundaries kako ne biste morali pisati taj boilerplate kod.
() {
;
}
Next.js automatski omota page.tsx segmenta u <Suspense> granicu s ovim kao fallback. Dakle, dok async Server Component čeka svoje podatke, korisnik odmah vidi loading.tsx UI — zatim se stvarni sadržaj streamira. Nema ručnog upravljanja stanjem učitavanja.
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>
);
}
Ako stranica (ili njezina dohvat podataka) baci grešku, Next.js je hvata s ovom Error Boundary i prikazuje error.tsx umjesto da sruši cijelu aplikaciju. Funkcija reset() dozvoljava korisniku ponovno pokušanje bez punog osvježavanja. Greške su sadržane na segmentu — raspored i ostatak aplikacije ostaju netaknuti.
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
Ove datoteke daju vam robustan rad s učitavanjem i greškama po ruti besplatno — UI za učitavanje temeljen na Suspenseu koji omogućava streaming i error boundaries s opsegom segmenta s mogućnošću ponovnog pokušaja.
Umjesto prenošenja stanja isLoading/error kroz komponente, ispustite loading.tsx i error.tsx i Next.js će se pobrinuti za povezivanje, proizvodeći otpornu, responzivnu UX.