Wiki · Технологии разработки

Next.js

5 мин чтенияАвтор: Дмитрий КолесниковСоавторы: Евгений Баев

Next.js – это фреймворк на основе React от компании Vercel, который собирает страницы на сервере или заранее при сборке и отдаёт браузеру и поисковику готовый HTML. На нём делают сайты и веб-приложения, где важны индексация и скорость загрузки.

Типичная история: сайт сделали одностраничным приложением на React, он бойко работает, а в поиске его почти не видно. Разработчик предлагает переехать на Next.js. Разберёмся, что изменится и когда переезд действительно нужен.

Откуда взялся Next.js

Next.js открыла компания ZEIT (сейчас Vercel) 25 октября 2016 года как небольшой фреймворк для серверного рендеринга на React. Код открыт под лицензией MIT. Официальная документация React называет Next.js первым в списке рекомендованных фреймворков для новых проектов.

На октябрь 2026 года основная ветка Next.js 16 (вышла 21 октября 2025 года, актуальная версия 16.3), а ветка 15 получает только критичные исправления и патчи безопасности.

Что Next.js добавляет к React

React рисует интерфейс, а Next.js достраивает вокруг него сайт:

адреса страниц по структуре папок: файл app/uslugi/page.tsx становится страницей /uslugi/;
сборку страниц на сервере и заранее, с кэшем и обновлением в фоне;
title, description и другие мета-теги для каждой страницы;
оптимизацию картинок и разбивку скриптов, чтобы странице грузилось только нужное;
серверный код рядом с интерфейсом: обработку форм, обращения к базе и API.

Четыре способа собрать страницу

За это Next.js и выбирают: для каждого раздела можно задать свой способ сборки. Чем серверный рендеринг отличается от клиентского для поисковика, разобрано в статье JavaScript SEO: CSR и SSR. Здесь только практика:

Режим	Когда собирается страница	Для чего подходит
SSG, статическая генерация	Один раз при сборке проекта	Услуги, статьи, лендинги
ISR, инкрементальная регенерация	При сборке, потом в фоне по таймеру или по сигналу	Каталог, блог, новости
SSR, рендер на сервере	На каждый запрос	Персональные цены, наличие в реальном времени
CSR, рендер в браузере	У посетителя	Личный кабинет, фильтры, интерактивные блоки

Для бизнеса самый интересный режим ISR. Страница каталога лежит готовой и отдаётся сразу. Когда истекает срок жизни кэша, например час, ближайший посетитель ещё получает старую версию, а Next.js в фоне собирает новую. Если товар поменяли в учётной системе, страницу можно обновить сразу, по сигналу.

Схема ISR в Next.js: страница отдаётся из кэша и пересобирается в фоне по истечении срока или по сигналу об изменении цены — Как ISR обновляет готовую страницу

Когда сайту на React нужен Next.js

Страницы должны попадать в поиск: каталог, услуги, статьи, страницы городов.
Важны скорость первой загрузки и Core Web Vitals, особенно на мобильном интернете.
Контента много, и он приходит из учётной системы или Headless CMS.
Закрытый кабинет или админка за логином. Поисковику там делать нечего, хватит React со сборщиком вроде Vite.

Матрица выбора режима Next.js: SSG для услуг и статей, ISR или SSR для каталога, статический экспорт и CSR для кабинета — Какой режим Next.js выбрать для раздела

Где работает сайт на Next.js

Документация Next.js описывает четыре варианта. Сервер Node.js и Docker-контейнер поддерживают все возможности. Статический экспорт превращает сайт в набор HTML-файлов, которые отдаст любой веб-сервер, но без серверных функций и без ISR. Ещё есть адаптеры под отдельные платформы, проверенными командой Next.js сейчас значатся Vercel и Bun.

Привязки к Vercel нет: сайт можно разместить на своём сервере или VPS у российского провайдера. Классический хостинг под PHP годится только для статического экспорта, для серверных режимов нужен Node.js.

Почему сайт на Next.js тормозит или остаётся без патчей

Все страницы собираются через SSR без кэша. Сервер пересобирает каталог на каждый заход, и под нагрузкой сайт тормозит.
Статический экспорт выбрали ради дешёвого хостинга, а потом выяснилось, что ISR и серверные формы в нём не работают.
Почти все компоненты помечены как клиентские. В браузер снова уезжает тяжёлый JavaScript, и выигрыш в скорости пропадает.
Проект сидит на устаревшей ветке. Когда у неё заканчивается поддержка, патчи безопасности перестают выходить.

Обновления и кэш: что заложить в поддержку

Обновления безопасности выходят часто. В июле, августе и сентябре 2026 года команда Next.js выпускала отдельные релизы с исправлениями уязвимостей, а в декабре 2025 года проекты на Next.js задела критическая уязвимость в серверных компонентах React. Поддержка без обновлений здесь не работает.
Сервер нужно правильно настроить. Если серверов несколько, кэш ISR по умолчанию у каждого свой, и сброс по сигналу обновит страницу только на одном. Нужен общий обработчик кэша.
Мажорные версии выходят регулярно: 15-я в октябре 2024 года, 16-я в октябре 2025-го. Переход между ними требует работы разработчика.

Как проверить, что сайт на Next.js

В исходном коде страницы (Ctrl+U) пути к скриптам и стилям начинаются с /_next/static/.
В заголовках ответа сервера (панель разработчика, вкладка Network) часто есть x-powered-by: Next.js. Его можно отключить, так что отсутствие заголовка ничего не доказывает.
Заголовок x-nextjs-cache со значением HIT, STALE или MISS говорит, что страница отдаётся через кэш ISR.
Расширение Wappalyzer тоже определяет Next.js.

Фронтенд или бэкенд, хостинг и стоимость Next.js

Next.js – это фронтенд или бэкенд?

И то и другое. Интерфейс в Next.js пишут на React, а в том же проекте живёт серверная часть: приём заявок с форм, запросы к базе данных, собственные API. Поэтому для серверных режимов ему нужен Node.js, а не только раздача готовых файлов.

Чем Next.js отличается от обычного React?

React отвечает только за интерфейс. Next.js добавляет то, без чего сайта не бывает: адреса страниц, мета-теги, готовый HTML с сервера или со сборки, сжатие картинок. Это надстройка, а не замена, ведь любой сайт на Next.js написан на React.

Где разместить сайт на Next.js, если не хочется зависеть от Vercel?

На своём сервере или VPS с Node.js, в том числе у российского провайдера, либо в Docker-контейнере: документация обещает для этих вариантов полный набор возможностей. Обычный PHP-хостинг подойдёт только под статический экспорт.

Что теряет сайт на Next.js при статическом экспорте?

Получается папка готовых HTML-файлов, её можно положить на любой веб-сервер. Взамен пропадают серверные функции и ISR: обработку форм придётся выносить отдельно, а каталог обновится только после новой сборки.

Как ISR обновляет страницу каталога после смены цены?

Готовая страница лежит в кэше и отдаётся сразу. Когда срок кэша истёк, ближайший посетитель ещё видит прежнюю цену, а Next.js тем временем собирает свежую версию в фоне. По сигналу из учётной системы страницу можно пересобрать сразу, но если серверов несколько, без общего обработчика кэша обновится только один из них.

Как часто выходят обновления безопасности Next.js?

Часто: летом и в начале осени 2026 года отдельные релизы с исправлениями выходили каждый месяц. Крупные версии появляются примерно раз в год, в октябре, и после этого прошлая ветка получает только критичные патчи.

Во что обходится Next.js, если сам фреймворк бесплатный?

Лицензия MIT ничего не стоит. Деньги уходят на сервер с Node.js или облачную платформу и на поддержку, где главная статья – регулярные обновления.

Сайты на Next.js делаем в составе услуги разработка сайтов. Если проект уже работает на Next.js, берём его на доработку и техническую поддержку.

Документация и справки