Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «У чому ключова ідея роутингу в Next.js?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)Ключова ідея роутингу в **Next.js** - **URL застосунку визначається структурою файлів і папок**, а не конфігурацією в коді. **Ключове:** структура папок напряму відповідає URL, що прибирає конфігурацію і спрощує архітектуру застосунку.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)ЗображенняКлючова ідея роутингу в **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, що прибирає конфігурацію і спрощує архітектуру застосунку.**Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.