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 ← تُعرض لخطأ 4042. ملف error.js لمعالجة الأخطاء
يلتقط ملف error.js تلقائياً أي خطأ يحدث داخل الصفحة، ويتيح للمستخدم إعادة المحاولة دون مغادرة الموقع:
javascript
'use client'; // ← إجباري لملف error
export default function Error({ error, reset }) {
return (
<div>
<h2>حدث خطأ غير متوقع!</h2>
<button onClick={() => reset()}>إعادة المحاولة</button>
</div>
);
} التطبيق العملي المباشر
تحدي الدرس الرابع: بناء شاشة تحميل احترافية
قم بالتعديل على الكود في المحرر أدناه:
- أضف دائرة دوران (Spinner) متحركة باستخدام CSS animation.
- غيّر نص العنوان إلى: "⏳ جاري تحميل لوحة التحكم".
- أضف فقرة ثانوية
<p>تحمل نصاً إرشادياً باللون الرمادي الفاتح.
⏳ جارٍ تحميل المحرر التفاعلي...