Роутинг в App Router
Папки = маршруты, специальные файлы, динамические сегменты.
Обновлено
Что такое Next.js
Next.js — фреймворк поверх React. React даёт компоненты; Next добавляет всё, что нужно настоящему приложению:
| Что добавляет Next | Без Next пришлось бы... |
|---|---|
| роутинг на основе папок | настраивать роутер вручную |
| рендер на сервере (SSR, статика, PPR) | отдавать пустую страницу + JS на клиенте |
| Server Components и Server Actions | писать отдельный бэкенд |
| кэш, оптимизация изображений и шрифтов | настраивать всё самому |
| оптимизированные сборка и деплой (Vercel) | настраивать сборщик, сервер, CDN |
В Next две системы роутинга: App Router (app/, современная — её мы используем) и Pages Router (pages/, старая).
Что такое роутинг на файлах
Роутинг = какой код отвечает на какой URL. В App Router структура папок в app/ и есть структура URL. Маршрут становится доступным, когда в папке есть page.tsx.
app/layout.tsxобщий layout для всего сайта (обязателен)page.tsx/blog/page.tsx/blog[slug]/page.tsx/blog/:slug, напр. /blog/privet
(marketing)/about/page.tsx/about — группа (marketing) не появляется в URL
_components/игнорируется роутингом (приватная папка)
Специальные файлы
| Файл | Роль |
|---|---|
page.tsx |
интерфейс маршрута — делает его публичным |
layout.tsx |
оборачивает дочерние страницы; сохраняется при навигации |
loading.tsx |
fallback для Suspense, пока страница загружается |
error.tsx |
ловит ошибки в сегменте (Client Component) |
not-found.tsx |
показывается при notFound() или 404 |
route.ts |
API-эндпоинт (GET, POST...) — см. Route Handlers |
Подробнее о layout и состояниях — в Layout и навигация.
Виды сегментов
| Сегмент | Папка | Совпадает с | params |
|---|---|---|---|
| статический | blog |
/blog |
— |
| динамический | [slug] |
/blog/privet |
{ slug: 'privet' } |
| catch-all | [...slug] |
/docs/a/b/c |
{ slug: ['a', 'b', 'c'] } |
| необязательный catch-all | [[...slug]] |
/docs и /docs/a/b |
{ slug: undefined } или массив |
| группа | (имя) |
не появляется в URL | — |
| приватный | _имя |
исключён из роутинга | — |
params — это Promise
В Next 16 params и searchParams — Promise, их ждут через await:
export default async function Page({ params }: PageProps<'/blog/[slug]'>) {
const { slug } = await params
return <h1>{slug}</h1>
}PageProps<'/blog/[slug]'> Next генерирует автоматически по структуре папок — типы всегда верны.
generateStaticParams
Для динамических маршрутов вы сообщаете при сборке, какие значения существуют, чтобы Next заранее сгенерировал их как статические страницы:
export async function generateStaticParams() {
const posts = await getPosts()
return posts.map(post => ({ slug: post.slug }))
}Это приложение делает ровно это для каждого урока (app/[locale]/[topic]/[lesson]/page.tsx).
Коротко
- Next = React + роутинг + серверный рендер + бэкенд + оптимизации.
- Папки в
app/— это URL;page.tsxделает маршрут публичным. [slug]— динамический,(группа)не видна в URL;paramsждут черезawait.