مكون Link

عند الربط بين الصفحات على المواقع الإلكترونية، يتم استخدام وسم <a> في HTML.

في Next.js، يمكنك استخدام مكون Link من next/link للربط بين الصفحات في تطبيقك. يسمح لك <Link> بالتنقل من جانب العميل (client-side navigation) ويقبل خصائص (props) تمنحك تحكمًا أفضل في سلوك التنقل.

استخدام <Link>

أولاً، افتح ملف pages/index.js، واستورد مكون Link من next/link عن طريق إضافة هذا السطر في الأعلى:

import Link from 'next/link';

ثم ابحث عن وسم h1 الذي يبدو هكذا:

<h1 className={styles.title}>
  Learn <a href="https://nextjs.org">Next.js!</a>
</h1>

وغيره إلى:

<h1 className={styles.title}>
  اقرأ <Link href="/posts/first-post">هذه الصفحة!</Link>
</h1>

بعد ذلك، افتح ملف pages/posts/first-post.js واستبدل محتواه بما يلي:

import Link from 'next/link';
 
export default function FirstPost() {
  return (
    <>
      <h1>أول منشور</h1>
      <h2>
        <Link href="/">العودة إلى الصفحة الرئيسية</Link>
      </h2>
    </>
  );
}

كما ترى، مكون Link مشابه لاستخدام وسوم <a>، ولكن بدلاً من <a href="…">، تستخدم <Link href="…">.

ملاحظة: قبل إصدار Next.js 12.2، كان مطلوبًا أن يحيط مكون Link بوسم <a>، ولكن لم يعد هذا مطلوبًا في الإصدارات 12.2 وما فوق.

لنتحقق مما إذا كان يعمل. يجب أن يكون لديك الآن رابط في كل صفحة يسمح لك بالانتقال ذهابًا وإيابًا: