Маршрутизація в Next.js (маршрутизація на основі файлів)

У Next.js маршрутизація базується на файловій системі. Структура папок у директорії app безпосередньо визначає URL-адреси програми. Не потрібна окрема конфігурація маршрутизатора.

Основна маршрутизація

Кожна папка в app є сегментом URL. Файл page.tsx робить цей сегмент доступним:

app
page.tsx
docs
page.tsx
problems
page.tsx

Файл	URL
`app/page.tsx`	`/`
`app/docs/page.tsx`	`/docs`
`app/problems/page.tsx`	`/problems`

Динамічні маршрути

Квадратні дужки використовуються для динамічних сегментів:

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.

Маршрути з захопленням

Використовуйте [...slug], щоб захопити кілька сегментів:

tsx

// 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]] (подвійні дужки) також відповідає кореневому шляху без сегментів.

Групи маршрутів

Дужки дозволяють групувати маршрути без впливу на URL:

app
(marketing)
layout.tsx
about
page.tsx
pricing
page.tsx
(platform)
layout.tsx
problems
page.tsx
docs
page.tsx

(marketing) та (platform) не з'являються в URL. Сторінка /about знаходиться за адресою app/(marketing)/about/page.tsx. Це дозволяє використовувати різні макети для різних груп сторінок.

Паралельні маршрути

Паралельні маршрути дозволяють рендерити кілька сторінок одночасно в одному макеті. Визначаються через слоти з @:

app
dashboard
layout.tsx
page.tsx
@stats
page.tsx
@activity
page.tsx

tsx

// 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>
  )
}

Кожен слот завантажується та транслюється незалежно.

Перехоплення маршрутів

Дозволяє перехоплювати навігацію, щоб показати маршрут в іншому контексті (наприклад, у модальному вікні):

(.) — перехоплення на тому ж рівні
(..) — на один рівень вище
(..)(..) — на два рівні вище
(...) — з кореня програми

Типовий приклад: натискання на картку проблеми на IT Lead відкриває модальне вікно з попереднім переглядом, тоді як прямий доступ за URL показує повну сторінку.

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

Файл	Призначення
`page.tsx`	UI сторінки
`layout.tsx`	Спільний макет для сегмента
`loading.tsx`	UI завантаження (резервний варіант Suspense)
`error.tsx`	Обробка помилок
`not-found.tsx`	Сторінка 404
`template.tsx`	Як макет, але відтворюється при навігації
`route.ts`	API-інтерфейс (Обробник маршруту)

Важливо:

Файл page.tsx є обов'язковим для того, щоб сегмент був доступний як сторінка. Папка без page.tsx використовується лише для організації (колокації) і не створює маршрут.

Корисні ресурси

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Дочитали статтю?

Практика завдань