یہ 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 اپنا ڈیٹا wait کرتا ہے، صارف فوری طور پر loading.tsx UI دیکھتا ہے — پھر حقیقی مواد آتا ہے۔ کوئی manual loading-state management نہیں۔
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 (یا اس کا ڈیٹا fetching) throw کرے تو Next.js اسے اس Error Boundary سے پکڑتا ہے اور error.tsx کو render کرتا ہے پورے app کو crash کرنے کی بجائے۔ reset() فنکشن صارف کو full reload کے بغیر دوبارہ کوشش کرنے دیتا ہے۔ Errors segment تک محدود ہیں — layout اور باقی app محفوظ رہتے ہیں۔
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 کے لیے مضبوط loading اور error handling مفت میں دیتی ہیں — Suspense-based loading UI جو streaming کو ممکن بناتا ہے، اور segment-scoped error boundaries retry کے ساتھ۔
اس کی بجائے کہ آپ isLoading/error state کو components میں استعمال کریں، آپ loading.tsx اور error.tsx میں drop کرتے ہیں اور Next.js wiring کو سنبھالتا ہے، ایک مضبوط، جوابدہی دینے والا UX تخلیق کرتے ہوئے۔