generateStaticParams در Next.js — تولید مسیرهای داینامیک به‌صورت استاتیک در زمان build

۱. generateStaticParams چیست؟

generateStaticParams() تابعی است که در کنار segmentهای داینامیک مانند [slug] یا [id] استفاده می‌شود تا مسیرها در زمان build به‌صورت استاتیک تولید شوند. این تابع باید آرایه‌ای از آبجکت‌هایی شامل پارامترهای مسیر بازگرداند.

۲. مثال‌های پایه

مسیر داینامیک ساده:

// app/product/[id]/page.tsx
export function generateStaticParams() {
  return [{ id: '1' }, { id: '2' }, { id: '3' }]
}

مسیر با دو پارامتر:

// app/products/[category]/[product]/page.tsx
export function generateStaticParams() {
  return [
    { category: 'a', product: '1' },
    { category: 'b', product: '2' },
    { category: 'c', product: '3' },
  ]
}

مسیر catch-all:

// app/product/[...slug]/page.tsx
export function generateStaticParams() {
  return [
    { slug: ['a', '1'] },
    { slug: ['b', '2'] },
    { slug: ['c', '3'] },
  ]
}

۳. رندر استاتیک کامل یا جزئی

رندر همه مسیرها در زمان build:

const posts = await fetch('https://.../posts').then(res => res.json())
return posts.map(post => ({ slug: post.slug }))

رندر فقط بخشی از مسیرها:

const posts = await fetch('https://.../posts').then(res => res.json())
return posts.slice(0, 10).map(post => ({ slug: post.slug }))

محدودسازی مسیرهای غیرمشخص:

export const dynamicParams = false

رندر مسیرها در زمان اجرا:

export async function generateStaticParams() {
  return []
}
export const dynamic = 'force-static'

۴. مسیرهای چندسطحی و وابسته

تولید از پایین به بالا:

// app/products/[category]/[product]/page.tsx
export async function generateStaticParams() {
  const products = await fetch('https://.../products').then(res => res.json())
  return products.map(p => ({
    category: p.category.slug,
    product: p.id,
  }))
}

تولید از بالا به پایین:

// app/products/[category]/layout.tsx
export async function generateStaticParams() {
  const products = await fetch('https://.../products').then(res => res.json())
  return products.map(p => ({ category: p.category.slug }))
}

استفاده از پارامتر والد در فرزند:

export async function generateStaticParams({ params: { category } }) {
  const products = await fetch(`https://.../products?category=${category}`).then(res => res.json())
  return products.map(p => ({ product: p.id }))
}

۵. نکات مهم

• در زمان build، generateStaticParams قبل از تولید صفحات اجرا می‌شود
• در زمان revalidate (ISR)، این تابع مجدد اجرا نمی‌شود
• در حالت dev، هنگام ناوبری به مسیر، این تابع اجرا می‌شود
• fetch در این تابع به‌صورت memoized عمل می‌کند

جمع‌بندی

تابع generateStaticParams در Next.js راهی قدرتمند برای تولید مسیرهای داینامیک به‌صورت استاتیک در زمان build است. با استفاده از این قابلیت می‌توانید عملکرد سایت را بهینه کرده، مسیرهای مهم را از قبل تولید کنید، و کنترل دقیقی بر رفتار مسیرهای داینامیک داشته باشید.