Групи маршрутів у Next.js
Що таке групи маршрутів?
Групи маршрутів дозволяють організовувати маршрути без впливу на структуру URL. Оберніть назву папки в дужки (folderName), щоб створити групу маршрутів — вона не з'явиться в URL-адресі.
Основний синтаксис
app/
(marketing)/
about/page.tsx → /about
pricing/page.tsx → /pricing
layout.tsx → спільний макет для маркетингових сторінок
(dashboard)/
settings/page.tsx → /settings
analytics/page.tsx → /analytics
layout.tsx → спільний макет для сторінок панелі управління
layout.tsx → кореневий макетПапки (marketing) та (dashboard) є невидимими в URL.
Варіанти використання
1. Різні макети для різних секцій
tsx
// app/(marketing)/layout.tsx — макет публічних сторінок
export default function MarketingLayout({ children }: { children: React.ReactNode }) {
return (
<div>
<PublicNavbar />
<main>{children}</main>
<Footer />
</div>
);
}
// app/(dashboard)/layout.tsx — макет аутентифікованих сторінок
export default function DashboardLayout({ children }: { children: React.ReactNode }) {
return (
<div>
<Sidebar />
<main>{children}</main>
</div>
);
}2. Організація за функцією
app/
(auth)/
login/page.tsx → /login
register/page.tsx → /register
forgot/page.tsx → /forgot
(shop)/
products/page.tsx → /products
cart/page.tsx → /cart
checkout/page.tsx → /checkout3. Кілька кореневих макетів
app/
(main)/
layout.tsx → Кореневий макет для основного сайту
page.tsx → /
about/page.tsx → /about
(admin)/
layout.tsx → Абсолютно інший кореневий макет для адміністратора
dashboard/page.tsx → /dashboardКожна група маршрутів може мати свій власний кореневий макет, що дозволяє створювати абсолютно різні HTML-структури.
Правила
- Папки груп маршрутів використовують дужки:
(name) - Ім'я не є частиною URL
- Ви можете вкладати групи маршрутів
- Кожна група може мати свій
layout.tsx,loading.tsx,error.tsx - Будьте обережні: дві групи маршрутів не повинні генерувати однаковий URL-адресу
// ❌ Конфлікт — обидва ведуть до /about
app/(marketing)/about/page.tsx
app/(info)/about/page.tsxВажливо:
Групи маршрутів організовують структуру вашого проєкту без впливу на URL. Вони є важливими для застосування різних макетів до різних секцій (публічні проти панелі управління), організації за функцією та створення кількох кореневих макетів в одному додатку Next.js.
Коротка відповідь
Для співбесідиPremium
Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.