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

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

Конвенция

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

К динамическим сегментам можно получить доступ из useRouter.

Пример

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

import { useRouter } from 'next/router'
 
export default function Page() {
  const router = useRouter()
  return <p>Post: {router.query.slug}</p>
}

Сегменты «catch-all»

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

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

Необязательные сегменты «catch-all»

Сегменты «catch-all» можно сделать необязательными, включив параметр в двойные квадратные скобки: [[...segmentName]].

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

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