यी विशेष फाइलहरू App Router मा छन् जो स्वचालित रूपमा route segment को लागि loading र error states प्रदान गर्छन् — Next.js ले तिनीहरूलाई React Suspense र Error Boundaries सँग जोडिन्छ ताकि तपाईंले त्यो boilerplate लेख्नु पर्दैन।
() {
;
}
Next.js स्वचालित रूपमा segment को page.tsx लाई <Suspense> boundary मा यसलाई fallback को रूपमा राख्छ। त्यसैले async Server Component ले यसको डेटा अपेक्षा गरेको समयमा, प्रयोगकर्ताले तत्काल loading.tsx UI देख्छ — त्यसपछि वास्तविक सामग्री स्ट्रिम हुन्छ। कुनै पनि म्यानुअल loading-state प्रबन्धन छैन।
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>
);
}
यदि page (वा यसको डेटा फेचिङ्) त्रुटि फेंकेको छ भने, Next.js ले यसलाई Error Boundary सँग क्याच गर्छ र error.tsx सम्पूर्ण एप क्रैश हुनुको सट्टा रेन्डर गर्छ। reset() फंक्शनले प्रयोगकर्तालाई पूर्ण रिलोड बिना पुनः प्रयास गर्न दिन्छ। त्रुटिहरू segment मा सीमित छन् — layout र बाकी एप सुरक्षित रहन्छ।
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
यी फाइलहरूले तपाईंलाई प्रति route मुफ्त मा robust loading र error handling दिन्छ — Suspense-आधारित loading UI जो स्ट्रिमिङ सक्षम गर्छ, र segment-scoped error boundaries retry को साथ।
isLoading/error state कम्पोनेन्टहरूको माध्यमबाट थ्रेड गर्नुको सट्टा, तपाईं loading.tsx र error.tsx मा राख्छु र Next.js ले वायरिङ सम्हाल्छ, एक लचिलो, प्रतिक्रियाशील UX उत्पादन गर्दै।