getServerSideProps

عند تصدير دالة تسمى getServerSideProps (العرض من جانب الخادم - SSR) من صفحة، سيقوم Next.js ببث هذه الصفحة مسبقًا في كل طلب باستخدام البيانات التي تُرجعها getServerSideProps. هذا مفيد إذا كنت تريد جلب بيانات تتغير بشكل متكرر، وتريد تحديث الصفحة لعرض أحدث البيانات.

import type { InferGetServerSidePropsType, GetServerSideProps } from 'next'

type Repo = {
  name: string
  stargazers_count: number
}

export const getServerSideProps = (async () => {
  // جلب البيانات من API خارجي
  const res = await fetch('https://api.github.com/repos/vercel/next.js')
  const repo: Repo = await res.json()
  // تمرير البيانات إلى الصفحة عبر props
  return { props: { repo } }
}) satisfies GetServerSideProps<{ repo: Repo }>

export default function Page({
  repo,
}: InferGetServerSidePropsType<typeof getServerSideProps>) {
  return (
    <main>
      <p>{repo.stargazers_count}</p>
    </main>
  )
}

export async function getServerSideProps() {
  // جلب البيانات من API خارجي
  const res = await fetch('https://api.github.com/repos/vercel/next.js')
  const repo = await res.json()
  // تمرير البيانات إلى الصفحة عبر props
  return { props: { repo } }
}

export default function Page({ repo }) {
  return (
    <main>
      <p>{repo.stargazers_count}</p>
    </main>
  )
}

يمكنك استيراد وحدات في النطاق العلوي لاستخدامها في getServerSideProps. الوحدات المستوردة لن تُضمّن لجانب العميل. هذا يعني أنه يمكنك كتابة كود خاص بالخادم مباشرة في getServerSideProps، بما في ذلك جلب البيانات من قاعدة البيانات الخاصة بك.

معامل Context

معامل context هو كائن يحتوي على المفاتيح التالية:

قيم إرجاع getServerSideProps

يجب أن تُرجع دالة getServerSideProps كائنًا يحتوي على أي من الخصائص التالية:

props

كائن props هو زوج مفتاح-قيمة، حيث يتم استقبال كل قيمة من قبل مكون الصفحة. يجب أن يكون كائنًا قابلاً للتسلسل بحيث يمكن تسلسل أي props يتم تمريرها باستخدام JSON.stringify.

export async function getServerSideProps(context) {
  return {
    props: { message: `Next.js رائع` }, // سيتم تمريرها إلى مكون الصفحة كـ props
  }
}

notFound

القيمة المنطقية notFound تسمح للصفحة بإرجاع حالة 404 وصفحة 404. مع notFound: true، سترجع الصفحة 404 حتى لو كانت هناك صفحة تم إنشاؤها بنجاح من قبل. هذا مخصص لدعم حالات الاستخدام مثل المحتوى الذي ينشئه المستخدم ويتم إزالته من قبل المؤلف.

export async function getServerSideProps(context) {
  const res = await fetch(`https://.../data`)
  const data = await res.json()

  if (!data) {
    return {
      notFound: true,
    }
  }

  return {
    props: { data }, // سيتم تمريرها إلى مكون الصفحة كـ props
  }
}

redirect

كائن redirect يسمح بإعادة التوجيه إلى موارد داخلية وخارجية. يجب أن يتطابق مع الشكل { destination: string, permanent: boolean }. في بعض الحالات النادرة، قد تحتاج إلى تعيين رمز حالة مخصص لعملاء HTTP القديمة لإعادة التوجيه بشكل صحيح. في هذه الحالات، يمكنك استخدام خاصية statusCode بدلاً من خاصية permanent، ولكن ليس كلاهما.

export async function getServerSideProps(context) {
  const res = await fetch(`https://.../data`)
  const data = await res.json()

  if (!data) {
    return {
      redirect: {
        destination: '/',
        permanent: false,
      },
    }
  }

  return {
    props: {}, // سيتم تمريرها إلى مكون الصفحة كـ props
  }
}

سجل الإصدارات