ये 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 जो स्ट्रीमिंग सक्षम करता है, और पुनः प्रयास के साथ सेगमेंट-स्कोप्ड error boundaries।
कंपोनेंट्स के माध्यम से isLoading/error स्थिति को थ्रेड करने के बजाय, आप loading.tsx और error.tsx में डालते हैं और Next.js वायरिंग को संभालता है, एक लचीला, प्रतिक्रियाशील UX पैदा करता है।