التوليد الثابت مع البيانات وبدونها

يمكن تنفيذ التوليد الثابت (Static Generation) مع البيانات أو بدونها.

حتى الآن، جميع الصفحات التي أنشأناها لا تتطلب جلب بيانات خارجية. سيتم توليد هذه الصفحات تلقائيًا بشكل ثابت عند بناء التطبيق للإنتاج.

ومع ذلك، بالنسبة لبعض الصفحات، قد لا تتمكن من عرض HTML دون جلب بعض البيانات الخارجية أولاً. ربما تحتاج إلى الوصول إلى نظام الملفات، أو جلب بيانات من واجهة برمجة تطبيقات خارجية، أو استعلام قاعدة البيانات أثناء وقت البناء. يدعم Next.js هذه الحالة - التوليد الثابت مع البيانات - بشكل جاهز.

التوليد الثابت مع البيانات باستخدام getStaticProps

كيف يعمل هذا؟ في Next.js، عند تصدير مكون صفحة، يمكنك أيضًا تصدير دالة async تسمى getStaticProps. إذا قمت بذلك، فإن:

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

export default function Home(props) { ... }
 
export async function getStaticProps() {
  // جلب البيانات الخارجية من نظام الملفات، واجهة برمجة التطبيقات، قاعدة البيانات، إلخ.
  const data = ...
 
  // سيتم تمرير قيمة مفتاح `props`
  // إلى مكون `Home`
  return {
    props: ...
  }
}

في الأساس، تسمح لك getStaticProps بإخبار Next.js: "مرحبًا، هذه الصفحة لديها بعض التبعيات للبيانات - لذا عند التصيير المسبق لهذه الصفحة أثناء البناء، تأكد من حلها أولاً!"

ملاحظة: في وضع التطوير، تعمل getStaticProps عند كل طلب بدلاً من ذلك.

لنستخدم getStaticProps

من الأسهل التعلم بالممارسة، لذا بدءًا من الصفحة التالية، سنستخدم getStaticProps لتنفيذ مدونتنا.