हे App Router मधील विशेष फाइलें आहेत जी रूट सेगमेंटसाठी स्वयंचलितपणे लोडिंग आणि त्रुटी अवस्था प्रदान करतात — Next.js हे React Suspense आणि Error Boundaries सह जोडते जेणेकरून आपल्याला हा बॉयलरप्लेट कोड लिहावा लागत नाही.
() {
;
}
Next.js स्वयंचलितपणे सेगमेंटच्या page.tsx ला <Suspense> सीमेने गुंडाळते आणि हे फॉलबॅक म्हणून काम करते. तर जेव्हा एक असिंक्रोनस 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 तयार करते.