У чому ключова ідея роутингу в Next.js?

Next.jsMiddle~1 хв читання

Ключова ідея роутингу в Next.js - URL застосунку визначається структурою файлів і папок, а не конфігурацією в коді.

Простіше:

Файли = маршрути

У чому суть файлового роутингу

Ти не описуєш маршрути вручну, як у React Router, а просто створюєш файли:

txt

app/
 ├─ page.tsx        → /
 ├─ blog/
 │   └─ page.tsx   → /blog
 └─ blog/[slug]/
     └─ page.tsx   → /blog/anything

Next.js сам:

створює маршрути
підключає їх до сервера
оптимізує завантаження

Чому це важливо

1. Мінімум конфігурації

немає router-config
немає switch / routes
менше boilerplate

2. Структура проекту = структура сайту

проект читається як sitemap
легко орієнтуватися
зручно масштабувати

3. Вкладеність і layout'и

Кожна папка може мати:

layout.tsx - спільний каркас
page.tsx - контент
loading.tsx - стан завантаження
error.tsx - обробку помилок

Це робить роутинг декларативним.

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

txt

products/[id]/page.tsx → /products/123

[id] - параметр URL
доступний на сервері та клієнті

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

txt

(auth)/
  login/page.tsx   → /login

папка не впливає на URL
потрібна для логічної структури

Паралельні та перехоплюючі роути

кілька UI-областей на одному URL
модалки, сайдбари, вкладені панелі
складні інтерфейси без милиць

Відмінність від React Router

React Router	Next.js
Роути в коді	Роути у файловій системі
Клієнтський	Сервер + клієнт
Ручна оптимізація	Авто code splitting

Коротка відповідь для співбесіди

Ключова ідея роутингу в Next.js - файлова система визначає маршрути: структура папок напряму відповідає URL, що прибирає конфігурацію і спрощує архітектуру застосунку.

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

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

Premium

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