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.