Next.js App Router
Тема дорожной карты · React
Next.js App Router — это современная файловая система маршрутизации, представленная в Next.js 13 и стабилизированная в Next.js 14, построенная поверх React Server Components, Suspense и стриминга. В App Router маршруты определяются папками внутри директории app/, а специальные файлы — page.tsx, layout.tsx, loading.tsx и error.tsx — обеспечивают декларативный контроль над рендерингом, вложенными макетами, а также состояниями загрузки и ошибок на каждом сегменте маршрута. Next.js App Router позволяет компонентам быть Server Components по умолчанию, получая данные непосредственно на сервере без клиентских вызовов useEffect, что значительно улучшает производительность и SEO React-приложений. Клиентская интерактивность добавляется точечно путём размещения директивы "use client" в начале файлов компонентов в соответствии с моделью React Server Components — переносить состояние и обработчики событий на края дерева компонентов. App Router представляет будущее архитектуры Next.js и React-фронтенда, и его понимание необходимо для современной полностековой React-разработки.
Как это работает
Next.js App Router рендерит React на сервере, отдаёт HTML в браузер, гидратирует JavaScript для интерактивности. Next.js — доминирующий фреймворк; App Router (с 13) вводит React Server Components (RSC), исполняющиеся только на сервере, не отправляющие JS и стримящие HTML. SSG (Static Site Generation) пререндерит страницы на билд-тайме; ISR (Incremental Static Regeneration) ревалидирует через TTL или по запросу. Выбор зависит от свежести данных.
Когда применять
SSR — когда важен SEO (блог, маркетинг, продуктовые страницы) и данные per-request или per-user. SSG — для контента, редко меняющегося (доки, маркетинг). ISR — для блогов/новостей, где страницы строятся раз, потом периодически ревалидируются. Пропустите SSR для чисто-интерактивных приложений (Figma, дашборды), где time-to-interactive важнее first-paint HTML — SPA подходит.
Типичные ошибки
Ловушки Next.js App Router: browser-only API (window, localStorage) в компонентах, рендерящихся на сервере (крах — оборачивайте typeof window !== "undefined" или переносите в useEffect); hydration-mismatch (HTML сервера ≠ render клиента — невидимые баги); огромные getServerSideProps-payload, убивающие выгоду SSR; нет cache-заголовков на динамических маршрутах (бьёт origin). Прочтите Next.js docs про кеширование — defaults поменялись в 13/14.