Next.js Pages Router
Тема дорожной карты · React
Next.js Pages Router — это оригинальная файловая архитектура маршрутизации Next.js, в которой каждый файл .tsx или .js внутри директории pages/ автоматически становится публично доступным маршрутом. Pages Router предоставляет getStaticProps, getStaticPaths и getServerSideProps как соглашения загрузки данных, выполняемые на сервере до рендеринга React-компонента, обеспечивая паттерны SSG, ISR и SSR без ручной настройки сервера. Директория pages/api/ в Pages Router также служит лёгким уровнем Node.js API, позволяя React-разработчикам создавать полностековые приложения в рамках одного Next.js-проекта. Хотя более новый App Router заменил Pages Router для новых проектов, Pages Router по-прежнему широко используется в экосистеме React и полностью поддерживается в Next.js для обеспечения стабильности и постепенной миграции. Понимание Next.js Pages Router важно для React-разработчиков, работающих с существующими кодовыми базами, и для понимания архитектурной эволюции, приведшей к App Router.
Как это работает
Next.js Pages 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 Pages 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.