تنفيذ 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>
);
}
هذا كل شيء! جرب زيارة هذه الصفحات:
يجب أن تكون قادرًا على رؤية بيانات المدونة لكل صفحة:
رائع! لقد نجحنا في إنشاء مسارات ديناميكية.
هل هناك خطأ ما؟
إذا واجهت خطأ، تأكد من أن ملفاتك تحتوي على الكود الصحيح:
- ملف
pages/posts/[id].js
يجب أن يبدو هكذا. - ملف
lib/posts.js
يجب أن يبدو هكذا. - (إذا ما زال لا يعمل) باقي الكود يجب أن يبدو هكذا.
إذا ما زلت عالقًا، لا تتردد في سؤال المجتمع على مناقشات GitHub. سيكون مفيدًا إذا قمت برفع الكود إلى GitHub وإرفاق رابط له حتى يتمكن الآخرون من الاطلاع عليه.
ملخص
مرة أخرى، إليك ملخصًا مرئيًا لما قمنا به:
ما زلنا لم نعرض محتويات markdown للمدونة. لنقم بذلك في الخطوة التالية.