generateStaticParams

يمكن استخدام دالة generateStaticParams بالاشتراك مع شرائح المسار الديناميكية لإنشاء مسارات بشكل ثابت أثناء وقت البناء بدلاً من الطلب عند وقت الطلب.

app/blog/[slug]/page.js

// إرجاع قائمة من `params` لملء الجزء الديناميكي [slug]
export async function generateStaticParams() {
  const posts = await fetch('https://.../posts').then((res) => res.json())

  return posts.map((post) => ({
    slug: post.slug,
  }))
}

// سيتم إنشاء نسخ متعددة من هذه الصفحة بشكل ثابت
// باستخدام `params` المُرجعة من `generateStaticParams`
export default function Page({ params }) {
  const { slug } = params
  // ...
}

معلومة مفيدة

يمكنك استخدام خيار تكوين شريحة dynamicParams للتحكم فيما يحدث عند زيارة جزء ديناميكي لم يتم إنشاؤه باستخدام generateStaticParams.

أثناء next dev، سيتم استدعاء generateStaticParams عند الانتقال إلى مسار.

أثناء next build، يعمل generateStaticParams قبل إنشاء التخطيطات أو الصفحات المقابلة.

أثناء إعادة التحقق (ISR)، لن يتم استدعاء generateStaticParams مرة أخرى.

generateStaticParams يحل محل دالة getStaticPaths في موجه الصفحات.

المعاملات

options.params (اختياري)

إذا استخدمت عدة شرائح ديناميكية في مسار generateStaticParams، فإن دالة generateStaticParams الفرعية تُنفذ مرة واحدة لكل مجموعة من params التي يولدها الأصل.

كائن params يحتوي على params المملوءة من generateStaticParams الأصلية، والتي يمكن استخدامها لإنشاء params في جزء فرعي.

القيم المُرجعة

يجب أن تُرجع generateStaticParams مصفوفة من الكائنات حيث يمثل كل كائن الشرائح الديناميكية المملوءة لمسار واحد.

كل خاصية في الكائن هي شريحة ديناميكية يجب ملؤها للمسار.
اسم الخاصية هو اسم الشريحة، وقيمة الخاصية هي ما يجب ملء الشريحة به.

مثال للمسار	نوع الإرجاع لـ `generateStaticParams`
`/product/[id]`	`{ id: string }[]`
`/products/[category]/[product]`	`{ category: string, product: string }[]`
`/products/[...slug]`	`{ slug: string[] }[]`

شريحة ديناميكية واحدة

export function generateStaticParams() {
  return [{ id: '1' }, { id: '2' }, { id: '3' }]
}

// سيتم إنشاء ثلاث نسخ من هذه الصفحة بشكل ثابت
// باستخدام `params` المُرجعة من `generateStaticParams`
// - /product/1
// - /product/2
// - /product/3
export default function Page({ params }: { params: { id: string } }) {
  const { id } = params
  // ...
}

export function generateStaticParams() {
  return [{ id: '1' }, { id: '2' }, { id: '3' }]
}

// سيتم إنشاء ثلاث نسخ من هذه الصفحة بشكل ثابت
// باستخدام `params` المُرجعة من `generateStaticParams`
// - /product/1
// - /product/2
// - /product/3
export default function Page({ params }) {
  const { id } = params
  // ...
}

شرائح ديناميكية متعددة

export function generateStaticParams() {
  return [
    { category: 'a', product: '1' },
    { category: 'b', product: '2' },
    { category: 'c', product: '3' },
  ]
}

// سيتم إنشاء ثلاث نسخ من هذه الصفحة بشكل ثابت
// باستخدام `params` المُرجعة من `generateStaticParams`
// - /products/a/1
// - /products/b/2
// - /products/c/3
export default function Page({
  params,
}: {
  params: { category: string; product: string }
}) {
  const { category, product } = params
  // ...
}

export function generateStaticParams() {
  return [
    { category: 'a', product: '1' },
    { category: 'b', product: '2' },
    { category: 'c', product: '3' },
  ]
}

// سيتم إنشاء ثلاث نسخ من هذه الصفحة بشكل ثابت
// باستخدام `params` المُرجعة من `generateStaticParams`
// - /products/a/1
// - /products/b/2
// - /products/c/3
export default function Page({ params }) {
  const { category, product } = params
  // ...
}

شريحة ديناميكية شاملة

export function generateStaticParams() {
  return [{ slug: ['a', '1'] }, { slug: ['b', '2'] }, { slug: ['c', '3'] }]
}

// سيتم إنشاء ثلاث نسخ من هذه الصفحة بشكل ثابت
// باستخدام `params` المُرجعة من `generateStaticParams`
// - /product/a/1
// - /product/b/2
// - /product/c/3
export default function Page({ params }: { params: { slug: string[] } }) {
  const { slug } = params
  // ...
}

export function generateStaticParams() {
  return [{ slug: ['a', '1'] }, { slug: ['b', '2'] }, { slug: ['c', '3'] }]
}

// سيتم إنشاء ثلاث نسخ من هذه الصفحة بشكل ثابت
// باستخدام `params` المُرجعة من `generateStaticParams`
// - /product/a/1
// - /product/b/2
// - /product/c/3
export default function Page({ params }) {
  const { slug } = params
  // ...
}

أمثلة

شرائح ديناميكية متعددة في مسار

يمكنك إنشاء params للشرائح الديناميكية فوق التخطيط أو الصفحة الحالية، ولكن ليس تحتها. على سبيل المثال، بالنظر إلى مسار app/products/[category]/[product]:

app/products/[category]/[product]/page.js يمكنه إنشاء params لكل من [category] و [product].
app/products/[category]/layout.js يمكنه فقط إنشاء params لـ [category].

هناك طريقتان لإنشاء params لمسار بشرائح ديناميكية متعددة:

إنشاء params من الأسفل إلى الأعلى

إنشاء شرائح ديناميكية متعددة من جزء المسار الفرعي.

// إنشاء شرائح لكل من [category] و [product]
export async function generateStaticParams() {
  const products = await fetch('https://.../products').then((res) => res.json())

  return products.map((product) => ({
    category: product.category.slug,
    product: product.id,
  }))
}

export default function Page({
  params,
}: {
  params: { category: string; product: string }
}) {
  // ...
}

// إنشاء شرائح لكل من [category] و [product]
export async function generateStaticParams() {
  const products = await fetch('https://.../products').then((res) => res.json())

  return products.map((product) => ({
    category: product.category.slug,
    product: product.id,
  }))
}

export default function Page({ params }) {
  // ...
}

إنشاء params من الأعلى إلى الأسفل

إنشاء الشرائح الأصلية أولاً واستخدام النتيجة لإنشاء الشرائح الفرعية.

// إنشاء شرائح لـ [category]
export async function generateStaticParams() {
  const products = await fetch('https://.../products').then((res) => res.json())

  return products.map((product) => ({
    category: product.category.slug,
  }))
}

export default function Layout({ params }: { params: { category: string } }) {
  // ...
}

// إنشاء شرائح لـ [category]
export async function generateStaticParams() {
  const products = await fetch('https://.../products').then((res) => res.json())

  return products.map((product) => ({
    category: product.category.slug,
  }))
}

export default function Layout({ params }) {
  // ...
}

يتم تنفيذ دالة generateStaticParams لجزء المسار الفرعي مرة واحدة لكل شريحة يولدها الأصل generateStaticParams.

يمكن لدالة generateStaticParams الفرعية استخدام params المُرجعة من دالة generateStaticParams الأصلية لإنشاء شرائحها الخاصة ديناميكيًا.

// إنشاء شرائح لـ [product] باستخدام `params` الممررة من
// دالة `generateStaticParams` للشريحة الأصلية
export async function generateStaticParams({
  params: { category },
}: {
  params: { category: string }
}) {
  const products = await fetch(
    `https://.../products?category=${category}`
  ).then((res) => res.json())

  return products.map((product) => ({
    product: product.id,
  }))
}

export default function Page({
  params,
}: {
  params: { category: string; product: string }
}) {
  // ...
}

// إنشاء شرائح لـ [product] باستخدام `params` الممررة من
// دالة `generateStaticParams` للشريحة الأصلية
export async function generateStaticParams({ params: { category } }) {
  const products = await fetch(
    `https://.../products?category=${category}`
  ).then((res) => res.json())

  return products.map((product) => ({
    product: product.id,
  }))
}

export default function Page({ params }) {
  // ...
}

معلومة مفيدة: طلبات fetch يتم تخزينها مؤقتًا تلقائيًا لنفس البيانات عبر جميع الدوال ذات البادئة generate، والتخطيطات، والصفحات، ومكونات الخادم. يمكن استخدام cache في React إذا لم يكن fetch متاحًا.

إنشاء مجموعة فرعية فقط من params

يمكنك إنشاء مجموعة فرعية من params لمسار عن طريق إرجاع مصفوفة من الكائنات تحتوي فقط على الشرائح الديناميكية التي تريد إنشاؤها. ثم باستخدام خيار تكوين شريحة dynamicParams، يمكنك التحكم فيما يحدث عند زيارة جزء ديناميكي لم يتم إنشاؤه باستخدام generateStaticParams.

app/blog/[slug]/page.js

// جميع المنشورات باستثناء أفضل 10 ستكون 404
export const dynamicParams = false

export async function generateStaticParams() {
  const posts = await fetch('https://.../posts').then((res) => res.json())
  const topPosts = posts.slice(0, 10)

  return topPosts.map((post) => ({
    slug: post.slug,
  }))
}

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

الإصدار	التغييرات
`v13.0.0`	تم تقديم `generateStaticParams`.

On this page