كيف يعمل `loading.tsx` و `error.tsx`؟

Question

Accepted Answer

هذه **ملفات خاصة** في App Router توفر تلقائياً حالات التحميل والخطأ لقطعة المسار — يربطها Next.js مع React Suspense و Error Boundaries بحيث لا تضطر لكتابة هذا الكود المكرر. ## loading.tsx — واجهة تحميل فورية عبر Suspense ```tsx // app/dashboard/loading.tsx export default function Loading() { return ; // shown while the page's data is being fetched } ``` يقوم Next.js تلقائياً بلف `page.tsx` للقطعة في حد `` مع هذا كـ fallback. لذا بينما ينتظر Server Component غير متزامن بياناته، يرى المستخدم فوراً واجهة `loading.tsx` — ثم يتدفق المحتوى الفعلي. لا توجد إدارة حالة تحميل يدوية. ```text User navigates → loading.tsx shows INSTANTLY → data resolves → page replaces it ``` ## error.tsx — حد خطأ للقطعة ```tsx "use client"; // error components MUST be Client Components export default function Error({ error, reset, }: { error: Error; reset: () => void; // retry: re-renders the segment }) { return (

Something went wrong: {error.message}

); } ``` إذا رمت الصفحة (أو جلب بياناتها) استثناء، يمسكه Next.js باستخدام هذا Error Boundary ويعرض `error.tsx` **بدلاً من تعطل التطبيق بالكامل**. تتيح دالة `reset()` للمستخدم إعادة المحاولة دون تحديث كامل. الأخطاء **محتواة** للقطعة — البطاقة والتطبيق الآخر يبقى سليماً. ## ملفات خاصة ذات صلة ```text 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 تمكّن البث، وحدود خطأ محدودة بالقطعة مع إعادة محاولة. بدلاً من تمرير حالة `isLoading`/`error` عبر المكونات، تسقط `loading.tsx` و `error.tsx` و Next.js يتولى الربط، مما ينتج عنه واجهة مرنة وسريعة الاستجابة.