Kako delujeta loading.tsx in error.tsx?

Question

Accepted Answer

To so **posebne datoteke** v App Routerju, ki samodejno zagotavljajo stanja nalaganja in napak za segment маршrutизacije — Next.js ju prežiči z React Suspense in Error Boundaries, zato vam ni treba pisati tega plodnega koda. ## loading.tsx — takojšen UI nalaganja prek Suspense ```tsx // app/dashboard/loading.tsx export default function Loading() { return ; // shown while the page's data is being fetched } ``` Next.js samodejno zavije `page.tsx` segmenta v `` mejo s tem kot fallback. Medtem ko async Server Component čaka na svoje podatke, uporabnik takoj vidi UI iz `loading.tsx` — nato se pravi vsebina pretakuje. Brez ročnega upravljanja stanja nalaganja. ```text User navigates → loading.tsx shows INSTANTLY → data resolves → page replaces it ``` ## error.tsx — error boundary za segment ```tsx "use client"; // error components MUST be Client Components export default function Error({ error, reset, }: { error: Error; reset: () => void; // retry: re-renders the segment }) { return (

Something went wrong: {error.message}

); } ``` Če stran (ali njeno pridobivanje podatkov) vrže napako, jo Next.js ulovi s to Error Boundary in prikaže `error.tsx` **namesto da bi sesul cel program**. Funkcija `reset()` omogoči uporabniku ponovni poskus brez polne osvežitve. Napake so *omejene* na segment — razporeditev in preostanek aplikacije ostanejo nepoškodovani. ## Povezane posebne datoteke ```text 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 ``` ## Zakaj je to pomembno Te datoteke vam dajejo robusten odgovor nalaganja in obravnavo napak na маршрут **brezplačno** — Suspense UI za nalaganje, ki omogoči pretakovanje, in meje za napake, omejene na segment, s ponovnim poskusom. Namesto da bi stanje `isLoading`/`error` prepredli skozi komponente, spustite `loading.tsx` in `error.tsx` in Next.js opravi povezovanje, kar proizvede trdno, odzivno UX izkušnjo.