بناء صفحات ديناميكية في Next.js بسهولة

x32x01
  • بواسطة x32x01 ||
لو عايز تبني صفحات ديناميكية في Next.js 🔥، لازم تفهم الأول Dynamic Routing. الفكرة بسيطة جدًا: بدل ما تعمل صفحة ثابتة لكل منتج أو مقال عندك، تقدر تعمل صفحة واحدة بس تستقبل الـ URL parameters زي ID، وده هيوفرلك وقت ومجهود كبير، خصوصًا لو عندك بيانات كتير.

إيه هو Dynamic Routing في Next.js؟​

الـ Dynamic Routing في Next.js بيسمحلك تعمل صفحات تعتمد على الـ URL parameters. يعني بدل ما تعمل صفحات ثابتة لكل عنصر، صفحة واحدة ديناميكية ممكن تعرض بيانات مختلفة حسب ID أو أي متغير في الـ URL.

مثال سريع:
  • /products/1 ➡️ هيعرض تفاصيل المنتج الأول
  • /products/2 ➡️ هيعرض تفاصيل المنتج التاني
ده بيسهل عليك إدارة الصفحات لو عندك منتجات أو مقالات كتير جدًا 🛒📰.

خطوات بناء صفحة ديناميكية​


1. إنشاء ملف ديناميكي​

أول خطوة: تعمل ملف ديناميكي جوا مجلد pages/. لو مثلاً عندك منتجات:
  • انشئ مجلد اسمه products/
  • جواه اعمل ملف اسمه [id].js
الـ [id] هو الـ dynamic segment اللي هيتغير حسب الـ product ID.

2. استخدام getStaticPaths​

عشان تحدد الـ paths اللي Next.js يولدها وقت الـ build، استخدم getStaticPaths.
مثال:
JavaScript:
export async function getStaticPaths() {
const paths = [
{ params: { id: '1' } },
{ params: { id: '2' } },
{ params: { id: '3' } },
];
return { paths, fallback: false };
}
في المثال دا، حددنا 3 صفحات حسب الـ ID لكل منتج، وNext.js هتولد الصفحات دي وقت الـ build.

3. استخدام getStaticProps​

الفنكشن getStaticProps بتجيب البيانات لكل صفحة بناءً على الـ params من الـ URL.
مثال:
JavaScript:
export async function getStaticProps({ params }) {
const productData = await fetch(
`https://api.example.com/products/${params.id}`
).then(res => res.json());

return {
props: {
product: productData,
},
};
}
الـ ID اللي جاي من الـ URL بيحدد أي بيانات نجيب من الـ API ونبعتها للـ Component.

4. تصميم صفحة المنتج​

في الملف [id].js، نعرض البيانات اللي جبناها من الـ API:
JavaScript:
export default function Product({ product }) {
return ( <div> <h1>{product.name}</h1> <p>{product.description}</p> <span>{product.price} جنيه</span> </div>
);
}
الصفحة هتعرض اسم المنتج، الوصف، والسعر بشكل ديناميكي حسب الـ ID.

ليه تستخدم Dynamic Routing؟​

  • توفير وقت ومجهود ⏱️: مش محتاج تعمل صفحة لكل عنصر، تقدر تستخدم نفس الصفحة ببيانات مختلفة.
  • تحسين الأداء ⚡: الصفحات اللي بتتولد وقت الـ build (SSG) هتكون سريعة جدًا.
  • تحسين SEO 🔍: الصفحات الجاهزة يسهل على محركات البحث زي Google فهرستها.
  • تحديث البيانات بسهولة 🔄: لو البيانات بتتغير باستمرار، ممكن تستخدم SSR أو fallback: true عشان الزائر دايمًا يشوف أحدث نسخة.

نصيحة عملية للمشاريع الكبيرة​

لو عندك عدد كبير من الصفحات، ومش عايز تولد كل الصفحات وقت الـ build:
  • استخدم fallback: true
  • ده بيخلي Next.js تولد الصفحات الناقصة أول ما المستخدم يطلبها.
  • هيساعدك تحافظ على أداء الموقع وسرعة التصفح 🏎️.

Dynamic Routing في Next.js هيوفرلك طريقة ذكية لبناء صفحات ديناميكية بسرعة وكفاءة، هيوفر وقتك ويخلي موقعك سريع، وكمان يحسن الـ SEO. استخدم getStaticPaths و getStaticProps صح، واعتني بـ fallback لو عندك بيانات كتير.
 
التعديل الأخير:
المواضيع ذات الصلة
x32x01
الردود
1
المشاهدات
329
x32x01
x32x01
x32x01
الردود
0
المشاهدات
348
x32x01
x32x01
x32x01
الردود
0
المشاهدات
329
x32x01
x32x01
x32x01
الردود
0
المشاهدات
347
x32x01
x32x01
x32x01
الردود
0
المشاهدات
354
x32x01
x32x01
x32x01
الردود
0
المشاهدات
364
x32x01
x32x01
x32x01
الردود
0
المشاهدات
425
x32x01
x32x01
x32x01
الردود
0
المشاهدات
1K
x32x01
x32x01
x32x01
الردود
0
المشاهدات
547
x32x01
x32x01
x32x01
الردود
0
المشاهدات
344
x32x01
x32x01
الدخول أو التسجيل السريع
نسيت كلمة مرورك؟
إحصائيات المنتدى
المواضيع
1,830
المشاركات
2,027
أعضاء أكتب كود
464
أخر عضو
رشن7
عودة
أعلى