Next.js • المستوى الأول • الدرس 4

التنقل وتحسين الوسائط (Link & Image Components)

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

استخدام Link للتنقل بين الصفحات دون الحاجة لإعادة تحميل الصفحة بالكامل (Client-side Navigation).
فهم أهمية مكون Image في تحسين حجم الصور تلقائياً وتسريع التحميل.
الفرق بين <Link> في Next.js و <a> في HTML.
مفهوم التحميل المسبق (Prefetching) الذي يقوم به <Link> تلقائياً.

1. ميزات التنقل ومكون الصور المتقدم

يقوم Next.js بالتحميل المسبق (Prefetching) للصفحات المرتبطة بـ Links بمجرد ظهورها بالشاشة، كما يعالج أبعاد وتمدد الصور بمرونة فائقة.

javascript

// ✅ الطريقة الصحيحة في Next.js
import Link from 'next/link';

<Link href="/courses">الدورات</Link>

// ⚠️ الطريقة القديمة (تُعيد تحميل الصفحة كاملة)
<a href="/courses">الدورات</a>

2. مكون الصور المتقدم (next/image)

يُوفّر next/image تحسينات تلقائية للصور:

🚀 الأداء

ضغط تلقائي + تحويل لصيغ WebP/AVIF الأحدث.

📐 الأبعاد

منع الاهتزاز التراكمي بفضل تحديد width و height مسبقاً.

📱 التجاوب

تحميل أحجام مختلفة حسب حجم شاشة الزائر.

⏳ التحميل التدريجي

عرض placeholder أثناء تحميل الصورة.

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

تحدي الدرس الرابع: إضافة رابط جديد

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

أضف رابطاً ثالثاً داخل قائمة التنقل <nav>.
وجّه الرابط إلى المسار /contact.
اجعل نص الرابط: "تواصل معنا".

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

الدرس السابق الانتقال للمستوى الثاني