1️⃣ Группировка сегментов: (group)
app/
- (dashboard)/
-- analytics/
--- page.tsx → /analytics
-- settings/
--- page.tsx → /settings
✅ URL-адреса: /analytics, /settings
❌ НЕ будет /dashboard/analytics
2️⃣ Динамические маршруты: [param], […param], [[…param]]
Обычный параметр [id]/page.tsx → /product/123
Массив параметров […filters]/page.tsx → /search/red/shoes/42
Необязательный путь [[…slug]]/page.tsx → /, /a, /a/b
app/
- products/
-- [...filters]/
--- page.tsx
✅ /products/red/shoes → ["red", "shoes"]
3️⃣ @segment — маркер “параллельного маршрута”
Используется в layout’ах, чтобы указывать вложенные или параллельные области (outlets), аналогично React Router.
app/
-- layout.tsx
-- @admin/
--- dashboard/
---- page.tsx → рендерится в "admin" слот
-- @user/
--- dashboard/
---- page.tsx → рендерится в "user" слот
layout.tsx
export default function RootLayout({ children, admin, user }) {
return (
<div>
<div>{admin}</div>
<div>{user}</div>
<main>{children}</main>
</div>
);
}🔧 Полезно, когда нужно показывать разные интерфейсы в параллельных слотах — админку и клиентский интерфейс, например
4️⃣ Специальный маршрут (Intercepting routes ): (.)route, (..)route, (..)(..)route, (…)route
(.) означает: использовать тот же путь, что и родитель, но как вложенный layout или страница.
app/
- dashboard/
-- page.tsx → /dashboard
-- (.)settings/
--- page.tsx → /dashboard/settings (но без влияния на layout)
(.) позволяет создать маршрут, не влияя на родительский layout.
(.) to match segments on the same level
(..) to match segments one level above
(..)(..) to match segments two levels above
(…) to match segments from the root app directory
📚 Заключение
- (group) Группировка файлов, не влияет на URL
- [slug] Динамический сегмент
- […slug] Массив сегментов (catch-all)
- [[…slug]] Необязательный путь
- @segment Параллельный маршрут для layout
- (.)segment Подстраница без влияния на родительский layout (Intercepting routes)
Anastasiia Berest
Senior Web UI Engineer