تنفيذ getStaticProps

نحتاج لجلب البيانات الضرورية لعرض المنشور بالـ id المحدد.

للقيام بذلك، افتح ملف lib/posts.js مرة أخرى وأضف الدالة التالية getPostData في الأسفل. ستعيد هذه الدالة بيانات المنشور بناءً على id:

export function getPostData(id) {
  const fullPath = path.join(postsDirectory, `${id}.md`);
  const fileContents = fs.readFileSync(fullPath, 'utf8');
 
  // استخدام gray-matter لتحليل قسم البيانات الوصفية للمنشور
  const matterResult = matter(fileContents);
 
  // دمج البيانات مع الـ id
  return {
    id,
    ...matterResult.data,
  };
}

ثم، افتح ملف pages/posts/[id].js واستبدل هذا السطر:

import { getAllPostIds } from '../../lib/posts';

بالكود التالي:

import { getAllPostIds, getPostData } from '../../lib/posts';
 
export async function getStaticProps({ params }) {
  const postData = getPostData(params.id);
  return {
    props: {
      postData,
    },
  };
}

صفحة المنشور تستخدم الآن دالة getPostData في getStaticProps للحصول على بيانات المنشور وإرجاعها كـ props.

الآن، لنقم بتحديث مكون Post لاستخدام postData. في ملف pages/posts/[id].js استبدل مكون Post المُصدّر بالكود التالي:

export default function Post({ postData }) {
  return (
    <Layout>
      {postData.title}
      <br />
      {postData.id}
      <br />
      {postData.date}
    </Layout>
  );
}

هذا كل شيء! جرب زيارة هذه الصفحات:

يجب أن تكون قادرًا على رؤية بيانات المدونة لكل صفحة:

بيانات المدونة

رائع! لقد نجحنا في إنشاء مسارات ديناميكية.

هل هناك خطأ ما؟

إذا واجهت خطأ، تأكد من أن ملفاتك تحتوي على الكود الصحيح:

إذا ما زلت عالقًا، لا تتردد في سؤال المجتمع على مناقشات GitHub. سيكون مفيدًا إذا قمت برفع الكود إلى GitHub وإرفاق رابط له حتى يتمكن الآخرون من الاطلاع عليه.

ملخص

مرة أخرى، إليك ملخصًا مرئيًا لما قمنا به:

كيفية إنشاء صفحات بشكل ثابت مع مسارات ديناميكية

ما زلنا لم نعرض محتويات markdown للمدونة. لنقم بذلك في الخطوة التالية.