أزاى تبنى صفحات ديناميكية في Next.js تابعوا معى ..

[x32x01]

إزاي تبني صفحات ديناميكية في Next.js باستخدام Dynamic Routing

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

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

إزاي تبدأ الخطوات:

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

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

2. استخدام getStaticPaths​

عشان تحدد المسارات اللي عايز Next.js يولدها وقت الـ build، لازم تستخدم الـ function getStaticPaths. الفنكشن دي بتحدد الـ paths المتاحة بناءً على product IDs مثلاً.

export async function getStaticPaths() {
  const paths = [
    { params: { id: '1' } },
    { params: { id: '2' } },
    { params: { id: '3' } },
  ];
  return { paths, fallback: false };
}

في المثال ده، بنحدد 3 صفحات بناءً على الـ id لكل منتج وبالتالي Next.js هتعمل generate للصفحات دي وقت الـ build.

3. استخدام getStaticProps​

الفنكشن getStaticProps بتسمحلك تجيب البيانات اللي هتعرضها في الصفحة بناءً على الـ params اللي جايه من الـ URL. يعني في حالتنا دي، هنجيب بيانات المنتج بناءً على الـ ID اللي موجود في الـ URL.

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 على هيئة props.

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

في الملف [id].js، هنعرض البيانات اللي جبناها باستخدام الفنكشن getStaticProps.

export default function Product({ product }) {
  return (
    <div>
      <h1>{product.name}</h1>
      <p>{product.description}</p>
      <span>{product.price} جنيه</span>
    </div>
  );
}

هنا الصفحة بتعرض اسم المنتج، الوصف، والسعر بشكل ديناميكي بناءً على البيانات اللي جبناها من الـ API.

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

1. هتقلل تكرار الصفحات يعني مش هتضطر تعمل صفحة منفصلة لكل عنصر يدويًا. هتعيد استخدام نفس الصفحة لكن مع بيانات مختلفة.
2. في SSG، Next.js بتعمل generate للصفحات وقت الـ build، والصفحات دي بتكون سريعة جدًا في التصفح.
3. تحسين ال SEO، الصفحات اللي بتتعمل لها server-side render أو بتتولد بشكل ثابت، محركات البحث بتقدر تفهرسها بشكل أسرع وأفضل.
4. سهولة التحديث يعني لو البيانات بتتحدث بشكل مستمر (زي أسعار المنتجات مثلاً)، ممكن تستخدم Server-Side Rendering (SSR) أو fallback: true عشان تضمن إن المستخدم دايمًا بيشوف أحدث البيانات.

نصيحة عملية:
لو عندك عدد كبير من الصفحات، ومش عايز تبنيها كلها وقت الـ build، استخدم fallback: true. ده بيخلي Next.js تبني الصفحات الناقصة في وقت التشغيل أول ما المستخدم يطلبها.
وبكده نكون خلصنا شرحنا عن الـ Dynamic Routing