Роутер страниц: Подробности о динамических маршрутах

Вот важная информация, которую следует знать о динамических маршрутах.

Запросы к внешнему API или базе данных

Как и getStaticProps, функция getStaticPaths может получать данные из любого источника. В нашем примере getAllPostIds (которая используется в getStaticPaths) может делать запрос к внешнему API:

export async function getAllPostIds() {
  // Вместо файловой системы
  // получаем данные постов из внешнего API
  const res = await fetch('..');
  const posts = await res.json();
  return posts.map((post) => {
    return {
      params: {
        id: post.id,
      },
    };
  });
}

Разработка vs. Продакшен

В режиме разработки (npm run dev или yarn dev) функция getStaticPaths выполняется при каждом запросе.
В продакшене getStaticPaths выполняется во время сборки.

Резервный вариант (Fallback)

Напомним, что мы возвращали fallback: false из getStaticPaths. Что это значит?

Если fallback равен false, то любые пути, не возвращённые getStaticPaths, приведут к 404 странице.

Если fallback равен true, поведение getStaticProps меняется:

Пути, возвращённые getStaticPaths, будут отрендерены в HTML во время сборки.
Пути, не сгенерированные во время сборки, не приведут к 404 странице. Вместо этого Next.js покажет "резервную" версию страницы при первом запросе такого пути.
В фоне Next.js сгенерирует запрошенный путь статически. Последующие запросы к тому же пути будут получать сгенерированную страницу, как и другие страницы, предварительно отрендеренные во время сборки.

Если fallback равен blocking, новые пути будут рендериться на стороне сервера с помощью getStaticProps и кэшироваться для будущих запросов, так что это произойдёт только один раз для каждого пути.

Это выходит за рамки наших уроков, но вы можете узнать больше о fallback: true и fallback: 'blocking' в документации по fallback.

Перехватывающие маршруты (Catch-all)

Динамические маршруты можно расширить для перехвата всех путей, добавив три точки (...) внутри скобок. Например:

pages/posts/[...id].js соответствует /posts/a, а также /posts/a/b, /posts/a/b/c и так далее.

В этом случае в getStaticPaths нужно возвращать массив в качестве значения ключа id:

return [
  {
    params: {
      // Статически генерирует /posts/a/b/c
      id: ['a', 'b', 'c'],
    },
  },
  //...
];

И params.id будет массивом в getStaticProps:

export async function getStaticProps({ params }) {
  // params.id будет выглядеть как ['a', 'b', 'c']
}

Подробнее см. в документации по перехватывающим маршрутам.

Роутер

Для доступа к роутеру Next.js можно использовать хук useRouter из next/router.

404 страницы

Чтобы создать кастомную 404 страницу, создайте файл pages/404.js. Он генерируется статически во время сборки.

// pages/404.js
export default function Custom404() {
  return <h1>404 - Страница не найдена</h1>;
}

Подробнее см. в документации по страницам ошибок.

Дополнительные примеры

Мы создали несколько примеров, иллюстрирующих работу getStaticProps и getStaticPaths — изучите их исходный код, чтобы узнать больше:

Это всё!

В следующем уроке мы поговорим о API Routes в Next.js.

Подробности о динамических маршрутах

On this page