Next.js App Router

Чтобы получить серверные компоненты, потоковую отдачу, маршрутизацию, кэш и server actions на голом React, пришлось бы собрать их вручную: настроить бандлер под RSC, написать сервер, прикрутить роутер, продумать кэширование. Это месяцы инфраструктурной работы до первой строки бизнес-логики. App Router в Next.js даёт всё это из коробки: создаёшь файл page.tsx в папке - и появляется маршрут, который по умолчанию серверный. Именно поэтому в 2026 году React почти никогда не запускают в одиночку.

• Next.js App Router (стабилен с 2023): дефолтный способ запускать React с Server Components в проде
• Vercel, Notion, OpenAI, Linear, Hashnode: публичные продукты и витрины построены на App Router
• React Docs: официальная документация рекомендует начинать новый проект с фреймворка, а не с голого React
• TanStack Start, React Router 7 (framework mode): конкуренты, которые тоже дают RSC, маршрутизацию и server actions
• Vercel templates: e-commerce, дашборды и SaaS-стартеры по умолчанию идут на App Router с server actions

Предварительные знания

• Server Components: рендеринг на сервере, граница сериализации, директива 'use client'
• Server Functions и server actions: вызов серверного кода из клиента, мутации
• Базовое понимание маршрутизации: URL-путь сопоставляется с экраном приложения

Как фреймворк стал дефолтным способом писать React

Долго стандартом старта React был create-react-app: чистая клиентская SPA без сервера. Но модель React сдвигалась к серверу, и CRA за ней не успевал - в 2023 его официально объявили устаревшим. Next.js, начинавшийся в 2016 как инструмент для SSR, в 2023 выпустил стабильный App Router: маршрутизация по файловой системе, Server Components по умолчанию, встроенный streaming и server actions. Команда React, которая раньше учила собирать всё вручную, в обновлённой документации стала рекомендовать начинать с фреймворка. Причина проста: RSC, кэш и потоковая отдача требуют интеграции бандлера и сервера, которую в одиночку повторить дорого и хрупко. Фреймворк берёт эту инфраструктуру на себя.

Файловая маршрутизация, layouts и вложенность

В App Router маршруты задаются структурой папок внутри каталога app. Папка - это сегмент URL, а специальный файл page.tsx в ней - экран этого маршрута. app/page.tsx отвечает за /, app/blog/page.tsx за /blog, app/blog/[slug]/page.tsx за /blog/любой-слаг. Квадратные скобки означают динамический сегмент, значение которого приходит в компонент как параметр. URL не описывается в отдельном конфиге роутера - его задаёт сама файловая система.

Файл layout.tsx оборачивает все вложенные маршруты общей разметкой: шапка, навигация, сайдбар. Ключевое его свойство - он сохраняется между переходами. При навигации с /blog на /blog/post родительский layout не перемонтируется, его состояние и DOM остаются, меняется только вложенный page. Layouts вкладываются: корневой охватывает всё приложение, вложенные добавляют свою обёртку для своих участков.

Кроме page и layout, у каждого сегмента есть специальные файлы: loading.tsx даёт мгновенный fallback на время загрузки (под капотом это Suspense), error.tsx ловит ошибки сегмента (это error boundary), not-found.tsx показывает страницу 404. Фреймворк связывает их с механизмами React автоматически.

Server по умолчанию и загрузка данных

Главное умолчание App Router: каждый компонент - серверный, пока явно не помечен 'use client'. Это переворачивает привычку: интерактивность теперь не бесплатна по умолчанию, а добавляется точечно там, где нужна. Серверный по умолчанию компонент может быть async и грузить данные прямо в теле - запрос к базе, fetch к внешнему API - без отдельного слоя эндпоинтов и без клиентского useEffect.

Мутации в App Router делаются через server actions - это Server Functions, привязанные к роутингу и кэшу. Action помечается 'use server', вызывается из формы или клиентского компонента, выполняется на сервере, меняет данные и инвалидирует затронутый маршрут через revalidatePath. Не нужно вручную поднимать API-роут под каждую операцию: фреймворк генерирует эндпоинт и связывает его с обновлением UI.

Та же дисциплина безопасности, что и для Server Functions, действует и здесь: server action - публичный эндпоинт, и внутри обязательно проверять сессию и валидировать вход. Файловая маршрутизация и интеграция фреймворка не заменяют авторизацию и проверку данных на сервере.

Почему в 2026 году берут фреймворк

Голый React - это библиотека рендеринга, а не приложение. Чтобы получить современный продакшен-стек - Server Components, потоковую отдачу, маршрутизацию, кэш, server actions - на чистом React нужно самому интегрировать бандлер с поддержкой RSC, написать серверную часть, прикрутить роутер и продумать кэширование и инвалидацию. Это инфраструктура, а не функциональность. Фреймворк собирает её один раз и за всех.

Это не значит, что фреймворк нужен всегда. Для виджета, встраиваемого в чужую страницу, для библиотеки компонентов или для крошечной полностью клиентской утилиты голый React или связка React+Vite уместнее: меньше абстракций и серверной части, которая там не нужна. Но для полноценного приложения с маршрутами, серверными данными и мутациями фреймворк экономит месяцы и снимает класс ошибок интеграции.

App Router - не единственный выбор. В 2026 году TanStack Start и React Router 7 в режиме фреймворка тоже дают Server Components, файловую или конфигурируемую маршрутизацию и server actions. Принцип один: современный React живёт внутри фреймворка, а конкретный фреймворк выбирают под задачу, экосистему и хостинг.

Связь с другими темами

App Router - крыша над всей серверной частью курса. Что под ней:

• Server Components — Модель, которую App Router включает по умолчанию для каждого файла-маршрута
• Server Functions — Server actions в App Router - это Server Functions, связанные с роутингом и кэшем
• Streaming и cacheSignal — App Router реализует потоковую отдачу, loading-состояния и Partial Pre-rendering

Итог

• App Router использует файловую маршрутизацию: папка с файлом page.tsx становится маршрутом, а структура папок задаёт вложенность URL
• Каждый компонент по умолчанию серверный (Server Component); клиентским он становится только при наличии директивы 'use client'
• Файл layout.tsx оборачивает вложенные маршруты общей разметкой и сохраняется между переходами, не перемонтируясь
• Данные грузятся прямо в серверных компонентах через async/await, а мутации делаются через server actions без ручного написания API-роутов
• В 2026 году фреймворк берут вместо голого React, потому что RSC, streaming, кэш и server actions требуют интеграции бандлера и сервера

Связанные уроки

• rc-30-rsc-intro — App Router - это среда, где Server Components работают по умолчанию; фреймворк строится поверх модели RSC
• rc-31-server-functions — Server actions в App Router - это Server Functions, связанные с роутингом и инвалидацией кэша
• rc-34-cachesignal-streaming — App Router реализует streaming, loading-состояния и Partial Pre-rendering поверх примитивов React