В App Router структура папок внутри app/ определяет ваши маршруты — не нужно писать конфигурацию маршрутизатора. Каждая папка — это сегмент URL, а специальные файлы в ней определяют, что отображает этот сегмент.
app/
page.tsx → /
about/page.tsx → /about
blog/page.tsx → /blog
blog/[slug]/page.tsx → /blog/:slug (dynamic segment)
shop/(sale)/page.tsx → /shop (route group — parentheses don't add to URL)
Каждая папка может содержать зарезервированные имена файлов, каждый с определённой ролью:
page.tsx → the route's UI (REQUIRED to make a segment routable)
layout.tsx → shared wrapper that persists across child routes
loading.tsx → loading UI (auto-wraps the page in <Suspense>)
error.tsx → error boundary for the segment
not-found.tsx→ 404 UI
route.ts → an API endpoint (instead of a page)
// app/blog/[slug]/page.tsx → matches /blog/hello, /blog/anything
export default function Post({ params }: { params: { slug: string } }) {
return <h1>Post: {params.slug}</h1>; // params.slug = "hello"
}
Квадратные скобки создают динамический параметр, передаваемый на страницу через params. Варианты: [...slug] (перехватить всё), [[...slug]] (необязательный перехват всего).
app/(marketing)/about/page.tsx → /about (the (marketing) folder is ignored in the URL)
Круглые скобки создают группы маршрутов для организации файлов или применения различных макетов без влияния на URL.
Маршрутизация на основе файлов делает структуру URL очевидной из дерева файлов — нет центральной конфигурации маршрутизации для поддержки и синхронизации.
Знание специальных имён файлов (page, layout, loading, error, route) и соглашений со скобками ([param], [...catchAll], (group)) — это основной словарь для создания любого приложения на App Router.