Для чего используется getStaticPaths в Next.js

Что проверяют

Понимаете ли вы статическую генерацию динамических маршрутов в Pages Router и знаете ли, что в App Router эта функция уже не используется. Следом почти всегда спрашивают про fallback и чем true отличается от 'blocking'.

Как отвечать

getStaticPaths экспортируется из файла страницы с динамическим сегментом, например pages/products/[id].tsx, и сообщает Next.js, какие значения параметров отрендерить заранее. Работает только в паре с getStaticProps, с getServerSideProps не сочетается. В продакшене вызывается на этапе сборки, в next dev на каждый запрос.

Возвращает объект { paths, fallback }:

• paths: массив вида { params: { id: '42' } }. Значения параметров это строки, для catch-all сегмента [...slug] массив строк;
• fallback: false: всё, чего нет в списке, отдаёт 404. Подходит для небольшого и стабильного набора страниц;
• fallback: true: неизвестный путь сразу получает облегчённую версию страницы, где router.isFallback равен true, а полная генерируется в фоне и кэшируется;
• fallback: 'blocking': первый запрос ждёт серверного рендера и получает готовый HTML, дальше страница отдаётся из кэша.

Типичный приём для большого каталога: заранее собрать самые посещаемые страницы, остальные отдать через 'blocking', а свежесть держать через revalidate в getStaticProps (ISR). Иначе сборка на десятках тысяч товаров становится очень долгой.

В App Router роль getStaticPaths выполняет generateStaticParams, а аналог fallback: false задаётся опцией сегмента dynamicParams = false.

Где спотыкаются

Импортируют функцию из пакета: import { getStaticPaths } from 'next'. Её не импортируют, а объявляют и экспортируют сами; из next берут только типы GetStaticPaths и GetStaticProps.

Выбирают fallback: true и забывают обработать router.isFallback: компонент получает пустые props и падает на обращении к полям.

Рассказывают про getStaticPaths как про актуальный способ в проекте на App Router. Сильнее ответ, где вы сразу называете оба роутера и соответствие между ними.