Kif jaħdmu loading.tsx u error.tsx?

Question

Accepted Answer

Dawn huma **fajls speċjali** fl-App Router li automatikament jipprovdu stati ta' tagħbija u żball għal segment ta' rotta — Next.js ijeqhom flimkien ma' React Suspense u Error Boundaries sabiex m'għandekx għad tikteb il-kodiċi ta' boilerplate dak. ## loading.tsx — UI ta' tagħbija istantanja permezz ta' Suspense ```tsx // app/dashboard/loading.tsx export default function Loading() { return ; // shown while the page's data is being fetched } ``` Next.js automatikament iħoll il-`page.tsx` tas-segment f'ħadd `` b'dan bħala fallback. Allura filwaqt li Server Component asincronu joqgħod jistenna d-dejta tiegħu, l-utent immedjatament jara l-UI ta' `loading.tsx` — imbagħad il-kontenut reali jfisser. L-ebda ġestjoni tal-istat ta' tagħbija manwali. ```text User navigates → loading.tsx shows INSTANTLY → data resolves → page replaces it ``` ## error.tsx — ħadd ta' żball għas-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}

); } ``` If il-paġna (jew il-fetching tad-dejta tagħha) tarmi żball, Next.js iħu biex ma tinqabadx b'dan Error Boundary u taħdor `error.tsx` **minflok idammiġ l-applikazzjoni kollha**. Il-funzjoni `reset()` tippermetti lill-utent li jaċċessa mill-ġdid mingħajr tidwir sħiħ. L-iżbalji huma *mibnija* mas-segment — il-layout u l-bqija tal-applikazzjoni jibqgħu ħmiexin. ## Fajls speċjali relatati ```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 ``` ## Għaliex Dan Importanti Dawn il-fajls jigħtuk ġestjoni robusta ta' tagħbija u żball għal kull rotta **b'xejn** — UI ta' tagħbija bbazata fuq Suspense li teabbilita l-istiraming, u ħduda ta' żball b'ambitu tas-segment b'ritentattiv. Invece li tħejjed l-istat `isLoading`/`error` permezz tal-komponenti, inti tieqdu `loading.tsx` u `error.tsx` u Next.js iwettaq il-wajering, li tipproduċi UX reziljenti u responsiv.