Динамические маршруты

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

Конвенция

Динамический сегмент можно создать, обернув имя папки в квадратные скобки: [folderName]. Например, [id] или [slug].

Динамические сегменты передаются как свойство params функциям layout, page, route и generateMetadata.

Пример

Например, блог может содержать следующий маршрут app/blog/[slug]/page.js, где [slug] — это динамический сегмент для постов блога.

export default function Page({ params }: { params: { slug: string } }) {
  return <div>My Post: {params.slug}</div>
}

См. страницу generateStaticParams(), чтобы узнать, как генерировать параметры для сегмента.

Важно знать: Динамические сегменты эквивалентны динамическим маршрутам в каталоге pages.

Генерация статических параметров

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

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

Основное преимущество функции generateStaticParams — это умный доступ к данным. Если содержимое извлекается в функции generateStaticParams с использованием запроса fetch, запросы автоматически запоминаются. Это означает, что запрос fetch с одинаковыми аргументами в нескольких generateStaticParams, макетах и страницах будет выполнен только один раз, что уменьшает время сборки.

Используйте руководство по миграции , если вы мигрируете из каталога pages.

См. generateStaticParams документацию по серверной функции для получения дополнительной информации и расширенных случаев использования.

Сегменты-ловушки

Динамические сегменты могут быть расширены, чтобы обрабатывать все последующие сегменты, добавив многоточие в скобки [...folderName].

Например, app/shop/[...slug]/page.js будет соответствовать /shop/clothes, но также /shop/clothes/tops, /shop/clothes/tops/t-shirts и так далее.

Необязательные сегменты-ловушки

Сегменты-ловушки могут быть сделаны необязательными, включив параметр в двойные квадратные скобки: [[...folderName]].

Например, app/shop/[[...slug]]/page.js также будет соответствовать /shop, помимо /shop/clothes, /shop/clothes/tops, /shop/clothes/tops/t-shirts.

Разница между сегментами ловушкой и необязательной ловушкой заключается в том, что в случае необязательного сегмента маршрут без параметра также соответствует (/shop в примере выше).

TypeScript

При использовании TypeScript вы можете добавить типы для params в зависимости от вашего конфигурированного сегмента маршрута.

export default function Page({ params }: { params: { slug: string } }) {
  return <h1>My Page</h1>
}

Важно знать: В будущем это может быть сделано автоматически плагином TypeScript TypeScript plugin.