لماذا يهم هذا الدرس؟

فهم حالات Not Found واستخدامه بصورة صحيحة داخل مشروع App Router. ملفات Loading وError وNot-found عقود UX على مستوى Route؛ تشرح التأخير وتسمح بالتعافي من Render Failures وتفرق المورد المفقود عن Internal Error.

كيف تفكر فيه؟

  • في درس حالات Not Found، النتيجة التي يجب أن تتحقق: استخدم حالة 404 صريحة عندما لا يكون المورد موجودًا.
  • في سياق حالات Not Found، الخطر الذي يجب أن يبقى تحت السيطرة: Spinner عام أوStack Trace مكشوف لا يقدم Recovery Path مفيدًا وقد يكشف تفاصيل التنفيذ.
  • تطبيق حالات Not Found: أضف Loading وRecoverable Error وNot-found إلى Dynamic Route واحدة ثم فعّل كل حالة عمدًا.

تطبيق عملي

في التطبيق الخاص بدرس حالات Not Found: استخدم حالة 404 صريحة عندما لا يكون المورد موجودًا.

app/products/[id]/page.tsxtsx
import { notFound } from 'next/navigation';

const product = await getProduct(id);
if (!product) notFound();

جرّب بنفسك

Practice

تمرين حالات Not Found

أضف Loading وRecoverable Error وNot-found إلى Dynamic Route واحدة ثم فعّل كل حالة عمدًا.

  • سجل النتيجة المتوقعة قبل التنفيذ
  • اختبر حالة صحيحة وحالة فشل مرتبطة بالدرس
  • اشرح في سطرين أين يوجد الحد المسؤول عن القرار

الخلاصة