Как устроена маршрутизация в Next.js?

Основы маршрутизации в Next.js

Next.js использует файловую систему для определения маршрутов. Это означает, что структура папок и файлов в директориях pages (Pages Router) или app (App Router) напрямую отображается на URL-адреса приложения. Такой подход упрощает создание и поддержку навигации, так как разработчику не нужно вручную настраивать маршруты.

Pages Router (классический подход)

В Pages Router каждый файл JavaScript или TypeScript в папке pages становится маршрутом. Например:

pages/
  index.js       -> /
  about.js       -> /about
  blog/
    index.js     -> /blog
    [slug].js    -> /blog/:slug

Динамические сегменты обозначаются квадратными скобками, например [id].js. Доступ к параметрам осуществляется через хук useRouter или getServerSideProps.

App Router (новый подход с Next.js 13)

App Router использует папку app и поддерживает вложенные макеты, серверные компоненты и улучшенную производительность. Структура похожа, но добавляются специальные файлы:

app/
  page.js        -> /
  layout.js      -> общий макет для всех дочерних маршрутов
  about/
    page.js      -> /about
  blog/
    [slug]/
      page.js    -> /blog/:slug

Файл layout.js определяет обёртку для группы страниц, что позволяет переиспользовать интерфейс (например, шапку и подвал).

Практический пример

Создадим простой блог с динамическими маршрутами:

// app/blog/[slug]/page.js
export default function BlogPost({ params }) {
  return <h1>Post: {params.slug}</h1>;
}

// app/blog/page.js
export default function BlogList() {
  return <h1>Blog list</h1>;
}

Теперь URL /blog/my-post отобразит заголовок "Post: my-post", а /blog — список блога.

Вывод

Файловая маршрутизация Next.js ускоряет разработку, делая навигацию интуитивной и предсказуемой. Она особенно полезна для проектов с чёткой иерархией страниц, таких как блоги, документация или интернет-магазины.