المسارات الديناميكية هي صفحات تسمح لك باستخدام معلمات مخصصة في عنوان URL. إنها مفيدة بشكل خاص عند إنشاء صفحات للمحتوى الديناميكي.
بالنسبة للمدونة ، يمكنك استخدام مسار ديناميكي لإنشاء عناوين URL استنادًا إلى عناوين منشورات المدونة. هذا الأسلوب أفضل من إنشاء مكون صفحة لكل منشور.
يمكنك إنشاء مسارات ديناميكية في Next.js من خلال تحديد وظيفتين: getStaticProps و getStaticPaths.
إنشاء مسار ديناميكي في Next.js
لإنشاء مسار ديناميكي في Next.js ، أضف أقواس إلى الصفحة. على سبيل المثال ، [params] .js أو [slug] .js أو [id] .js.
بالنسبة للمدونة ، يمكنك استخدام سبيكة للمسار الديناميكي. لذلك ، إذا كان المنشور يحتوي على سبيكة المسارات الديناميكية nextjs، سيكون عنوان URL الناتج https://example.com/dynamic-routes-nextjs.
في مجلد الصفحات ، أنشئ ملفًا جديدًا يسمى [slug] .js وأنشئ مكون Post الذي يأخذ بيانات التدوين كعنصر.
مقدار ثابت النشر = ({postData}) => {
يعود <شعبة>{/* محتوى */}</div>;
};
هناك طرق مختلفة يمكنك من خلالها تمرير بيانات المنشور إلى المنشور. تعتمد الطريقة التي تختارها على الطريقة التي تريد بها عرض الصفحة. لجلب البيانات أثناء وقت الإنشاء ، استخدم getStaticProps () وجلبها عند الطلب ، استخدم getServerSideProps ().
استخدام getStaticProps لجلب بيانات المشاركة
لا تتغير مشاركات المدونة كثيرًا ، ويُعد جلبها في وقت الإنشاء أمرًا كافيًا. لذلك ، قم بتعديل مكون Post لتضمين getStaticProps ().
يستورد {getSinglePost} من "../../utils/posts" ؛مقدار ثابت نشر = ({content}) => {
يعود <شعبة>{/* محتوى */}</div>;
};
يصدّرمقدار ثابت getStaticProps = غير متزامن ({params}) => {
مقدار ثابت آخر = انتظر getSinglePost (params.slug) ؛
يعود {
الدعائم: {... post}،
};
};
تنشئ وظيفة getStaticProps بيانات التدوين المعروضة على الصفحة. يستخدم سبيكة من المسارات التي تم إنشاؤها بواسطة وظيفة getStaticPaths.
استخدام getStaticPaths لجلب المسارات
ترجع الدالة getStaticPaths () مسارات الصفحات التي يجب عرضها مسبقًا. قم بتغيير مكون Post لتضمينه:
يصدّرمقدار ثابت getStaticPaths = غير متزامن () => {
مقدار ثابت paths = getAllPosts (). map (({slug}) => ({ بارامز: {slug}})) ؛
يعود {
مسارات،
تراجع: خطأ شنيع,
};
};
يؤدي تنفيذ getStaticPaths هذا إلى جلب جميع المشاركات التي يجب عرضها وإرجاع الارتباطات البطيئة كمعلمات.
إجمالاً ، ستبدو [slug] .js كما يلي:
يستورد {getAllPosts، getSinglePost} من "../../utils/posts" ؛مقدار ثابت نشر = ({content}) => {
يعود <شعبة>{محتوى}</div>;
};يصدّرمقدار ثابت getStaticPaths = غير متزامن () => {
مقدار ثابت paths = getAllPosts (). map (({slug}) => ({ بارامز: {slug}})) ؛
يعود {
مسارات،
تراجع: خطأ شنيع,
};
};يصدّرمقدار ثابت getStaticProps = غير متزامن ({params}) => {
مقدار ثابت آخر = انتظر getSinglePost (params.slug) ؛يعود {
الدعائم: {... post}،
};
};
يصدّرتقصير بريد؛
يجب عليك استخدام getStaticProps () و getStaticPaths () معًا لإنشاء مسار ديناميكي. يجب أن تنشئ الدالة getStaticPaths () المسارات الديناميكية ، بينما تقوم getStaticProps () بجلب البيانات المعروضة في كل مسار.
إنشاء مسارات ديناميكية متداخلة في Next.js
لإنشاء مسار متداخل في Next.js ، تحتاج إلى إنشاء مجلد جديد داخل مجلد الصفحات وحفظ المسار الديناميكي بداخله.
على سبيل المثال ، لإنشاء / pages / posts / dynamic-links-nextjs ، احفظ [slug] .js بالداخل /pages/posts.
الوصول إلى معلمات URL من المسارات الديناميكية
بعد إنشاء المسار ، يمكنك استرداد ملف معلمة URL من المسار الديناميكي باستخدام useRouter () رد فعل هوك.
بالنسبة للصفحات / [slug] .js ، احصل على slug كما يلي:
يستورد {useRouter} من "التالي / جهاز التوجيه"مقدار ثابت نشر = () => {
مقدار ثابت جهاز التوجيه = useRouter ()
مقدار ثابت {slug} = router.query
يعود <ص>المشاركة: {slug}</ ص>
}
يصدّرتقصير بريد
سيعرض هذا سبيكة المنشور.
التوجيه الديناميكي مع getServerSideProps
باستخدام Next.js ، يمكنك جلب البيانات في وقت الإنشاء وإنشاء مسارات ديناميكية. يمكنك استخدام هذه المعرفة لعرض الصفحات مسبقًا من قائمة العناصر.
إذا كنت تريد جلب البيانات عند كل طلب ، فاستخدم getServerSideProps بدلاً من getStaticProps. لاحظ أن هذا النهج أبطأ ؛ يجب عليك استخدامه فقط عند استهلاك البيانات المتغيرة بانتظام.
