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 تلقائيًا لنفس البيانات عبر generateMetadata، generateStaticParams، التخطيطات، الصفحات، ومكونات الخادم. يمكن استخدام cache في React إذا لم يكن fetch متاحًا.

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

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

On this page