nextjs

Next.js — React-фреймворк с открытым исходным кодом, разработанный компанией Vercel. Он расширяет возможности React, добавляя серверный рендеринг, статическую генерацию сайтов, файловую маршрутизацию, оптимизацию изображений и API-роуты — всё в одном пакете. Next.js стал стандартом де-факто для создания производственных React-приложений, особенно когда важны производительность и SEO.

Почему Next.js, а не «чистый» React

React сам по себе решает только задачу рендеринга UI. Разработчику остаётся самостоятельно настраивать маршрутизатор, сборщик (Webpack/Vite), серверный рендеринг, оптимизацию изображений и код-сплиттинг. Next.js предоставляет готовые решения для всего перечисленного, следуя принципу «convention over configuration». Это позволяет сосредоточиться на функциональности приложения, а не на настройке инфраструктуры.

Два роутера: Pages Router и App Router

Исторически Next.js использовал Pages Router: каждый файл в директории pages/ становится маршрутом. Next.js 13 представил App Router — новую систему маршрутизации на основе директории app/, построенную на React Server Components. App Router является рекомендованным подходом для новых проектов начиная с версии 14.

В App Router каждая папка — это сегмент маршрута, а специальные файлы (page.tsx, layout.tsx, loading.tsx, error.tsx) определяют UI для соответствующих состояний. Вложенные layout-компоненты не перерендериваются при навигации между дочерними маршрутами, что ускоряет переходы.

Стратегии рендеринга в Next.js

Ключевое преимущество Next.js — возможность смешивать разные стратегии рендеринга на уровне отдельных страниц или даже компонентов:

• Static Site Generation (SSG) — HTML генерируется один раз при сборке и раздаётся с CDN. Оптимально для контента, который меняется редко (блоги, документация, маркетинговые страницы).
• Server-Side Rendering (SSR) — HTML генерируется на сервере при каждом запросе. Нужен, когда контент персонализирован или меняется часто.
• Incremental Static Regeneration (ISR) — страница генерируется статически, но может перегенерироваться в фоне через заданный интервал. Компромисс между SSG и SSR.
• Client-Side Rendering (CSR) — классический React без серверной логики. Применяется для приватных разделов, требующих авторизации.

React Server Components в App Router

По умолчанию все компоненты в App Router являются серверными (Server Components). Они выполняются на сервере, могут напрямую обращаться к базе данных или файловой системе, и не включаются в JavaScript-бандл клиента. Для добавления интерактивности нужно явно пометить компонент директивой "use client" — тогда он станет Client Component и получит доступ к хукам и событиям браузера. Такой подход значительно уменьшает объём JavaScript, отправляемого клиенту.

Встроенная оптимизация производительности

Next.js включает набор автоматических оптимизаций:

• next/image — компонент изображений с автоматической оптимизацией (сжатие, конвертация в WebP/AVIF, lazy loading, предотвращение CLS).
• next/font — автоматическая оптимизация шрифтов: загрузка, самохостинг, устранение Layout Shift при загрузке шрифта.
• next/link — предзагрузка страниц при наведении курсора на ссылку.
• Code splitting — автоматическое разбиение бандла по маршрутам; клиент загружает только код текущей страницы.
• Turbopack — новый компилятор на Rust (заменяет Webpack), ускоряющий hot reload в десятки раз.

API Routes и серверные действия

Next.js позволяет создавать серверные API-эндпоинты прямо внутри проекта. В Pages Router это файлы в pages/api/, в App Router — файлы route.ts рядом с компонентами. Серверные действия (Server Actions) — функции, помеченные директивой "use server", которые вызываются с клиента без явного HTTP-запроса. Они упрощают отправку форм и мутации данных, заменяя необходимость создавать отдельный API-эндпоинт.

Развёртывание Next.js

Next.js нативно поддерживается платформой Vercel — достаточно связать репозиторий, и каждый push автоматически деплоится с Preview URL. Для самостоятельного хостинга используется next start (Node.js-сервер) или Docker-контейнер. Существуют адаптеры для AWS Lambda, Cloudflare Workers и других serverless-платформ. Для полностью статических сайтов доступен экспорт в next export.

Экосистема и популярность

Next.js используется в Hulu, TikTok, Twitch, Notion, GitHub Docs, Nike и тысячах других продуктов. По данным State of JS, это самый популярный React-метафреймворк. Активно развивается: в 2024 году вышли версии 14 и 15 с улучшенным кэшированием, Partial Prerendering и нативной поддержкой React 19.