موجه الصفحات: تفاصيل المسارات الديناميكية

هذه بعض المعلومات الأساسية التي يجب أن تعرفها عن المسارات الديناميكية.

جلب بيانات من واجهة برمجة تطبيقات خارجية أو استعلام قاعدة بيانات

مثل getStaticProps، يمكن لـ getStaticPaths جلب البيانات من أي مصدر بيانات. في مثالنا، getAllPostIds (الذي يستخدمه getStaticPaths) قد يجلب البيانات من نقطة نهاية لواجهة برمجة تطبيقات خارجية:

export async function getAllPostIds() {
  // بدلاً من نظام الملفات،
  // جلب بيانات المنشورات من نقطة نهاية لواجهة برمجة تطبيقات خارجية
  const res = await fetch('..');
  const posts = await res.json();
  return posts.map((post) => {
    return {
      params: {
        id: post.id,
      },
    };
  });
}

وضع التطوير مقابل وضع الإنتاج

في وضع التطوير (npm run dev أو yarn dev)، يتم تشغيل getStaticPaths في كل طلب.
في وضع الإنتاج، يتم تشغيل getStaticPaths في وقت البناء.

الاحتياطي (Fallback)

تذكر أننا قمنا بإرجاع fallback: false من getStaticPaths. ماذا يعني هذا؟

إذا كان fallback هو false، فإن أي مسارات لم يتم إرجاعها بواسطة getStaticPaths ستؤدي إلى صفحة 404.

إذا كان fallback هو true، فإن سلوك getStaticProps يتغير:

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

إذا كان fallback هو blocking، فسيتم تقديم المسارات الجديدة من جانب الخادم باستخدام getStaticProps، وتخزينها مؤقتًا للطلبات المستقبلية بحيث تحدث مرة واحدة فقط لكل مسار.

هذا يتجاوز نطاق دروسنا، ولكن يمكنك معرفة المزيد عن fallback: true و fallback: 'blocking' في توثيق fallback.

مسارات التقاط الكل (Catch-all Routes)

يمكن توسيع المسارات الديناميكية لالتقاط جميع المسارات عن طريق إضافة ثلاث نقاط (...) داخل الأقواس. على سبيل المثال:

pages/posts/[...id].js تطابق /posts/a، ولكن أيضًا /posts/a/b، /posts/a/b/c وهكذا.

إذا قمت بذلك، في getStaticPaths، يجب عليك إرجاع مصفوفة كقيمة لمفتاح id كما يلي:

return [
  {
    params: {
      // ينشئ بشكل ثابت /posts/a/b/c
      id: ['a', 'b', 'c'],
    },
  },
  //...
];

وسيكون params.id مصفوفة في getStaticProps:

export async function getStaticProps({ params }) {
  // params.id سيكون مثل ['a', 'b', 'c']
}

اطلع على توثيق مسارات التقاط الكل لمعرفة المزيد.

الموجه (Router)

إذا كنت ترغب في الوصول إلى موجه Next.js، يمكنك القيام بذلك عن طريق استيراد خطاف useRouter من next/router.

صفحات 404

لإنشاء صفحة 404 مخصصة، قم بإنشاء pages/404.js. يتم إنشاء هذا الملف بشكل ثابت في وقت البناء.

// pages/404.js
export default function Custom404() {
  return <h1>404 - الصفحة غير موجودة</h1>;
}

اطلع على توثيق صفحات الخطأ لمعرفة المزيد.

هذا كل شيء!

في الدرس التالي، سنتحدث عن مسارات API في Next.js.

تفاصيل المسارات الديناميكية