<Link>

التنقّل من جهة العميل مع Prefetch <Link>

يوسّع <a> بتنقّل من جهة العميل بدون إعادة تحميل كامل، وجلب مسبق (prefetch) تلقائي للمسارات الظاهرة بالشاشة.

يستورد من next/link، وهو الطريقة الافتراضية والموصى فيها للتنقّل بين الصفحات. الـ prefetch يعمل فقط بالإنتاج (production) — مو أثناء التطوير المحلي، ويحصل تلقائيًا لما الرابط يدخل نطاق الرؤية بالشاشة.

خاصية href تقبل نصًا مباشرة أو كائنًا { pathname, query } لبناء رابط مع query params.

الصياغة

import Link from 'next/link';
<Link href="/path">نص</Link>

📄 مثال

import Link from 'next/link';

export default function PostList({ posts }: { posts: { slug: string; title: string }[] }) {
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.slug}>
          <Link href={`/blog/${post.slug}`}>{post.title}</Link>
        </li>
      ))}
    </ul>
  );
}

أهم النقاط

العنصر	الوظيفة
href	مسار أو رابط نصي، أو كائن { pathname, query }
prefetch	'auto'/null افتراضي حسب نوع المسار، true يجلب المسار كاملًا، false يعطّله
replace	true يستبدل سجل التاريخ الحالي بدل ما يضيف سجلًا جديدًا

💡 نصائح عملية

اتركه الخيار الافتراضي لأي تنقّل — استخدم useRouter فقط لحالات خاصة (بعد حدث أو شرط معيّن)
استخدم usePathname() مع className شرطي لتمييز الرابط النشط بالقائمة

⚠️ أخطاء شائعة

تعطيل prefetch بدون سبب واضح — يبطئ التنقّل بلا فايدة حقيقية بمعظم الحالات
توقّع أن الـ prefetch يعمل بالتطوير المحلي — يعمل فقط بالإنتاج

🎓 تريد فهم الصورة الكاملة خطوة بخطوة؟ ابدأ من مسار NEXTJS الكامل بالعربي.