كيفية تنفيذ إعادة التوليد الثابت التدريجي (ISR)

import type { GetStaticPaths, GetStaticProps } from 'next'

interface Post {
  id: string
  title: string
  content: string
}

interface Props {
  post: Post
}

export const getStaticPaths: GetStaticPaths = async () => {
  const posts = await fetch('https://api.vercel.app/blog').then((res) =>
    res.json()
  )
  const paths = posts.map((post: Post) => ({
    params: { id: String(post.id) },
  }))

  // سنقوم بمسبق تصيير هذه المسارات فقط أثناء وقت البناء.
  // { fallback: 'blocking' } سيقوم بتصيير الصفحات
  // على الخادم عند الطلب إذا لم يكن المسار موجودًا.
  return { paths, fallback: false }
}

export const getStaticProps: GetStaticProps<Props> = async ({
  params,
}: {
  params: { id: string }
}) => {
  const post = await fetch(`https://api.vercel.app/blog/${params.id}`).then(
    (res) => res.json()
  )

  return {
    props: { post },
    // سيقوم Next.js بإبطال ذاكرة التخزين المؤقت عندما
    // يصل طلب، على الأكثر مرة كل 60 ثانية.
    revalidate: 60,
  }
}

export default function Page({ post }: Props) {
  return (
    <main>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </main>
  )
}

export async function getStaticPaths() {
  const posts = await fetch('https://api.vercel.app/blog').then((res) =>
    res.json()
  )
  const paths = posts.map((post) => ({
    params: { id: post.id },
  }))

  // سنقوم بمسبق تصيير هذه المسارات فقط أثناء وقت البناء.
  // { fallback: false } يعني أن المسارات الأخرى يجب أن تعرض خطأ 404.
  return { paths, fallback: false }
}

export async function getStaticProps({ params }) {
  const post = await fetch(`https://api.vercel.app/blog/${params.id}`).then(
    (res) => res.json()
  )

  return {
    props: { post },
    // سيقوم Next.js بإبطال ذاكرة التخزين المؤقت عندما
    // يصل طلب، على الأكثر مرة كل 60 ثانية.
    revalidate: 60,
  }
}

export default function Page({ post }) {
  return (
    <main>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </main>
  )
}

import type { NextApiRequest, NextApiResponse } from 'next'

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  // تحقق من السر لتأكيد أن هذا طلب صالح
  if (req.query.secret !== process.env.MY_SECRET_TOKEN) {
    return res.status(401).json({ message: 'رمز غير صالح' })
  }

  try {
    // يجب أن يكون هذا المسار الفعلي وليس مسارًا معاد كتابته
    // على سبيل المثال، لـ "/posts/[id]" يجب أن يكون "/posts/1"
    await res.revalidate('/posts/1')
    return res.json({ revalidated: true })
  } catch (err) {
    // إذا كان هناك خطأ، سيستمر Next.js في
    // عرض آخر صفحة تم إنشاؤها بنجاح
    return res.status(500).send('خطأ في إعادة التحقق')
  }
}

export default async function handler(req, res) {
  // تحقق من السر لتأكيد أن هذا طلب صالح
  if (req.query.secret !== process.env.MY_SECRET_TOKEN) {
    return res.status(401).json({ message: 'رمز غير صالح' })
  }

  try {
    // يجب أن يكون هذا المسار الفعلي وليس مسارًا معاد كتابته
    // على سبيل المثال، لـ "/posts/[id]" يجب أن يكون "/posts/1"
    await res.revalidate('/posts/1')
    return res.json({ revalidated: true })
  } catch (err) {
    // إذا كان هناك خطأ، سيستمر Next.js في
    // عرض آخر صفحة تم إنشاؤها بنجاح
    return res.status(500).send('خطأ في إعادة التحقق')
  }
}

import type { GetStaticProps } from 'next'

interface Post {
  id: string
  title: string
  content: string
}

interface Props {
  post: Post
}

export const getStaticProps: GetStaticProps<Props> = async ({
  params,
}: {
  params: { id: string }
}) => {
  // إذا ألقى هذا الطلب خطأ غير ممسوك، فلن يقوم Next.js
  // بإبطال الصفحة المعروضة حاليًا وسيتم
  // إعادة محاولة getStaticProps في الطلب التالي.
  const res = await fetch(`https://api.vercel.app/blog/${params.id}`)
  const post: Post = await res.json()

  if (!res.ok) {
    // إذا كان هناك خطأ في الخادم، قد ترغب في
    // إلقاء خطأ بدلاً من الإرجاع حتى لا يتم تحديث ذاكرة التخزين المؤقت
    // حتى الطلب الناجح التالي.
    throw new Error(`فشل في جلب المنشورات، تم استلام الحالة ${res.status}`)
  }

  return {
    props: { post },
    // سيقوم Next.js بإبطال ذاكرة التخزين المؤقت عندما
    // يصل طلب، على الأكثر مرة كل 60 ثانية.
    revalidate: 60,
  }
}

export async function getStaticProps({ params }) {
  // إذا ألقى هذا الطلب خطأ غير ممسوك، فلن يقوم Next.js
  // بإبطال الصفحة المعروضة حاليًا وسيتم
  // إعادة محاولة getStaticProps في الطلب التالي.
  const res = await fetch(`https://api.vercel.app/blog/${params.id}`)
  const post = await res.json()

  if (!res.ok) {
    // إذا كان هناك خطأ في الخادم، قد ترغب في
    // إلقاء خطأ بدلاً من الإرجاع حتى لا يتم تحديث ذاكرة التخزين المؤقت
    // حتى الطلب الناجح التالي.
    throw new Error(`فشل في جلب المنشورات، تم استلام الحالة ${res.status}`)
  }

  return {
    props: { post },
    // سيقوم Next.js بإبطال ذاكرة التخزين المؤقت عندما
    // يصل طلب، على الأكثر مرة كل 60 ثانية.
    revalidate: 60,
  }
}