Динамические маршруты в Next.js

Чёрно-белая фотография дороги, снятая сверху

Что такое динамические маршруты?

Динамические маршруты — это страницы, где часть URL выступает в роли параметра. Вместо создания отдельного файла для каждой сущности (поста, продукта, профиля) вы используете шаблон страницы с параметром, например [slug].js.

Определение в одну строку: slug — читаемая часть URL, обычно основанная на заголовке или названии ресурса.

Важно: динамические маршруты экономят время и делают структуру проекта масштабируемой.

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

Для блогов, каталогов, карточек товаров.
Когда URL зависит от данных (заголовок, id, комбинация параметров).
Когда количество страниц велико или заранее неизвестно.

Важно: выбор метода получения данных (SSG vs SSR vs CSR) влияет на скорость загрузки, SEO и свежесть контента.

Создание динамического маршрута в Next.js

Чтобы создать динамический маршрут, в папке pages создайте файл с именем в квадратных скобках: [params].js, [slug].js или [id].js.

Например, для блога используйте slug — если у поста slug равен dynamic-routes-nextjs, итоговый URL будет https://example.com/dynamic-routes-nextjs.

В файле pages/[slug].js создайте компонент Post, который принимает данные поста через пропсы.

const Post = ({ postData }) => {  
  return {/* content */};  
};

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

getStaticProps — получать данные на этапе сборки (SSG).
getServerSideProps — получать данные на каждом запросе (SSR).
Клиентский запрос (fetch внутри useEffect) — CSR, для интерактивных или часто обновляемых частей.

Использование getStaticProps для получения данных поста

Если посты меняются редко, достаточно получить их при сборке:

import { getSinglePost } from "../../utils/posts";
  
const Post = ({ content }) => {  
  return {/* content */};  
};  
  
export const getStaticProps = async ({ params }) => {  
    const post = await getSinglePost(params.slug);  

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

getStaticProps формирует данные, которые будут переданы в компонент. Она использует slug из params, сгенерированных функцией getStaticPaths.

Использование getStaticPaths для генерации путей

getStaticPaths возвращает список путей, которые нужно предварительно отрендерить:

export const getStaticPaths = async () => {  
  const paths = getAllPosts().map(({ slug }) => ({ params: { slug } }));  

  return {  
    paths,  
    fallback: false,  
  };  
};

Эта реализация собирает все посты и возвращает массив объектов вида { params: { slug } }.

Полный пример файла pages/[slug].js:

import { getAllPosts, getSinglePost } from "../../utils/posts";
  
const Post = ({ content }) => {  
  return {content};  
};
  
export const getStaticPaths = async () => {  
  const paths = getAllPosts().map(({ slug }) => ({ params: { slug } }));  

  return {  
    paths,  
    fallback: false,  
  };  
};
  
export const getStaticProps = async ({ params }) => {  
  const post = await getSinglePost(params.slug);  
  
  return {  
    props: { ...post },  
  };  
};
  
export default Post;

Ключевая мысль: getStaticPaths генерирует динамические маршруты, а getStaticProps наполняет каждую страницу данными.

Вложенные динамические маршруты

Чтобы создать вложенный маршрут, создайте папку внутри pages и поместите туда динамический файл. Например:

/pages/posts/[slug].js — путь /posts/dynamic-routes-nextjs

Файловая структура остаётся логичной и отражает URL.

Доступ к параметрам URL внутри компонента

Можно получить параметры через хук useRouter:

import { useRouter } from 'next/router'
  
const Post = () => {  
  const router = useRouter()
  const { slug } = router.query
  return Post: {slug}
}
  
export default Post

Это удобно для клиентских действий, навигации или условного рендера при CSR.

Динамическая маршрутизация с getServerSideProps

Если данные меняются на каждом запросе или важна персонализированная страница, используйте getServerSideProps. Недостаток — каждая страница рендерится на сервере при запросе, что медленнее, чем SSG.

Совет: используйте getServerSideProps для данных, требующих аутентификации или постоянных обновлений.

Когда SSG (getStaticProps + getStaticPaths) не подходит — примеры

Контент обновляется каждую минуту и должен быть всегда свежим (например, лента цен в реальном времени).
Страница сильно персонализирована под пользователя (номинативные рекомендации, корзина).
Сторонняя система изменяет slug динамически и вы не можете предсказать пути при сборке.

В таких случаях выбирайте getServerSideProps или гибридные подходы (ISR — Incremental Static Regeneration).

Альтернативные подходы и сочетания

getServerSideProps — SSR для динамики на каждом запросе.
CSR с fetch в useEffect — полезно для интерактивных частей, где SEO не критично.
ISR — позволяет статически рендерить страницы и периодически обновлять их.

Краткая эвристика: если важен SEO и контент относительно статичен — SSG. Если важна свежесть — SSR. Если нужна интерактивность после загрузки — CSR.

Шпаргалка: быстрый чек-лист для разработчика

Создать файл pages/[slug].js
Реализовать getStaticPaths (или getServerSideProps для SSR)
Реализовать getStaticProps и вернуть props
Проверить fallback (false, true или ‘blocking’) и обработать loading state
Убедиться, что slug уникален и безопасен для URL
Тестировать роуты локально и в прод-окружении

Мини-методология: шаги внедрения динамических маршрутов

Решите стратегию рендеринга (SSG/SSR/CSR/ISR).
Определите структуру URL и поля (slug, id, категория).
Напишите getAllPosts/getSinglePost или адаптер для API.
Реализуйте getStaticPaths и getStaticProps (или getServerSideProps).
Обработайте fallback, ошибки 404 и загрузочные состояния.
Протестируйте SEO (мета-теги, Open Graph) и навигацию.

Критерии приёмки

Для каждого существующего поста страница доступна по URL со slug.
Переходы между постами работают без ошибок.
Для недействительного slug возвращается 404.
Страницы рендерятся в соответствии со стратегией (SSG/SSR).
SEO-метатеги заполнены корректно.

Контрольные варианты и крайние случаи

fallback: true или ‘blocking’ — проверяйте поведение при первом запросе.
Дублирующиеся slug — должны обрабатываться на уровне генерации контента.
Большое количество путей — рассмотрите пагинацию или ISR вместо pre-render всех страниц.

Короткий глоссарий

slug — человекочитаемый идентификатор в URL.
SSG — Static Site Generation (статическая генерация).
SSR — Server-Side Rendering (рендеринг на сервере).
CSR — Client-Side Rendering (рендеринг на клиенте).

Часто задаваемые вопросы

Нужно ли всегда использовать getStaticPaths вместе с getStaticProps?

Нет. getStaticProps можно использовать и без getStaticPaths, если страница статична и не зависит от параметров URL. Для динамических маршрутов вместе они нужны, если вы используете SSG.

Что выбрать: fallback false, true или ‘blocking’?

false: генерируются только указанные пути; остальные — 404.
true: Next.js покажет пустой шаблон, пока страница генерируется на клиенте.
‘blocking’: запрос ждёт генерации на сервере и получает готовую страницу.

Как предотвратить проблемы с SEO при CSR?

Лучше использовать SSG или SSR для страниц, важность которых определяет видимость в поиске.

Резюме

Динамические маршруты в Next.js упрощают создание страниц на основе данных и позволяют выбрать оптимальную стратегию рендеринга. Для большинства блогов и каталогов комбинация getStaticPaths + getStaticProps даёт лучшее соотношение скорости и SEO, тогда как getServerSideProps пригодится для часто изменяющегося или персонализированного контента.

Ключевые действия: определите стратегию рендеринга, корректно реализуйте getStaticPaths и getStaticProps (или getServerSideProps), протестируйте поведение fallback и убедитесь, что 404 работает корректно.

Дополнительные ресурсы: официальная документация Next.js по динамическим маршрутам и API-функциям (getStaticProps, getStaticPaths, getServerSideProps).