NahdaAIنهضة
Next.js • المستوى الثاني • الدرس 4

واجهات العرض المؤقتة ومعالجة الأخطاء (loading.js & error.js)

العودة لفهرس المستوى

أهداف الدرس العلمية

  • توفير واجهات هافية بـ loading.js لتجربة مستخدم ممتازة أثناء الانتظار.
  • عزل الأخطاء والسيطرة عليها على مستوى الصفحة عبر ملف error.js.
  • فهم دور React Suspense في تجربة المستخدم.
  • بناء مؤشرات تحميل احترافية (Spinners, Skeletons).

1. الملفات الخاصة في App Router

بمجرد وجود ملف loading.js في أي مجلد، ستقوم Next.js بتغليف الصفحة بـ React Suspense تلقائياً لعرض شاشة الترقب لحين اكتمال التحميل.

bash
app/dashboard/
├── page.js           ← الصفحة الرئيسية
├── loading.js        ← تُعرض تلقائياً أثناء التحميل
├── error.js          ← تُعرض عند حدوث خطأ
└── not-found.js      ← تُعرض لخطأ 404

2. ملف error.js لمعالجة الأخطاء

يلتقط ملف error.js تلقائياً أي خطأ يحدث داخل الصفحة، ويتيح للمستخدم إعادة المحاولة دون مغادرة الموقع:

javascript
'use client'; // ← إجباري لملف error

export default function Error({ error, reset }) {
  return (
    <div>
      <h2>حدث خطأ غير متوقع!</h2>
      <button onClick={() => reset()}>إعادة المحاولة</button>
    </div>
  );
}
التطبيق العملي المباشر

تحدي الدرس الرابع: بناء شاشة تحميل احترافية

قم بالتعديل على الكود في المحرر أدناه:

  1. أضف دائرة دوران (Spinner) متحركة باستخدام CSS animation.
  2. غيّر نص العنوان إلى: "⏳ جاري تحميل لوحة التحكم".
  3. أضف فقرة ثانوية <p> تحمل نصاً إرشادياً باللون الرمادي الفاتح.
⏳ جارٍ تحميل المحرر التفاعلي...