Маршрутизация в Next.js (File-Based Routing)

В Next.js маршрутизация основана на файловой системе. Структура папок внутри директории app напрямую определяет URL-адреса приложения. Не нужно настраивать роутер отдельно.

Базовая маршрутизация

Каждая папка в app это сегмент URL. Файл page.tsx делает этот сегмент доступным:

Динамические роуты

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

// app/docs/[slug]/page.tsx
export default async function DocPage({
  params
}: {
  params: { slug: string }
}) {
  const doc = await getDoc(params.slug)
  return <article>{doc.content}</article>
}

URL /docs/what-is-nextjs передаст { slug: 'what-is-nextjs' } в params.

Catch-All роуты

Для захвата нескольких сегментов используется [...slug]:

// app/docs/[...slug]/page.tsx
export default function DocPage({
  params
}: {
  params: { slug: string[] }
}) {
  // /docs/next/ssg → slug = ['next', 'ssg']
  // /docs/react/hooks/useState → slug = ['react', 'hooks', 'useState']
  return <div>{params.slug.join(' / ')}</div>
}

Вариант [[...slug]] (двойные скобки) также матчит корневой путь без сегментов.

Route Groups

Круглые скобки позволяют группировать роуты без влияния на URL:

(marketing) и (platform) не попадают в URL. Страница /about находится в app/(marketing)/about/page.tsx. Это позволяет использовать разные layouts для разных групп страниц.

Параллельные роуты (Parallel Routes)

Параллельные роуты позволяют рендерить несколько страниц одновременно в одном layout. Определяются через слоты с @:

// app/dashboard/layout.tsx
export default function DashboardLayout({
  children,
  stats,
  activity
}: {
  children: React.ReactNode
  stats: React.ReactNode
  activity: React.ReactNode
}) {
  return (
    <div>
      {children}
      <div className="grid grid-cols-2 gap-4">
        {stats}
        {activity}
      </div>
    </div>
  )
}

Каждый слот загружается и стримится независимо.

Перехватывающие роуты (Intercepting Routes)

Позволяют перехватить навигацию и показать роут в другом контексте (например, в модальном окне):

(.) — перехват на том же уровне
(..) — на уровень выше
(..)(..) — на два уровня выше
(...) — от корня app

Типичный пример: клик по карточке задачи на Hack Frontend открывает модалку с превью, а прямой переход по URL показывает полную страницу.

Специальные файлы

Полезные ресурсы

• nextjs.org/docs — маршрутизация
• Parallel Routes
• Intercepting Routes

Связанные темы

• App Router vs Pages Router
• Layouts и Templates в Next.js
• next/link и навигация в Next.js