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

فهم Link والتنقل واستخدامه بصورة صحيحة داخل مشروع App Router. تسمح Dynamic Segments وRoute Groups وLink لشجرة Routes بتمثيل Identifiers متغيرة وتنظيم الملفات دون Hard-coded Navigation.

كيف تفكر فيه؟

  • في درس Link والتنقل، النتيجة التي يجب أن تتحقق: استخدم Link للتنقل الداخلي حتى تستفيد من سلوك Next.js المخصص للتنقل.
  • في سياق Link والتنقل، الخطر الذي يجب أن يبقى تحت السيطرة: استخدام Anchor URLs خام دائمًا أوالثقة في Dynamic Parameter غير متحقق قد يكسر الانتقالات ويمرر قيمًا خطرة للاستعلامات.
  • تطبيق Link والتنقل: أنشئ Dynamic Product Route داخل Route Group وانتقل إليها بـLink بعد التحقق من Identifier.

تطبيق عملي

في التطبيق الخاص بدرس Link والتنقل: استخدم Link للتنقل الداخلي حتى تستفيد من سلوك Next.js المخصص للتنقل.

nav.tsxtsx
import Link from 'next/link';

export function Nav() {
  return <Link href="/dashboard">Dashboard</Link>;
}

جرّب بنفسك

Practice

تمرين Link والتنقل

أنشئ Dynamic Product Route داخل Route Group وانتقل إليها بـLink بعد التحقق من Identifier.

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

الخلاصة