Путь страницы зависит от внешних данных

В предыдущем уроке мы рассмотрели случай, когда содержимое страницы зависит от внешних данных. Мы использовали getStaticProps для получения необходимых данных для рендеринга главной страницы.

В этом уроке мы поговорим о случае, когда путь каждой страницы зависит от внешних данных. Next.js позволяет статически генерировать страницы с путями, зависящими от внешних данных. Это позволяет создавать динамические URL в Next.js.

Как статически генерировать страницы с динамическими маршрутами

В нашем случае мы хотим создать динамические маршруты для постов блога:

• Мы хотим, чтобы каждый пост имел путь /posts/<id>, где <id> — это имя markdown-файла в корневой директории posts.
• Поскольку у нас есть файлы ssg-ssr.md и pre-rendering.md, мы хотим получить пути /posts/ssg-ssr и /posts/pre-rendering.

Обзор шагов

Мы можем сделать это, выполнив следующие шаги. Вам пока не нужно вносить эти изменения — мы сделаем всё на следующей странице.

Сначала мы создадим страницу [id].js в директории pages/posts. Страницы, которые начинаются с [ и заканчиваются ], являются динамическими маршрутами в Next.js.

В файле pages/posts/[id].js мы напишем код, который будет рендерить страницу поста — так же, как и другие созданные нами страницы.

import Layout from '../../components/layout';
 
export default function Post() {
  return <Layout>...</Layout>;
}

Теперь вот что нового: мы экспортируем асинхронную функцию getStaticPaths из этой страницы. В этой функции нам нужно вернуть список возможных значений для id.

import Layout from '../../components/layout';
 
export default function Post() {
  return <Layout>...</Layout>;
}
 
export async function getStaticPaths() {
  // Возвращаем список возможных значений для id
}

Наконец, нам снова нужно реализовать getStaticProps — на этот раз для получения необходимых данных для поста блога с заданным id. Функция getStaticProps получает параметр params, который содержит id (поскольку имя файла — [id].js).

import Layout from '../../components/layout';
 
export default function Post() {
  return <Layout>...</Layout>;
}
 
export async function getStaticPaths() {
  // Возвращаем список возможных значений для id
}
 
export async function getStaticProps({ params }) {
  // Получаем необходимые данные для поста блога, используя params.id
}

Вот графическое резюме того, о чём мы только что говорили:

Давайте попробуем это на следующей странице!