Що таке `generateStaticParams`?

Next.jsMiddle~1 хв читання

generateStaticParams у Next.js (App Router) - це серверна функція, яка каже Next.js, які значення параметрів динамічного маршруту потрібно згенерувати заздалегідь на етапі білда.

Простіше:

Вона перетворює динамічний маршрут на набір статичних сторінок (SSG).

Навіщо потрібна `generateStaticParams`

Без неї динамічний маршрут:

txt

app/blog/[slug]/page.tsx

не знає, які slug існують.

generateStaticParams:

повертає список slug
Next.js генерує HTML для кожного значення
сторінки віддаються з CDN як звичайні статичні файли

Базовий приклад

export async function generateStaticParams() {
  const posts = await getPosts()

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

export default function Page({ params }) {
  return <Article slug={params.slug} />
}

Результат: /blog/post-1, /blog/post-2, /blog/post-3 - статичні сторінки

Де використовується

блоги документація каталоги SEO-сторінки роадмапи

Зв'язок з рендерингом

Сценарій	Поведінка
Є `generateStaticParams`	SSG
+ `revalidate`	ISR
Немає `generateStaticParams`	SSR (за запитом)

Важливі нюанси

1. Виконується тільки на сервері

доступ до БД
доступ до API
секрети безпечні

2. Працює тільки з App Router

в pages/ її немає тільки app/

3. Можна комбінувати з ISR

export const revalidate = 60

сторінки оновлюються без ребілда

4. Не зобов'язана покривати все

Можна:

згенерувати популярні сторінки
решту рендерити за запитом

Часті помилки

плутати з getStaticPaths (Pages Router) повертати неправильну форму об'єкта очікувати клієнтський доступ

Коротка відповідь для співбесіди

generateStaticParams - це функція App Router у Next.js, яка визначає список параметрів динамічного маршруту для статичної генерації сторінок на етапі білда.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.