generateStaticParams

Функцию generateStaticParams можно использовать в сочетании с динамическими сегментами маршрута, чтобы статически сгенерировать маршруты во время сборки вместо их генерации по запросу.

// 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
  // ...
}

Важно знать

Вы можете использовать опцию конфигурации сегмента 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' }]
}
 
// 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
  // ...
}

Несколько динамических сегментов

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»

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
  // ...
}

Примеры

Несколько динамических сегментов в маршруте

Вы можете генерировать параметры для динамических сегментов выше текущего макета или страницы, но не ниже. Например, при маршруте app/products/[category]/[product]:

app/products/[category]/[product]/page.js может генерировать параметры для обоих [category] и [product].
app/products/[category]/layout.js может только генерировать параметры для [category].

Существует два подхода к генерации параметров для маршрута с несколькими динамическими сегментами:

Генерация параметров снизу вверх

Генерируйте несколько динамических сегментов из дочернего сегмента маршрута.

// 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 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 } }) {
  // ...
}

Функция дочернего сегмента generateStaticParams выполняется один раз для каждого сегмента, который родительский сегмент generateStaticParams генерирует.

Функция дочернего сегмента generateStaticParams может использовать возвращаемое значение params из родительской функции generateStaticParams для динамической генерации собственных сегментов.

// 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 }
}) {
  // ...
}

Важно знать: запросы fetch автоматически кешируются для одних и тех же данных во всех функциях, макетах, страницах и компонентах сервера, начинающихся с префикса generate. React cache может быть использован, если fetch недоступен.

Генерация только подмножества параметров

Вы можете сгенерировать подмножество параметров для маршрута, вернув массив объектов только с динамическими сегментами, которые вы хотите сгенерировать. Затем, используя опцию конфигурации сегмента dynamicParams, вы можете управлять тем, что произойдёт при посещении динамического сегмента, который не был сгенерирован с помощью generateStaticParams.

// 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,
  }))
}

История версий

Версия	Изменения
`v13.0.0`	`generateStaticParams` была добавлена.

© 2024 Vercel, Inc.
Licensed under the MIT License.
https://nextjs.org/docs/app/api-reference/functions/generate-static-params