Как работают динамические маршруты и generateStaticParams в Next.js?

Динамический маршрут содержит параметр в имени папки, например app/posts/[slug]/page.tsx, а `generateStaticParams` сообщает Next.js, какие значения параметра сгенерировать заранее.

Динамический сегмент

// app/posts/[slug]/page.tsx
export default async function Post({ params }: { params: { slug: string } }) {
  const post = await getPost(params.slug);
  return <h1>{post.title}</h1>;
}

Другие формы: [...slug] для любой глубины и [[...slug]] с необязательным значением.

Предварительная генерация

export async function generateStaticParams() {
  const posts = await getAllPosts();
  return posts.map((p) => ({ slug: p.slug }));
}

Страницы для перечисленных значений собираются на этапе сборки. Остальные либо генерируются при первом запросе, либо дают 404, это определяет настройка dynamicParams.

Когда полезно

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

Коротко для собеседования

Сегмент [param] делает маршрут динамическим, а generateStaticParams превращает известные значения в статические страницы при сборке.