كيفية إنشاء مسارات ديناميكية في Next.js

المسارات الديناميكية هي صفحات تسمح لك باستخدام معلمات مخصصة في عنوان 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 الذي يأخذ بيانات التدوين كعنصر.

لماذا لا يعمل يوتيوب الخاص بي

const Post = ({ postData }) => { 
  return <div>{/* content */}</div>; 
};

هناك طرق مختلفة يمكنك من خلالها تمرير بيانات المنشور إلى المنشور. تعتمد الطريقة التي تختارها على الطريقة التي تريد بها عرض الصفحة. لجلب البيانات أثناء وقت الإنشاء ، استخدم getStaticProps () وجلبها عند الطلب ، استخدم getServerSideProps ().

استخدام getStaticProps لجلب بيانات المشاركة

لا تتغير مشاركات المدونة كثيرًا ، ويُعد جلبها في وقت الإنشاء أمرًا كافيًا. لذلك ، قم بتعديل مكون Post لتضمين getStaticProps ().

import { getSinglePost } from "../../utils/posts"; 
  
const Post = ({ content }) => { 
  return <div>{/* content */}</div>; 
}; 
  
export const getStaticProps = async ({ params }) => { 
    const post = await getSinglePost(params.slug); 
    return { 
      props: { ...post }, 
    }; 
  };

تنشئ وظيفة getStaticProps بيانات التدوين المعروضة على الصفحة. يستخدم سبيكة من المسارات التي تم إنشاؤها بواسطة وظيفة getStaticPaths.

استخدام getStaticPaths لجلب المسارات

ترجع الدالة getStaticPaths () مسارات الصفحات التي يجب عرضها مسبقًا. قم بتغيير مكون Post لتضمينه:

export const getStaticPaths = async () => { 
  const paths = getAllPosts().map(({ slug }) => ({ params: { slug } })); 
  return { 
    paths, 
    fallback: false, 
  }; 
};

يؤدي تنفيذ getStaticPaths هذا إلى جلب جميع المشاركات التي يجب عرضها وإرجاع الارتباطات البطيئة كمعلمات.

إجمالاً ، ستبدو [slug] .js كما يلي:

import { getAllPosts, getSinglePost } from "../../utils/posts"; 
  
const Post = ({ content }) => { 
  return <div>{content}</div>; 
}; 
  
export const getStaticPaths = async () => { 
  const paths = getAllPosts().map(({ slug }) => ({ params: { slug } })); 
  return { 
    paths, 
    fallback: false, 
  }; 
}; 
  
export const getStaticProps = async ({ params }) => { 
  const post = await getSinglePost(params.slug); 
  
  return { 
    props: { ...post }, 
  }; 
}; 
  
export default Post;

يجب عليك استخدام getStaticProps () و getStaticPaths () معًا لإنشاء مسار ديناميكي. يجب أن تنشئ الدالة getStaticPaths () المسارات الديناميكية ، بينما تقوم getStaticProps () بجلب البيانات المعروضة في كل مسار.

إنشاء مسارات ديناميكية متداخلة في Next.js

لإنشاء مسار متداخل في Next.js ، تحتاج إلى إنشاء مجلد جديد داخل مجلد الصفحات وحفظ المسار الديناميكي بداخله.

على سبيل المثال ، لإنشاء / pages / posts / dynamic-links-nextjs ، احفظ [slug] .js بالداخل / صفحات / مشاركات.

الوصول إلى معلمات URL من المسارات الديناميكية

بعد إنشاء المسار ، يمكنك استرداد ملف معلمة URL من المسار الديناميكي باستخدام useRouter () رد فعل هوك .

بالنسبة للصفحات / [slug] .js ، احصل على slug كما يلي:

import { useRouter } from 'next/router' 
  
const Post = () => { 
  const router = useRouter() 
  const { slug } = router.query 
  return <p>Post: {slug}</p> 
} 
  
export default Post

سيعرض هذا سبيكة المنشور.

التوجيه الديناميكي مع getServerSideProps

باستخدام Next.js ، يمكنك جلب البيانات في وقت الإنشاء وإنشاء مسارات ديناميكية. يمكنك استخدام هذه المعرفة لعرض الصفحات مسبقًا من قائمة العناصر.

إذا كنت تريد جلب البيانات عند كل طلب ، فاستخدم getServerSideProps بدلاً من getStaticProps. لاحظ أن هذا النهج أبطأ ؛ يجب عليك استخدامه فقط عند استهلاك البيانات المتغيرة بانتظام.