Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Що таке `generateStaticParams`?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)`generateStaticParams` у **Next.js (App Router)** - це серверна функція, яка каже Next.js, які значення параметрів динамічного маршруту потрібно згенерувати заздалегідь на етапі білда. **Ключове:** вона перетворює динамічний маршрут на набір статичних сторінок (SSG).Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення`generateStaticParams` у **Next.js (App Router)** - це **серверна функція**, яка каже Next.js, **які значення параметрів динамічного маршруту потрібно згенерувати заздалегідь на етапі білда**. Простіше: > **Вона перетворює динамічний маршрут на набір статичних сторінок (SSG).** --- ## Навіщо потрібна `generateStaticParams` Без неї динамічний маршрут: ```txt app/blog/[slug]/page.tsx ``` - не знає, **які** `slug` **існують**. `generateStaticParams`: - повертає список `slug` - Next.js генерує HTML **для кожного значення** - сторінки віддаються з CDN як звичайні статичні файли --- ## Базовий приклад ```ts export async function generateStaticParams() { const posts = await getPosts() return posts.map(post => ({ slug: post.slug, })) } ``` ```ts 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 ```ts export const revalidate = 60 ``` - сторінки оновлюються без ребілда --- ### 4. Не зобов'язана покривати все Можна: - згенерувати **популярні сторінки** - решту рендерити за запитом --- ## Часті помилки плутати з `getStaticPaths` (Pages Router) повертати неправильну форму об'єкта очікувати клієнтський доступ --- ## Коротка відповідь для співбесіди > `generateStaticParams` **- це функція App Router у Next.js, яка визначає список параметрів динамічного маршруту для статичної генерації сторінок на етапі білда.**Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.