الدرس الثاني: إنشاء صفحات متعددة وربطها

مقدمة

في التطبيقات الحديثة، غالبًا ما تحتاج إلى توفير روابط بين صفحات مختلفة داخل التطبيق. في هذا الدرس، سنتعلم كيف يمكننا إنشاء صفحات متعددة في مشروع Next.js وكيفية ربطها باستخدام مكون Link.

1. إنشاء صفحات جديدة

في Next.js، كل ملف في مجلد pages/ يمثل صفحة منفصلة. لنقم بإنشاء صفحتين جديدتين:

صفحة "About"

• افتح مجلد pages/ الخاص بمشروعك.
• قم بإنشاء ملف باسم about.js.
• أضف الكود التالي داخل الملف:

export default function About() {
return (
<div>
<h1>من نحن</h1>
<p>هذه هي صفحة عن الموقع.</p>
</div>
);
}

صفحة "Contact"

• قم بإنشاء ملف آخر باسم contact.js داخل مجلد pages/.
• أضف الكود التالي داخل الملف:

export default function Contact() {
return (
<div>
<h1>اتصل بنا</h1>
<p>يمكنك التواصل معنا عبر البريد الإلكتروني أو الهاتف.</p>
</div>
);
}

2. استخدام مكون Link للتنقل بين الصفحات

للتنقل بين الصفحات في Next.js، نستخدم مكون Link من مكتبة next/link. هذا المكون يوفر طريقة فعالة للتنقل دون إعادة تحميل الصفحة بالكامل، مما يجعل التطبيق أسرع وأكثر كفاءة.

تعديل الصفحة الرئيسية (index.js)

افتح ملف pages/index.js وقم بإجراء التعديلات التالية:

import Link from 'next/link';


export default function Home() {
return (
<div>
<h1>مرحبًا بك في موقعنا!</h1>
<p>اختر صفحة:</p>
<nav>
<ul>
<li>
<Link href="/about">
<a>عن الموقع</a>
</Link>
</li>
<li>
<Link href="/contact">
<a>اتصل بنا</a>
</Link>
</li>
</ul>
</nav>
</div>
);
}

شرح الكود:

• استوردنا مكون Link من next/link.
• استخدمنا العنصر <Link> لربط الصفحات.
• داخل <Link>, استخدمنا خاصية href لتحديد المسار الذي نريد الانتقال إليه.
• استخدمنا العنصر <a> داخل <Link> لعرض النص القابل للنقر.

3. تشغيل المشروع وتجربة التنقل

بعد حفظ التعديلات، يمكنك تشغيل المشروع باستخدام الأمر التالي إذا لم يكن يعمل بالفعل:

npm run dev

افتح المتصفح واذهب إلى http://localhost:3000 . ستلاحظ أن لديك الآن روابط لصفحات "About" و"Contact". عند النقر على أي منها، سيتم الانتقال إلى الصفحة المطلوبة دون الحاجة لإعادة تحميل الصفحة بالكامل.

4. دعم المسارات الديناميكية

Next.js يدعم أيضًا المسارات الديناميكية (Dynamic Routes)، مما يعني أنه يمكنك إنشاء صفحات تعتمد على بيانات ديناميكية. لنأخذ مثالًا بسيطًا:

إنشاء صفحة ديناميكية

• افتح مجلد pages/.
• قم بإنشاء مجلد باسم products/.
• داخل مجلد products/، قم بإنشاء ملف باسم [id].js.

ملحوظة: اسم الملف [id].js يشير إلى أن هذه الصفحة ديناميكية وتستقبل قيمة id كجزء من المسار.

إضافة الكود إلى [id].js:

export default function Product({ id }) {
return (
<div>
<h1>تفاصيل المنتج</h1>
<p>ID المنتج: {id}</p>
</div>
);
}


export async function getServerSideProps(context) {
const { id } = context.params; // الحصول على ID من المسار
return {
props: {
id, // تمرير ID إلى المكون
},
};
}

إضافة رابط للصفحة الديناميكية

عدل ملف index.js لإضافة رابط للمنتجات:

import Link from 'next/link';


export default function Home() {
return (
<div>
<h1>مرحبًا بك في موقعنا!</h1>
<p>اختر صفحة:</p>
<nav>
<ul>
<li>
<Link href="/about">
<a>عن الموقع</a>
</Link>
</li>
<li>
<Link href="/contact">
<a>اتصل بنا</a>
</Link>
</li>
<li>
<Link href="/products/123">
<a>منتج رقم 123</a>
</Link>
</li>
</ul>
</nav>
</div>
);
}

5. اختبار المسار الديناميكي

افتح المتصفح واذهب إلى http://localhost:3000/products/123 . ستظهر لك صفحة تعرض تفاصيل المنتج بناءً على ID.

ختام الدرس الثاني

في هذا الدرس، تعلمت كيفية:

1. إنشاء صفحات متعددة في Next.js.
2. استخدام مكون Link للتنقل بين الصفحات.
3. إنشاء مسارات ديناميكية باستخدام ملفات مثل [id].js.

في الدرس القادم، سنتحدث عن إدارة الأنماط في Next.js وكيفية إضافة CSS وجوانب التصميم إلى تطبيقك.

إلى اللقاء في الدرس الثالث! 🚀