generateStaticParams

generateStaticParams fonksiyonu dinamik ro ta segmentleri ile birlikte kullanılarak rotalar istek anında isteğe bağlı olarak oluşturulmak yerine derleme zamanında statik olarak oluşturul abilir.

app/blog/[slug]/page.js
// Return a list of `params` to populate the [slug] dynamic segment
export async function generateStaticParams() {
  const posts = await fetch('https://.../posts').then((res) => res.json())
 
  return posts.map((post) => ({
    slug: post.slug,
  }))
}
 
// Multiple versions of this page will be statically generated
// using the `params` returned by `generateStaticParams`
export default function Page({ params }) {
  const { slug } = params
  // ...
}

Bildiğim iyi oldu

  • Kullanabilirsiniz dynamicParamsgenerateStaticParams ile oluşturulmamış bir dinamik segment ziyaret edildiğinde ne olacağını kontrol etmek için segment yapılandırma seçeneği.
  • next dev sırasında, bir rotaya gittiğinizde generateStaticParams çağrılacaktır.
  • next build sırasında, generateStaticParams ilgili Düzenler veya Sayfalar oluşturulmadan önce çalışır.
  • Yeniden doğrulama (ISR) sırasında generateStaticParams tekrar çağrılmayacaktır.
  • generateStaticParams değiştirir getStaticPaths Sayfalar Yönlendiricisi'ndeki işlev.

Parameters

options.params (isteğe bağlı)

Bir rotadaki birden fazla dinamik segment generateStaticParams kullanıyorsa, alt generateStaticParams işlevi, ebeveynin oluşturduğu her params kümesi için bir kez yürütülür.

params nesnesi, bir alt segmentte params oluşturmak için kullanılabilecek üst generateStaticParams adresinden doldurulmuş params adresini içerir.

Returns

generateStaticParams her bir nesnenin tek bir rotanın doldurulmuş dinamik segmentlerini temsil ettiği bir nesne dizisi döndürmelidir.

Example RoutegenerateStaticParams Return Type
/product/[id]{ id: string }[]
/products/[category]/[product]{ category: string, product: string }[]
/products/[...slug]{ slug: string[] }[]

Single Dynamic Segment

app/product/[id]/page.tsx
export function generateStaticParams() {
  return [{ id: '1' }, { id: '2' }, { id: '3' }]
}
 
// Three versions of this page will be statically generated
// using the `params` returned by `generateStaticParams`
// - /product/1
// - /product/2
// - /product/3
export default function Page({ params }: { params: { id: string } }) {
  const { id } = params
  // ...
}

Multiple Dynamic Segments

app/products/[category]/[product]/page.tsx
export function generateStaticParams() {
  return [
    { category: 'a', product: '1' },
    { category: 'b', product: '2' },
    { category: 'c', product: '3' },
  ]
}
 
// Three versions of this page will be statically generated
// using the `params` returned by `generateStaticParams`
// - /products/a/1
// - /products/b/2
// - /products/c/3
export default function Page({
  params,
}: {
  params: { category: string; product: string }
}) {
  const { category, product } = params
  // ...
}

Catch-all Dynamic Segment

app/product/[...slug]/page.tsx
export function generateStaticParams() {
  return [{ slug: ['a', '1'] }, { slug: ['b', '2'] }, { slug: ['c', '3'] }]
}
 
// Three versions of this page will be statically generated
// using the `params` returned by `generateStaticParams`
// - /product/a/1
// - /product/b/2
// - /product/c/3
export default function Page({ params }: { params: { slug: string[] } }) {
  const { slug } = params
  // ...
}

Examples

Multiple Dynamic Segments in a Route

Geçerli düzen veya sayfanın üzerindeki dinamik segmentler için parametreler oluşturabilirsiniz, ancak altında oluşturamazsınız. Örneğin, app/products/[category]/[product] rotası verildiğinde:

Birden fazla dinamik segmente sahip bir rota için parametre oluşturmaya yönelik iki yaklaşım vardır:

Generate params from the bottom up

Alt rota segmentinden birden fazla dinamik segment oluşturun.

app/products/[category]/[product]/page.tsx
// Generate segments for both [category] and [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 }
}) {
  // ...
}

Generate params from the top down

Önce üst segmentleri oluşturun ve sonucu alt segmentleri oluşturmak için kullanın.

app/products/[category]/layout.tsx
// Generate segments for [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 } }) {
  // ...
}

Bir alt rota segmentinin generateStaticParams işlevi, bir üst rota segmentinin generateStaticParams oluşturduğu her segment için bir kez yürütülür.

Alt generateStaticParams işlevi, kendi segmentlerini dinamik olarak oluşturmak için üst generateStaticParams işlevinden döndürülen params işlevini kullanabilir.

app/products/[category]/[product]/page.tsx
// Generate segments for [product] using the `params` passed from
// the parent segment's `generateStaticParams` function
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 }
}) {
  // ...
}

Bilmenizde fayda var: fetch istekleri, tüm generate-önceden belirlenmiş işlevler, Düzenler, Sayfalar ve Sunucu Bileşenleri genelinde aynı veriler için otomatik olarak not edilir. fetch kullanılamıyorsa React cache kullanılabilir.

Generate only a subset of params

Yalnızca oluşturmak istediğiniz dinamik segmentleri içeren bir nesne dizisi döndürerek bir rota için bir parametre alt kümesi oluşturabilirsiniz. Ardından, kullanarak dynamicParams segment yapılandırma seçeneği ile generateStaticParams ile oluşturulmamış bir dinamik segment ziyaret edildiğinde ne olacağını kontrol edebilirsiniz.

app/blog/[slug]/page.js
// All posts besides the top 10 will be a 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,
  }))
}

Version History

VersionChanges
v13.0.0generateStaticParams introduced.