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

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

محاذير

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