تنفيذ getStaticPaths

أولاً، لنقم بإعداد الملفات:

• أنشئ ملفًا باسم [id].js داخل مجلد pages/posts.
• أيضًا، قم بإزالة first-post.js داخل مجلد pages/posts — لن نستخدمه بعد الآن.

ثم، افتح pages/posts/[id].js في محرر النصوص والصق الكود التالي. سنقوم بملء ... لاحقًا:

import Layout from '../../components/layout';
 
export default function Post() {
  return <Layout>...</Layout>;
}

بعد ذلك، افتح lib/posts.js وأضف الدالة getAllPostIds التالية في الأسفل. ستعيد هذه الدالة قائمة بأسماء الملفات (باستثناء .md) في مجلد posts:

export function getAllPostIds() {
  const fileNames = fs.readdirSync(postsDirectory);
 
  // تُعيد مصفوفة تبدو كالتالي:
  // [
  //   {
  //     params: {
  //       id: 'ssg-ssr'
  //     }
  //   },
  //   {
  //     params: {
  //       id: 'pre-rendering'
  //     }
  //   }
  // ]
  return fileNames.map((fileName) => {
    return {
      params: {
        id: fileName.replace(/\.md$/, ''),
      },
    };
  });
}

هام: القائمة المُعادة ليست مجرد مصفوفة من السلاسل — يجب أن تكون مصفوفة من الكائنات التي تبدو مثل التعليق أعلاه. يجب أن يحتوي كل كائن على مفتاح params ويتضمن كائنًا بمفتاح id (لأننا نستخدم [id] في اسم الملف). وإلا، ستفشل الدالة getStaticPaths.

أخيرًا، سنستورد دالة getAllPostIds ونستخدمها داخل getStaticPaths. افتح pages/posts/[id].js وانسخ الكود التالي قبل تصدير مكون Post:

import { getAllPostIds } from '../../lib/posts';
 
export async function getStaticPaths() {
  const paths = getAllPostIds();
  return {
    paths,
    fallback: false,
  };
}

• يحتوي paths على مصفوفة المسارات المعروفة التي تُعيدها getAllPostIds()، والتي تتضمن المعلمات المحددة بواسطة pages/posts/[id].js. تعلم المزيد في توثيق مفتاح paths
• تجاهل fallback: false حاليًا — سنشرح ذلك لاحقًا.

نحن على وشك الانتهاء — ولكن ما زال علينا تنفيذ getStaticProps. لنقم بذلك في الصفحة التالية!