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

.
مثال:
في المثال دا، حددنا 3 صفحات حسب الـ ID لكل منتج، وNext.js هتولد الصفحات دي وقت الـ build.
مثال:
الـ ID اللي جاي من الـ URL بيحدد أي بيانات نجيب من الـ API ونبعتها للـ Component.
الصفحة هتعرض اسم المنتج، الوصف، والسعر بشكل ديناميكي حسب الـ ID.
Dynamic Routing في Next.js هيوفرلك طريقة ذكية لبناء صفحات ديناميكية بسرعة وكفاءة، هيوفر وقتك ويخلي موقعك سريع، وكمان يحسن الـ SEO. استخدم getStaticPaths و getStaticProps صح، واعتني بـ fallback لو عندك بيانات كتير.

إيه هو Dynamic Routing في Next.js؟
الـ Dynamic Routing في Next.js بيسمحلك تعمل صفحات تعتمد على الـ URL parameters. يعني بدل ما تعمل صفحات ثابتة لكل عنصر، صفحة واحدة ديناميكية ممكن تعرض بيانات مختلفة حسب ID أو أي متغير في الـ URL.مثال سريع:
/products/1
هيعرض تفاصيل المنتج الأول
/products/2
هيعرض تفاصيل المنتج التاني


خطوات بناء صفحة ديناميكية
1. إنشاء ملف ديناميكي
أول خطوة: تعمل ملف ديناميكي جوا مجلد pages/. لو مثلاً عندك منتجات:- انشئ مجلد اسمه
products/
- جواه اعمل ملف اسمه
[id].js
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. استخدام 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,
},
};
}
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>
);
}
ليه تستخدم Dynamic Routing؟
- توفير وقت ومجهود
: مش محتاج تعمل صفحة لكل عنصر، تقدر تستخدم نفس الصفحة ببيانات مختلفة.
- تحسين الأداء
: الصفحات اللي بتتولد وقت الـ build (SSG) هتكون سريعة جدًا.
- تحسين SEO
: الصفحات الجاهزة يسهل على محركات البحث زي Google فهرستها.
- تحديث البيانات بسهولة
: لو البيانات بتتغير باستمرار، ممكن تستخدم SSR أو
fallback: true
عشان الزائر دايمًا يشوف أحدث نسخة.
نصيحة عملية للمشاريع الكبيرة
لو عندك عدد كبير من الصفحات، ومش عايز تولد كل الصفحات وقت الـ build:- استخدم
fallback: true
- ده بيخلي Next.js تولد الصفحات الناقصة أول ما المستخدم يطلبها.
- هيساعدك تحافظ على أداء الموقع وسرعة التصفح
.
Dynamic Routing في Next.js هيوفرلك طريقة ذكية لبناء صفحات ديناميكية بسرعة وكفاءة، هيوفر وقتك ويخلي موقعك سريع، وكمان يحسن الـ SEO. استخدم getStaticPaths و getStaticProps صح، واعتني بـ fallback لو عندك بيانات كتير.
التعديل الأخير: