تنفيذ 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>
  );
}

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

• http://localhost:3000/posts/ssg-ssr
• http://localhost:3000/posts/pre-rendering

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

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

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

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

• ملف pages/posts/[id].js يجب أن يبدو هكذا.
• ملف lib/posts.js يجب أن يبدو هكذا.
• (إذا ما زال لا يعمل) باقي الكود يجب أن يبدو هكذا.

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

ملخص

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

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