generateStaticParams

La función generateStaticParams puede usarse en combinación con segmentos de ruta dinámicos para generar estáticamente rutas en tiempo de compilación en lugar de bajo demanda en tiempo de solicitud.

app/blog/[slug]/page.js

// Retorna una lista de `params` para poblar el segmento dinámico [slug]
export async function generateStaticParams() {
  const posts = await fetch('https://.../posts').then((res) => res.json())

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

// Se generarán estáticamente múltiples versiones de esta página
// usando los `params` retornados por `generateStaticParams`
export default function Page({ params }) {
  const { slug } = params
  // ...
}

Es bueno saber

Puedes usar la opción de configuración de segmento dynamicParams para controlar qué sucede cuando se visita un segmento dinámico que no fue generado con generateStaticParams.

Durante next dev, generateStaticParams será llamado cuando navegues a una ruta.

Durante next build, generateStaticParams se ejecuta antes de que se generen los Layouts o Pages correspondientes.

Durante la revalidación (ISR), generateStaticParams no se llamará nuevamente.

generateStaticParams reemplaza la función getStaticPaths en el Enrutador de Páginas.

Parámetros

options.params (opcional)

Si múltiples segmentos dinámicos en una ruta usan generateStaticParams, la función generateStaticParams hija se ejecuta una vez por cada conjunto de params que genera el padre.

El objeto params contiene los params poblados desde el generateStaticParams padre, que pueden usarse para generar los params en un segmento hijo.

Retorno

generateStaticParams debe retornar un array de objetos donde cada objeto representa los segmentos dinámicos poblados de una sola ruta.

Cada propiedad en el objeto es un segmento dinámico a ser llenado para la ruta.
El nombre de la propiedad es el nombre del segmento, y el valor de la propiedad es con qué debe llenarse ese segmento.

Ejemplo de Ruta	Tipo de Retorno de `generateStaticParams`
`/product/[id]`	`{ id: string }[]`
`/products/[category]/[product]`	`{ category: string, product: string }[]`
`/products/[...slug]`	`{ slug: string[] }[]`

Segmento Dinámico Único

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

// Se generarán estáticamente tres versiones de esta página
// usando los `params` retornados por `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' }]
}

// Se generarán estáticamente tres versiones de esta página
// usando los `params` retornados por `generateStaticParams`
// - /product/1
// - /product/2
// - /product/3
export default function Page({ params }) {
  const { id } = params
  // ...
}

Múltiples Segmentos Dinámicos

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

// Se generarán estáticamente tres versiones de esta página
// usando los `params` retornados por `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' },
  ]
}

// Se generarán estáticamente tres versiones de esta página
// usando los `params` retornados por `generateStaticParams`
// - /products/a/1
// - /products/b/2
// - /products/c/3
export default function Page({ params }) {
  const { category, product } = params
  // ...
}

Segmento Dinámico Catch-all

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

// Se generarán estáticamente tres versiones de esta página
// usando los `params` retornados por `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'] }]
}

// Se generarán estáticamente tres versiones de esta página
// usando los `params` retornados por `generateStaticParams`
// - /product/a/1
// - /product/b/2
// - /product/c/3
export default function Page({ params }) {
  const { slug } = params
  // ...
}

Ejemplos

Múltiples Segmentos Dinámicos en una Ruta

Puedes generar params para segmentos dinámicos por encima del layout o página actual, pero no por debajo. Por ejemplo, dada la ruta app/products/[category]/[product]:

app/products/[category]/[product]/page.js puede generar params para ambos [category] y [product].
app/products/[category]/layout.js puede solo generar params para [category].

Hay dos enfoques para generar params para una ruta con múltiples segmentos dinámicos:

Generar params de abajo hacia arriba

Generar múltiples segmentos dinámicos desde el segmento de ruta hijo.

// Generar segmentos para ambos [category] y [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 }
}) {
  // ...
}

// Generar segmentos para ambos [category] y [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 }) {
  // ...
}

Generar params de arriba hacia abajo

Generar primero los segmentos padre y usar el resultado para generar los segmentos hijo.

// Generar segmentos para [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 } }) {
  // ...
}

// Generar segmentos para [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 }) {
  // ...
}

La función generateStaticParams de un segmento hijo se ejecuta una vez por cada segmento que genera un generateStaticParams padre.

La función generateStaticParams hijo puede usar los params retornados de la función generateStaticParams padre para generar dinámicamente sus propios segmentos.

// Generar segmentos para [product] usando los `params` pasados desde
// la función `generateStaticParams` del segmento padre
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 }
}) {
  // ...
}

// Generar segmentos para [product] usando los `params` pasados desde
// la función `generateStaticParams` del segmento padre
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 }) {
  // ...
}

Es bueno saber: Las solicitudes fetch son automáticamente memorizadas para los mismos datos a través de generateMetadata, generateStaticParams, Layouts, Pages y Server Components. React cache puede usarse si fetch no está disponible.

Historial de Versiones

Versión	Cambios
`v13.0.0`	Se introdujo `generateStaticParams`.

On this page