Is iad seo comhaid speisialta san App Router a sholáthraíonn stáit lucháil agus earráide go fautomatically do shraith an tsíl — féadann Next.js iad a dhraighean le React Suspense agus Error Boundaries ionas nach gcaithfidh tú an boilerplate seo a scríobh.
() {
;
}
Draigheanann Next.js go fually an page.tsx an tsraith i theorainn <Suspense> agus seo mar an fallback. Mar sin, agus Server Component asynchronous ag fanacht ar a shonraí, feiceann an úsáideoir láithreach an UI loading.tsx — ansin sruthann an fíor-ábhar isteach. Gan bhainistiú stáit lucháil manuálach.
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>
);
}
Má thairgean an leathanach (nó a sholáthar sonraí) earráid, glacann Next.js í le seo Error Boundary agus rindeann sé error.tsx in ionad an fheidhmchlár ar fad a bhrisadh. Ceadaíonn an fheidhm reset() don úsáideoir atriail a dhéanamh gan athlódáil iomlán. Tá earráidí líonadh don tsraith — fanann an leagan amach agus an chuid eile den fheidhmchlár slán.
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
Tugann na comhaid seo bainistiú láidir lucháil agus earráide in aghaidh an tsíl saor in aisce duit — UI lucháil bunaithe ar Suspense a chumasaíonn sruthú, agus error boundaries scóipe-líonadh le deis atriail.
In ionad stát isLoading/error a threorú trí chomhpháirteanna, leagann tú loading.tsx agus error.tsx síos agus bainistríonn Next.js an draighean, ag táirgeadh UX docht agus freagarach.