ఇవి App Router లో ప్రత్యేక ఫైల్లు, ఇవి మార్గ విభాగానికి స్వయంచాలితంగా లోడింగ్ మరియు లోపం స్థితులను అందిస్తాయి — Next.js వాటిని React Suspense మరియు Error Boundaries తో కనెక్ట్ చేస్తుంది, కాబట్టి మీరు ఆ బాయిలర్ప్లేట్ కోడ్ రాయవలసిన అవసరం లేదు.
() {
;
}
Next.js స్వయంచాలితంగా విభాగం యొక్క page.tsx ను ఈ ఫాల్బ్యాక్తో <Suspense> సరిహద్దుకు చేర్చుతుంది. ఒక async Server Component దాని డేటా కోసం ఎదురుచూస్తుండగా, వినియోగదారు loading.tsx నుండి UI తక్షణమే చూస్తారు — అప్పుడు నిజమైన విషయవస్తువు ప్రవాహాన్ని. ఎటువంటి మాన్యువల్ లోడింగ్-స్థితి నిర్వహణ లేదు.
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>
);
}
పేజీ (లేదా దాని డేటా ఫెచింగ్) లోపాన్ని విసర్జించినట్లయితే, Next.js ఈ Error Boundary తో దానిని పట్టుకుని error.tsx మొత్తం అనువర్తనాన్ని క్రాష్ చేయటానికి బదులుగా రెండర్ చేస్తుంది. reset() ఫంక్షన్ పూర్తి రీలోడ్ లేకుండా వినియోగదారుని మళ్లీ ప్రయత్నం చేయడానికి అనుమతిస్తుంది. లోపాలు విభాగానికి పరిమితం — లేআউట్ మరియు అనువర్తనం యొక్క మిగిలిన భాగం అలాగే ఉంటుంది.
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
ఈ ఫైల్లు మీకు మార్గానికి ఉచితంగా బలమైన లోడింగ్ మరియు లోపం నిర్వహణను అందిస్తాయి — Suspense-ఆధారిత లోడింగ్ UI ఇది స్ట్రీమింగ్ను సక్షమ చేస్తుంది, మరియు విభాగ-స్కోప్డ్ లోపం సరిహద్దులు మళ్లీ ప్రయత్నం సహ.
కంపోనెంట్ల ద్వారా isLoading/error స్థితిని థ్రెడ్ చేయుటకు బదులుగా, మీరు loading.tsx మరియు error.tsx లో పడమర్చుకుని Next.js వైరింగ్ నిర్వహిస్తుంది, దృఢమైన, ప్రతిస్పందించే UX ను ఉత్పత్తి చేస్తుంది.