التنقل من جانب العميل
مكون Link يتيح التنقل من جانب العميل (Client-Side Navigation) بين صفحتين في نفس تطبيق Next.js.
التنقل من جانب العميل يعني أن انتقال الصفحة يحدث باستخدام JavaScript، وهو أسرع من التنقل الافتراضي الذي يقوم به المتصفح.
إليك طريقة بسيطة للتحقق من ذلك:
- استخدم أدوات المطور في المتصفح لتغيير خاصية CSS
backgroundلعنصر<html>إلىyellow. - انقر على الروابط للانتقال ذهابًا وإيابًا بين الصفحتين.
- ستلاحظ أن الخلفية الصفراء تظل كما هي أثناء انتقال الصفحات.
هذا يوضح أن المتصفح لا يقوم بتحميل الصفحة كاملة وأن التنقل من جانب العميل يعمل بشكل صحيح.
إذا كنت قد استخدمت <a href="…"> بدلاً من <Link href="…"> وقمت بهذا الاختبار، فسيتم مسح لون الخلفية عند النقر على الروابط لأن المتصفح يقوم بعمل تحديث كامل للصفحة.
تقسيم الكود والجلب المسبق
يقوم Next.js تلقائيًا بتقسيم الكود (Code Splitting)، بحيث يتم تحميل كل صفحة فقط ما تحتاجه من كود. هذا يعني أنه عند عرض الصفحة الرئيسية، لا يتم تحميل كود الصفحات الأخرى في البداية.
هذا يضمن تحميل الصفحة الرئيسية بسرعة حتى إذا كان لديك مئات الصفحات.
تحميل كود الصفحة المطلوبة فقط يعني أيضًا أن الصفحات تصبح معزولة. إذا حدث خطأ في صفحة معينة، سيظل بقية التطبيق يعمل.
علاوة على ذلك، في نسخة الإنتاج من Next.js، عندما تظهر مكونات Link في نافذة العرض للمتصفح، يقوم Next.js تلقائيًا بجلب الكود مسبقًا (Prefetching) للصفحة المرتبطة في الخلفية. بحلول وقت النقر على الرابط، سيكون كود الصفحة الهدف قد تم تحميله مسبقًا في الخلفية، وسيكون انتقال الصفحة شبه فوري!
ملخص
يقوم Next.js تلقائيًا بتحسين أداء تطبيقك من خلال تقسيم الكود، والتنقل من جانب العميل، والجلب المسبق (في نسخة الإنتاج).
يمكنك إنشاء مسارات كملفات داخل مجلد pages واستخدام مكون Link المدمج. لا حاجة إلى مكتبات توجيه إضافية.
يمكنك معرفة المزيد عن مكون Link في مرجع API لـ next/link وعن التوجيه بشكل عام في توثيق التوجيه.
ملاحظة: إذا كنت بحاجة إلى الربط بصفحة خارجية خارج تطبيق Next.js، استخدم فقط علامة
<a>بدونLink.