تنفيذ getStaticProps

التصيير المسبق في Next.js

يقدم Next.js طريقتين للتصيير المسبق: التوليد الثابت (Static Generation) والتصيير من جانب الخادم (Server-side Rendering). الفرق بينهما يكمن في توقيت إنشاء HTML للصفحة.

• التوليد الثابت (Static Generation) هو طريقة التصيير المسبق التي تنشئ HTML أثناء البناء. ثم يتم إعادة استخدام HTML المُصَيَّر مسبقًا في كل طلب.
• التصيير من جانب الخادم (Server-side Rendering) هو طريقة التصيير المسبق التي تنشئ HTML في كل طلب.

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

استخدام التوليد الثابت (getStaticProps())

الآن، نحتاج إلى إضافة استيراد لـ getSortedPostsData واستدعائها داخل getStaticProps في ملف pages/index.js.

افتح pages/index.js في محرر الأكواد وأضف الكود التالي قبل تصدير مكون Home:

import { getSortedPostsData } from '../lib/posts';
 
export async function getStaticProps() {
  const allPostsData = getSortedPostsData();
  return {
    props: {
      allPostsData,
    },
  };
}

بإرجاع allPostsData داخل كائن props في getStaticProps، سيتم تمرير تدوينات المدونة إلى مكون Home كخاصية. الآن يمكنك الوصول إلى تدوينات المدونة كما يلي:

export default function Home ({ allPostsData }) { ... }

لعرض تدوينات المدونة، لنقم بتحديث مكون Home لإضافة وسم <section> آخر يحتوي على البيانات أسفل قسم تقديم الذات. لا تنسَ أيضًا تغيير الخصائص من () إلى ({ allPostsData }):

export default function Home({ allPostsData }) {
  return (
    <Layout home>
      {/* احتفظ بالكود الحالي هنا */}
 
      {/* أضف وسم <section> هذا أسفل وسم <section> الحالي */}
      <section className={`${utilStyles.headingMd} ${utilStyles.padding1px}`}>
        <h2 className={utilStyles.headingLg}>المدونة</h2>
        <ul className={utilStyles.list}>
          {allPostsData.map(({ id, date, title }) => (
            <li className={utilStyles.listItem} key={id}>
              {title}
              <br />
              {id}
              <br />
              {date}
            </li>
          ))}
        </ul>
      </section>
    </Layout>
  );
}

يجب أن ترى الآن بيانات المدونة إذا قمت بالوصول إلى http://localhost:3000.

تهانينا! لقد نجحنا في جلب البيانات الخارجية (من نظام الملفات) وتصيير الصفحة الرئيسية مسبقًا باستخدام هذه البيانات.

لنتحدث عن بعض النصائح لاستخدام getStaticProps في الصفحة التالية.