Next.js для бизнеса: почему мы выбираем этот стек и когда он не нужен

Когда студия говорит «мы делаем на Next.js», для владельца бизнеса это звучит как деталь, которую не проверить: ну, на Next.js так на Next.js. Но выбор технологии определяет вещи, которые потом напрямую касаются денег: насколько быстро сайт открывается на телефоне клиента, сколько стоит каждая доработка, можно ли перейти к другому подрядчику, придётся ли платить абонентскую плату платформе и что будет с сайтом через три года. Ниже — объяснение без жаргона: что такое Next.js, что он даёт бизнесу, где у него слабые места, когда мы сами не стали бы его предлагать и какие вопросы задать любому подрядчику про стек, даже если вы в итоге выберете что-то другое.

Что такое Next.js простыми словами

Next.js — это открытый фреймворк для создания сайтов и веб-приложений. Он построен на React — самой распространённой библиотеке для интерфейсов, которую развивает Meta. Сам Next.js развивает компания Vercel, исходный код открыт и распространяется под свободной лицензией MIT: им можно пользоваться бесплатно и размещать сайт на любом сервере, в том числе в России. Если упростить до одной фразы: React отвечает за то, как устроены и ведут себя элементы страницы, а Next.js — за то, как эти страницы собираются, отдаются посетителю и поисковику, как работают адреса, изображения, кэширование и серверная логика.

Скорость: почему страница открывается сразу

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

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

Всё это напрямую связано с Core Web Vitals — показателями, по которым Google оценивает удобство страниц. Как скорость отражается на позициях и заявках, мы разбирали в статье Core Web Vitals для бизнеса. Важная оговорка: фреймворк даёт возможность быть быстрым, но не гарантирует этого. Сайт на Next.js, обвешанный десятком сторонних виджетов и тяжёлыми видео на первом экране, будет медленным так же, как любой другой.

SEO: что видит поисковик

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

• Заголовки title и description для каждой страницы, в том числе сгенерированные из данных — например, из названия и цены товара.
• Канонические адреса, чтобы не плодить дубли из-за параметров и сортировок.
• Карта сайта и robots.txt, которые формируются кодом и не расходятся с реальной структурой.
• Микроразметка и Open Graph для красивых превью в мессенджерах и соцсетях.
• Аккуратные адреса страниц без лишних параметров и расширений.

При этом сам фреймворк не продвигает сайт. Он убирает технические препятствия, а позиции по-прежнему зависят от структуры, текстов, ответов на запросы и репутации. Технический фундамент — это условие, а не результат: о том, что ещё нужно для роста в поиске, — в нашем разделе про SEO-продвижение.

Один стек для сайта, кабинета и учёта

Для бизнеса, который растёт, важно, что Next.js — это не только «витрина». На нём же можно сделать личный кабинет клиента, внутреннюю панель для сотрудников, API для мобильного приложения и интеграции с CRM, оплатой и учётными системами. Серверная логика живёт рядом с интерфейсом: компоненты, которые выполняются на сервере, и серверные действия позволяют работать с базой данных и секретными ключами, не отдавая их в браузер.

Практический смысл в том, что сайт и кабинет можно развивать одной командой и одним языком — TypeScript. Не нужно держать отдельно «сайтовика» на одной CMS и разработчика кабинета на другом стеке, который пытается подружить их через костыли. Когда через год понадобится запись онлайн или кабинет клиента, это будет развитие того же проекта, а не новый проект рядом со старым.

Next.js и конструкторы: честное сравнение

• Старт. Конструктор быстрее и дешевле запускается для простого сайта. Сайт на Next.js требует разработки, но и даёт больше возможностей.
• Абонентская плата. В конструкторе вы платите платформе ежемесячно, и сайт существует, пока вы платите. Сайт на Next.js — ваш код на вашем сервере, платите только за хостинг.
• Перенос. Из конструктора сайт обычно нельзя забрать целиком: вы получите в лучшем случае тексты и картинки. Код на Next.js можно передать любому разработчику, знающему React.
• Скорость. Конструктор грузит один и тот же общий код на все сайты платформы; ускорить его сверх возможностей платформы нельзя. В Next.js на сайт попадает только нужное.
• Сложная логика. Калькуляторы, кабинеты, интеграции с учётом — в конструкторе это виджеты сторонних сервисов или невозможность. В Next.js — обычная разработка.
• Правки контента. В конструкторе редактор встроен. Для сайта на Next.js админку нужно сделать или подключить, и это стоит обсуждать сразу — мы делаем её частью проекта, чтобы тексты, цены и фото менялись без программиста.

Безопасность: что даёт архитектура и что остаётся на вас

У сайта на Next.js нет публичной админки на стандартном адресе, нет десятков сторонних плагинов, каждый из которых может оказаться дырой, и нет общей кодовой базы с тысячами других сайтов, которую злоумышленники сканируют массово. Это заметно снижает число случайных взломов, характерных для популярных CMS. Серверная логика выполняется на сервере, а ключи от платёжных систем и CRM не попадают в браузер посетителя.

Но архитектура — не гарантия. Формы нужно защищать от спама и перебора, входы в кабинет — от подбора паролей, данные клиентов — по требованиям 152-ФЗ, а зависимости — регулярно обновлять: уязвимости находят и в самом фреймворке, и в библиотеках вокруг него. Если сайт работает с персональными данными или оплатой, безопасность стоит обсуждать как отдельную часть проекта, а не как свойство стека — подробнее в разделе кибербезопасности.

Условный пример: как проект растёт без переделки

Это иллюстрация логики, а не описание конкретного клиента. Компания сферы услуг запускает сайт на Next.js: главная, страницы услуг, статьи, форма заявки, отправка заявок в CRM. Через полгода появляется онлайн-запись с выбором времени — она добавляется как новый раздел того же проекта и работает с той же базой. Ещё через полгода — личный кабинет, где клиент видит историю и документы, и API для мобильного приложения. Всё это одна кодовая база, одна команда, один сервер. В схеме «сайт на конструкторе плюс отдельные сервисы» каждый из этих шагов означал бы новую платформу, новую интеграцию и новую абонентскую плату — и данные клиента, разбросанные по трём системам.

Где у Next.js слабые места

Честный разговор о стеке невозможен без минусов. Вот что стоит знать до решения:

• Нужен разработчик. Это не конструктор: новые типы страниц, блоки и функции добавляет программист. Если вы планируете ежедневно собирать новые лендинги силами маркетолога без участия разработки, нужен продуманный конструктор блоков в админке — или другой инструмент.
• Фреймворк быстро развивается. Крупные версии выходят регулярно, и часть изменений требует переделок. Сайт нельзя «сделать и забыть»: обновления, в том числе исправления безопасности, нужно ставить. Это строка в бюджете поддержки.
• Нужен сервер, а не просто хостинг для файлов. Для серверных функций нужен Node.js на сервере или платформа, которая его поддерживает. Это не дороже обычного хостинга, но требует настройки.
• Избыточен для визитки. Для сайта из трёх страниц, который никогда не будет развиваться, мощности Next.js не нужны — хватит и простого статического сайта.
• Качество зависит от команды. Неграмотно написанный проект на хорошем фреймворке остаётся неграмотным: тормозит, плохо индексируется, трудно дорабатывается.

Когда мы бы не предлагали Next.js

• Сайт-визитка без планов развития, где главное — минимальный бюджет и запуск за пару дней.
• Интернет-магазин, который полностью устраивается готовой коробочной платформой и не требует нестандартной логики, а у команды уже есть опыт работы с ней.
• Проект, где всю поддержку будет вести штатный специалист, знающий только определённую CMS, и менять это вы не планируете.
• Временная промостраница на несколько недель.

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

Что нужно сайту на Next.js после запуска

• Сервер с Node.js или платформа, которая умеет запускать такие приложения, плюс домен и SSL-сертификат.
• Резервные копии базы данных и загруженных файлов — по расписанию и с проверкой восстановления.
• Мониторинг доступности, чтобы о падении сайта вы узнавали раньше клиентов.
• Регулярные обновления фреймворка и библиотек — раз в несколько месяцев плановые, при найденной уязвимости — срочно.
• Доступы к репозиторию, серверу и админке, которые хранятся у вас, а не только у подрядчика.

Что спросить у любого подрядчика про стек

• На чём будет сделан сайт и почему именно так — для вашей задачи, а не «мы всегда так делаем»?
• Это открытая технология или собственная разработка студии? Найдёте ли вы других разработчиков, если отношения закончатся?
• Где будут лежать исходники и когда вы получите к ним доступ? Правильный ответ — в репозитории, доступ к которому у вас с первого дня. Что проверить при передаче проекта, мы собрали в статье приёмка веб-проекта.
• Как будут вноситься правки в тексты, цены и картинки — нужен ли для этого программист?
• Как будут ставиться обновления фреймворка и библиотек, сколько это стоит в поддержке?
• Где будет размещён сайт и кто платит за сервер?
• Кто и как будет отвечать за сайт после запуска: сколько стоит час доработки, как быстро исправляются срочные ошибки, кто следит за обновлениями и резервными копиями?

Вывод

Next.js — не модное слово, а набор практических свойств: страницы, которые быстро открываются на телефоне и хорошо видны поисковикам, один стек для сайта и личного кабинета, открытый код без привязки к платформе и абонентской плате. Цена этих свойств — необходимость разработчика и регулярных обновлений. Для бизнеса, который рассчитывает на сайт как на канал продаж и собирается его развивать, это выгодная сделка; для визитки на год — избыточная. Если не уверены, что подходит именно вам, опишите задачу и планы на развитие — мы скажем прямо, нужен ли здесь Next.js или хватит более простого решения.