Что такое dynamic routes в Next?

Что такое Dynamic Routes в Next.js?

Dynamic Routes в Next.js — это механизм для создания страниц, где часть пути (URL) является переменной и может меняться в зависимости от данных. Это фундаментальная концепция для построения современных веб-приложений, таких как блоги, магазины или каталоги продуктов, где каждый элемент (пост, товар) имеет свою уникальную страницу, но структура URL схожа.

Основная идея и принцип работы

В отличие от статических маршрутов (например, /about, /contact), которые соответствуют конкретным файлам в директории pages, динамические маршруты позволяют генерировать страницы на основе шаблона. Это реализуется через специальные имена файлов в структуре папок проекта Next.js:

• Использование квадратных скобок []: Файл или папка, названная в квадратных скобках ([param]), становится динамическим сегментом маршрута.
• Связь с данными: Параметр из URL передается в ключевые функции страницы (getStaticProps, getServerSideProps, getStaticPaths) для предварительной загрузки соответствующих данных.

Типы динамических маршрутов и их создание

1. Один динамический параметр

Самый простой вариант. Например, для страницы поста блога с URL /posts/42, где 42 — это ID поста.

Создание: В папке pages/posts создается файл [id].js (или [id].tsx).

// pages/posts/[id].js
import { getPostById } from '../lib/posts';

// Компонент страницы получает данные через props
export default function PostPage({ post }) {
  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </div>
  );
}

// Функция для предварительной загрузки данных на сервере
export async function getServerSideProps(context) {
  // Параметр из URL доступен в context.params
  const { id } = context.params;
  const post = await getPostById(id);

  return {
    props: {
      post,
    },
  };
}

При запросе /posts/42 компонент PostPage получит в context.params объект { id: '42' }.

2. Множественные динамические параметры (Catch-all Routes)

Полезны для сложных вложенных путей, например, для документации /docs/getting-started/react/installation.

Создание: Используется файл с именем [...slug].js. Параметр slug становится массивом.

// pages/docs/[...slug].js

export async function getStaticProps(context) {
  // Для пути /docs/getting-started/react/installation
  // context.params.slug будет ['getting-started', 'react', 'installation']
  const slugArray = context.params.slug;
  // ... логика поиска данных по всем сегментам пути
}

3. Опциональные динамические параметры

Разновидность catch-all маршрутов, где захватываемый путь может быть пустым. Имя файла — [[...slug]].js. Такой маршрут будет соответствовать и /docs, и /docs/getting-started/react.

Ключевые функции для работы с динамическими маршрутами

Для полноценной работы, особенно в режиме Static Generation (SSG), необходимы две функции:

1. getStaticPaths: Определяет список всех возможных значений параметров, которые должны быть предварительно сгенерированы (при SSG). Next.js использует это для создания статических HTML файлов на этапе сборки.

// pages/posts/[id].js
export async function getStaticPaths() {
  // Получаем список всех постов
  const posts = await getAllPosts();

  // Формируем массив путей
  const paths = posts.map((post) => ({
    params: { id: post.id.toString() }, // Значение параметра должно соответствовать имени файла [id]
  }));

  return {
    paths, // Массив известных путей: [{ params: { id: '1' } }, { params: { id: '2' } }]
    fallback: 'blocking', // Важная опция. 'false', 'true' или 'blocking'. Определяет поведение для путей, не указанных в списке.
  };
}

1. getStaticProps: Получает данные для конкретной страницы, используя параметр из URL.

export async function getStaticProps(context) {
  // ID конкретного поста из context.params
  const { id } = context.params;
  const post = await getPostById(id);

  return {
    props: { post },
    revalidate: 60, // Опция для Incremental Static Regeneration (ISR)
  };
}

Важная опция: fallback

Ключевое свойство возвращаемого объекта из getStaticPaths. Определяет поведение для путей, не предварительно сгенерированных на этапе сборки.

• fallback: false: Пути, не указанные в paths, будут вызывать ошибку 404. Используется, когда список всех возможных путей известен и ограничен.
• fallback: true: Непредварительно сгенерированные пути будут рендериться "на лету" при первом запросе. Пользователь сначала получает "запасную" страницу (например, с loader), а затем — готовую. Страница добавляется в статический cache для будущих запросов. Позволяет генерировать только самые популярные страницы при build, а остальные — динамически.
• fallback: 'blocking': Похоже на true, но пользователь не увидит "запасной" страницы. Запрос будет заблокирован до полного SSR рендера и генерации статической страницы. UX похож на обычный SSR, но результат затем кэшируется.

Преимущества использования Dynamic Routes в Next.js

• SEO-дружественность: Каждая динамическая страница — это отдельный статический HTML файл с уникальным URL, что идеально для поисковых систем.
• Высокая производительность: При использовании SSG+ISR (getStaticPaths + getStaticProps с revalidate) страницы мгновенно загружаются из CDN и обновляются на фоне.
• Чистая и предсказуемая структура URL: Маршруты отражают структуру данных (например, /category/product-name).
• Гибкость: Можно комбинировать статические и динамические сегменты (/blog/static-page/[dynamic-post]).
• Интеграция с API роутами: Динамические параметры также работают в API маршрутах (pages/api/posts/[id].js), позволяя создавать гибкие эндпоинты.

Таким образом, Dynamic Routes — это не просто техническая особенность Next.js, а мощная архитектурная парадигма, которая соединяет структуру URL, систему рендеринга и загрузку данных, позволяя строить быстрые, масштабируемые и удобные для пользователя приложения. Их правильное использование вместе с getStaticPaths, fallback и Incremental Static Regeneration является одним из краеугольных камней профессиональной разработки на Next.js.