Next.js • المستوى الثاني • الدرس 1

المسارات الديناميكية والمعاملات (Dynamic Routes & [id])

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

تسمية المجلدات بين أقواس مربعة مثل [id] لبناء مسارات ديناميكية.
استقبال المتغيرات واستخراج القيم عبر كائن params.
معالجة مسار واحد لعرض بيانات مختلفة بناءً على المعامل.
استخدام params.slug و params.id و params.category.

1. كيفية بناء Dynamic Routes

عند إضافة مجلد باسم app/products/[id]/page.js، ستقوم Next.js بمعالجة أي رابط مثل /products/100 أو /products/iphone وتمرير المعامل تلقائياً لـ params.id.

bash

app/
├── blog/
│   └── [id]/
│       └── page.js    →  /blog/1
│                      →  /blog/hello-world
│                      →  /blog/anything
└── products/
    └── [category]/
        └── [slug]/
            └── page.js  →  /products/tech/iphone-15

2. البيانات المحاكاة في المحرر

داخل المحرر التفاعلي، يتم تمرير كائن params تلقائياً بالقيم التالية حتى تستطيع تجربة الكود مباشرة:

javascript

// القيم المتاحة داخل params في المحرر
{
  id: "42",
  slug: "nextjs-dynamic-routes",
  category: "programming",
  username: "jamal"
}

التطبيق العملي المباشر

تحدي الدرس الأول: عرض رابط المقال

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

أضف فقرة ثالثة <p> أسفل الفقرتين الحاليتين.
اعرض فيها المسار الكامل للمقال بالصيغة: "رابط المقال: /blog/[id]".
استخدم {params.id} لجعل الرابط ديناميكياً.
يمكنك إضافة تنسيق رمادي فاتح (#94a3b8) وحجم أصغر (14px) لتمييزه.

⏳ جارٍ تحميل المحرر التفاعلي...

فهرس المستوى 2 الانتقال للدرس الثاني