getInitialProps

معلومة مفيدة: getInitialProps هو واجهة برمجة تطبيقات قديمة. نوصي باستخدام getStaticProps أو getServerSideProps بدلاً من ذلك.

getInitialProps هي دالة async يمكن إضافتها إلى مكون React المُصدر بشكل افتراضي للصفحة. ستعمل على جانب الخادم ومرة أخرى على جانب العميل أثناء انتقالات الصفحة. سيتم تمرير نتيجة الدالة إلى مكون React كـ props.

import { NextPageContext } from 'next'

Page.getInitialProps = async (ctx: NextPageContext) => {
  const res = await fetch('https://api.github.com/repos/vercel/next.js')
  const json = await res.json()
  return { stars: json.stargazers_count }
}

export default function Page({ stars }: { stars: number }) {
  return stars
}

Page.getInitialProps = async (ctx) => {
  const res = await fetch('https://api.github.com/repos/vercel/next.js')
  const json = await res.json()
  return { stars: json.stargazers_count }
}

export default function Page({ stars }) {
  return stars
}

معلومة مفيدة:

• يتم تسلسل البيانات المرتجعة من getInitialProps عند عرض الخادم. تأكد من أن الكائن المرتجع من getInitialProps هو كائن عادي Object، وليس باستخدام Date أو Map أو Set.
• لتحميل الصفحة الأولي، ستعمل getInitialProps على الخادم فقط. ثم ستعمل getInitialProps أيضًا على العميل عند الانتقال إلى مسار مختلف باستخدام مكون next/link أو باستخدام next/router.
• إذا تم استخدام getInitialProps في ملف _app.js مخصص، وكانت الصفحة التي يتم الانتقال إليها تستخدم getServerSideProps، فإن getInitialProps ستعمل أيضًا على الخادم.

كائن السياق (Context Object)

تستقبل getInitialProps وسيطًا واحدًا يسمى context، وهو كائن يحتوي على الخصائص التالية:

محاذير

• يمكن استخدام getInitialProps فقط في ملفات المستوى الأعلى داخل pages/، وليس في المكونات المتداخلة. لجلب بيانات متداخلة على مستوى المكون، فكر في استكشاف موجه التطبيق (App Router).
• بغض النظر عما إذا كان مسارك ثابتًا أو ديناميكيًا، أي بيانات يتم إرجاعها من getInitialProps كـ props ستكون قابلة للفحص على جانب العميل في HTML الأولي. هذا للسماح للصفحة بأن يتم ترطيبها (hydrate) بشكل صحيح. تأكد من عدم تمرير أي معلومات حساسة لا يجب أن تكون متاحة على العميل في props.