لماذا يهم هذا الدرس؟
فهم المسارات الديناميكية واستخدامه بصورة صحيحة داخل مشروع App Router. تسمح Dynamic Segments وRoute Groups وLink لشجرة Routes بتمثيل Identifiers متغيرة وتنظيم الملفات دون Hard-coded Navigation.
كيف تفكر فيه؟
- في درس المسارات الديناميكية، النتيجة التي يجب أن تتحقق: عامل المسار جزء من عقد الصفحة ويجب التحقق منه قبل استخدامه في استعلام حساس.
- في سياق المسارات الديناميكية، الخطر الذي يجب أن يبقى تحت السيطرة: استخدام Anchor URLs خام دائمًا أوالثقة في Dynamic Parameter غير متحقق قد يكسر الانتقالات ويمرر قيمًا خطرة للاستعلامات.
- تطبيق المسارات الديناميكية: أنشئ Dynamic Product Route داخل Route Group وانتقل إليها بـLink بعد التحقق من Identifier.
تطبيق عملي
في التطبيق الخاص بدرس المسارات الديناميكية: عامل المسار جزء من عقد الصفحة ويجب التحقق منه قبل استخدامه في استعلام حساس.
app/products/[id]/page.tsxtsx
export default async function ProductPage({ params }: { params: Promise<{ id: string }> }) {
const { id } = await params;
return <h1>Product {id}</h1>;
}جرّب بنفسك
تمرين المسارات الديناميكية
أنشئ Dynamic Product Route داخل Route Group وانتقل إليها بـLink بعد التحقق من Identifier.
- سجل النتيجة المتوقعة قبل التنفيذ
- اختبر حالة صحيحة وحالة فشل مرتبطة بالدرس
- اشرح في سطرين أين يوجد الحد المسؤول عن القرار