> Для чего используется getStaticPaths в Next.js (JavaScript, Next.js, TypeScript)

Короткий ответ

getStaticPaths в Next.js используется для генерации статических страниц с динамическими маршрутами (например, [id].tsx). Он определяет, какие пути должны быть предварительно отрендерены на этапе сборки. Функция возвращает объект с массивом paths и флагом fallback, управляющим поведением для не указанных путей. Это ключевой элемент статической генерации (SSG) для динамических страниц.

Подробное объяснение

getStaticPaths - это асинхронная функция, экспортируемая из файла динамического маршрута в Next.js (например, pages/posts/[id].tsx). Она обязательна при использовании getStaticProps на странице с динамическим маршрутом. Основная задача - сообщить Next.js, какие динамические пути существуют, чтобы на этапе сборки (build time) сгенерировать для них статические HTML-файлы.

Функция возвращает объект с двумя полями:

• paths - массив объектов с параметрами маршрута. Каждый объект содержит params с ключами, соответствующими динамическим сегментам (например, { params: { id: '1' } }).
• fallback - управляет поведением для путей, не указанных в paths. Возможные значения:
  • false - несуществующие пути возвращают 404.
  • true - Next.js пытается сгенерировать страницу по запросу (ISR-like поведение).
  • 'blocking' - запрос ждёт полной генерации страницы на сервере.

getStaticPaths выполняется только на сервере (в Node.js) и не попадает в клиентский бандл. Для больших наборов данных (например, тысячи постов) рекомендуется использовать fallback: true или 'blocking', чтобы не генерировать все страницы сразу.

На практике

В реальных проектах getStaticPaths часто используется для:

• Генерации страниц товаров, блогов, документации.
• Интеграции с headless CMS (Contentful, Strapi) или API.
• Оптимизации производительности за счёт предварительной генерации популярных страниц.
• Реализации инкрементальной статической регенерации (ISR) в сочетании с revalidate в getStaticProps.

При работе с большими объёмами данных (10k+ записей) стоит:

• Использовать fallback: true или 'blocking'.
• Разделять генерацию на несколько этапов (например, только топ-100 страниц).
• Добавлять обработку ошибок и fallback UI для несуществующих путей.

Пример кода

TYPESCRIPT
// pages/posts/[id].tsx
import { GetStaticPaths, GetStaticProps } from 'next';

interface Post {
  id: string;
  title: string;
}

export const getStaticPaths: GetStaticPaths = async () => {
  // Получаем список всех постов из API
  const res = await fetch('https://api.example.com/posts');
  const posts: Post[] = await res.json();

  const paths = posts.map((post) => ({
    params: { id: post.id },
  }));

  return {
    paths,
    fallback: 'blocking', // или true для постепенной генерации
  };
};

export const getStaticProps: GetStaticProps = async ({ params }) => {
  const res = await fetch(`https://api.example.com/posts/${params?.id}`);
  const post: Post = await res.json();

  if (!post) {
    return { notFound: true };
  }

  return {
    props: { post },
    revalidate: 60, // ISR: перегенерировать каждые 60 секунд
  };
};

Как отвечать на собеседовании

Начни с краткого определения и назначения. Затем объясни структуру возвращаемого объекта и варианты fallback. Подчеркни, что getStaticPaths работает только с динамическими маршрутами и getStaticProps. Упомяни типичные сценарии использования (блоги, каталоги) и trade-off между временем сборки и гибкостью. Если спросят про производительность, расскажи про ISR и fallback. Избегай углубления в детали реализации без дополнительного вопроса.

Что проверяет интервьюер

• Понимание статической генерации (SSG) и её ограничений.
• Знание lifecycle Next.js: build time vs request time.
• Умение работать с динамическими маршрутами и параметрами.
• Понимание fallback и его влияния на UX и SEO.
• Способность объяснить, когда использовать getStaticPaths вместо getServerSideProps.

Типичные ошибки

• Забывают экспортировать getStaticPaths из файла с динамическим маршрутом.
• Возвращают paths без params или с неверной структурой.
• Используют fallback: false для больших наборов данных, что приводит к 404 для новых страниц.
• Пытаются использовать getStaticPaths на статическом маршруте (без квадратных скобок).
• Не обрабатывают ошибки при запросах к API внутри getStaticPaths, что ломает сборку.
• Путают getStaticPaths с getServerSideProps и используют их вместе.