1. Введение
Если вы когда-нибудь писали на React и вручную прописывали маршруты в react-router, то знаете, как это бывает утомительно: каждый новый экран — это ещё одна строчка в конфиге, ещё один импорт, и не дай бог ошибиться в пути! В Next.js всё проще: структура вашего проекта = структура маршрутов.
File-based routing — это подход, при котором маршруты вашего приложения определяются не конфигом, а структурой файловой системы. То есть, чтобы создать новую страницу /about, достаточно создать папку about и внутри неё файл page.tsx. Всё, маршрут готов!
Пример
app/
├── page.tsx // /
├── about/
│ └── page.tsx // /about
└── blog/
└── page.tsx // /blog
- app/page.tsx — это главная страница /
- app/about/page.tsx — страница /about
- app/blog/page.tsx — страница /blog
Next.js сам разберётся, что к чему, и создаст маршруты на лету. Это и есть магия file-based routing!
Как работает автоматическая маршрутизация?
Всё очень просто: Next.js сканирует папку app/ и строит дерево маршрутов на основе папок и файлов. Каждый файл page.tsx становится точкой входа для маршрута.
Важно:
- Только файлы с именем page.tsx (или .js, .jsx, .tsx) считаются страницами.
- Папки определяют путь в URL.
- Всё, что находится внутри папки, становится вложенным маршрутом.
Схематично
app/
├── dashboard/
│ ├── page.tsx // /dashboard
│ └── analytics/
│ └── page.tsx // /dashboard/analytics
└── settings/
└── page.tsx // /settings
Пояснение:
- Путь /dashboard — это app/dashboard/page.tsx
- Путь /dashboard/analytics — это app/dashboard/analytics/page.tsx
- Путь /settings — это app/settings/page.tsx
2. Простые примеры: создаём страницы
Давайте сразу к практике! Пусть у нас простое приложение с главной, страницей "О нас" и блогом.
Шаг 1: Структура папок
app/
├── page.tsx // Главная страница
├── about/
│ └── page.tsx // О нас
└── blog/
└── page.tsx // Блог
Шаг 2: Примеры кода
export default function HomePage() {
return <h1>Главная страница</h1>;
}
export default function AboutPage() {
return <h1>О нас</h1>;
}
export default function BlogPage() {
return <h1>Блог</h1>;
}
Шаг 3: Проверяем
- Перейдите на / — увидите "Главная страница".
- Перейдите на /about — увидите "О нас".
- Перейдите на /blog — увидите "Блог".
Никаких ручных настроек маршрутов, никаких импортов — просто структура папок!
3. Вложенные маршруты: сколько угодно уровней
File-based routing поддерживает любую вложенность. Хотите /blog/2025/may/nextjs-routing? Не вопрос!
Структура:
app/
└── blog/
└── 2025/
└── may/
└── nextjs-routing/
└── page.tsx
Этот файл будет доступен по адресу /blog/2025/may/nextjs-routing
Пример кода:
export default function NextJsRoutingPage() {
return <h1>Статья о маршрутизации в Next.js</h1>;
}
Важно!
Вложенность папок = вложенность URL. Прямо как в файловой системе: глубже — значит, глубже в адресе.
4. Автоматическая маршрутизация и layout-ы
В App Router каждый маршрут может иметь свой layout. Если вы кладёте layout.tsx в папку, он будет общим для всех вложенных страниц.
Пример:
app/
├── layout.tsx
├── page.tsx
└── blog/
├── layout.tsx
└── page.tsx
Пояснение:
- app/layout.tsx — общий layout для всего приложения.
- app/blog/layout.tsx — layout только для раздела /blog и его подпапок.
Код app/layout.tsx:
export default function RootLayout({ children }) {
return (
<html>
<body>
<nav>Навигация</nav>
{children}
</body>
</html>
);
}
Код app/blog/layout.tsx:
export default function BlogLayout({ children }) {
return (
<section>
<aside>Меню блога</aside>
<main>{children}</main>
</section>
);
}
Страница /blog будет обёрнута сначала в RootLayout, потом в BlogLayout.
5. Динамические маршруты: только структура — никакой магии
Хотите динамический путь, например /blog/123 для статьи с id=123? Просто используйте квадратные скобки!
Пример:
app/
└── blog/
└── [id]/
└── page.tsx
Теперь URL /blog/hello-world или /blog/42 попадёт в этот компонент.
Код:
export default function BlogPostPage({ params }) {
return <h1>Пост: {params.id}</h1>;
}
params.id — это значение из URL.
Подробнее про динамические маршруты будет в следующих лекциях, но знать об этом сейчас уже полезно.
6. Как это связано с вашим приложением?
Давайте продолжим развивать ваше учебное приложение (например, список задач). Пусть у нас есть главная страница со списком задач, страница "О проекте" и страница "Добавить задачу".
Структура:
app/
├── page.tsx // / — список задач
├── about/
│ └── page.tsx // /about — о проекте
└── add/
└── page.tsx // /add — добавить задачу
export default function TasksPage() {
return <h1>Список задач</h1>;
}
export default function AboutPage() {
return <h1>О проекте</h1>;
}
export default function AddTaskPage() {
return <h1>Добавить задачу</h1>;
}
Теперь у вас уже три маршрута, и их поддержка — дело пары секунд!
7. Полезные нюансы и best practices
- Папка = часть URL. Не называйте папки с большой буквы, если не хотите /About вместо /about.
- Файл page.tsx — только он становится страницей. Остальные файлы (layout.tsx, loading.tsx и т.д.) — служебные.
- Переименование папок — меняет URL. Следите за ссылками!
- Можно использовать TypeScript (.tsx) или JavaScript (.js, .jsx) — что больше нравится.
- Не кладите логику страницы в корень app/, кроме главной — для порядка всегда делайте отдельные папки для новых маршрутов.
8. Типичные ошибки при работе с file-based routing
Ошибка №1: Создали about.tsx вместо about/page.tsx.
Если положить файл about.tsx в app/, Next.js не поймёт, что это отдельная страница /about — он ждёт либо папку, либо page.tsx в корне для /.
Ошибка №2: Забыли про вложенность.
Если положить page.tsx не в ту папку — маршрут будет не тот, что вы ожидали. Например, app/blog/page.tsx — это /blog, а не /blog/page.
Ошибка №3: Случайно назвали папку с большой буквы.
Next.js чувствителен к регистру! /About и /about — это разные маршруты.
Ошибка №4: Положили компонент не в page.tsx.
Если создать, например, app/about/About.jsx, страница /about не появится. Только page.tsx (или .js, .tsx) считается страницей.
Ошибка №5: Путаете App Router и Page Router.
В App Router структура — это главное. В Page Router (pages/) — файл с именем маршрута. Не путайте подходы!
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ