Разработка на Next.js: быстрые сайты с headless CMS

Большая часть страниц сайта не меняется от посещения к посещению. Next.js собирает их заранее — при публикации — и раздаёт через CDN с сервера, ближайшего к посетителю. Сайт не обращается к базе данных и не собирает шаблон при каждом клике, поэтому страница открывается почти сразу и в Варшаве, и в Лимассоле, и в Тбилиси.

• после правки в CMS страница пересобирается в фоне, посетитель всегда видит готовую версию
• фотографии автоматически уменьшаются под размер экрана и отдаются в современных форматах
• шрифты лежат на том же сервере и не сдвигают вёрстку при загрузке
• в браузер уходит только тот JavaScript, который нужен конкретной странице

Сайт диджея и продюсера, который я сделал на Next.js 14 по макету из Figma, загружается меньше чем за секунду. Он заменил медленные страницы на конструкторе, а в нём есть видеогалерея, дискография и форма для букинга.

На WordPress за SEO обычно отвечает плагин, на Next.js — сам код сайта. Я настраиваю его один раз так, чтобы редактор не мог случайно ничего сломать:

• title, description и картинка для соцсетей формируются для каждой страницы из полей CMS, а если поле пустое, подставляется запасной вариант
• XML-карта сайта собирается из контента, новая статья попадает в неё сразу после публикации
• у языковых версий прописаны hreflang, у каждой страницы — канонический адрес
• микроразметка JSON-LD описывает компанию или эксперта, услуги, статьи, FAQ и хлебные крошки
• 301-редиректы собраны в одном файле, несуществующие адреса отдают честную ошибку 404

Работа с крупными сайтами — индексация, краулинговый бюджет, Core Web Vitals на тысячах страниц — описана на странице техническое SEO.

В headless CMS контент хранится отдельно от дизайна. В Sanity вы заполняете поля — заголовок, цену, список преимуществ, вопросы и ответы, — а сайт сам раскладывает их по шаблону. Текст, вставленный из Google Docs, или слишком большое фото не разъедут страницу.

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

Я выбираю Sanity, потому что панель редактора — это код в том же репозитории, и она развивается вместе с сайтом. Другие CMS и связь сайта с вашими сервисами описаны на странице интеграция CMS и API.

Русскоязычному бизнесу за рубежом обычно нужен не один язык. Мой сайт работает на русском, польском и английском; сайт консультанта по аналитике ритейла, который я сделал, — 153 страницы на тех же трёх языках; сайт психотерапевта из Милана — на итальянском и английском. В каждом случае у языка свои адреса с переведёнными слагами, hreflang и переключатель, который ведёт на ту же страницу на другом языке, а не на главную. Тексты пишутся для каждого рынка, а не прогоняются через переводчик. Подробнее — на странице разработка многоязычного сайта.

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

• заявка с формы приходит в Telegram-чат, WhatsApp, на почту или в CRM, с защитой от спама и событием в аналитике
• в ЕС баннер cookies спрашивает согласие до запуска Google Analytics 4, как требует GDPR
• Stripe Checkout принимает оплату в евро за курс, консультацию или предоплату
• после оплаты покупатель получает доступ к платным материалам

Для Landi Room, салона красоты в Варшаве, я сделал лендинг онлайн-курса на Next.js и Sanity со Stripe Checkout: после оплаты покупательница получает защищённую ссылку на видео. Первая кампания в Google Ads на этот лендинг принесла больше 100 продаж курса.

Чаще всего проект начинается с сайта на WordPress, который стал медленным или который страшно обновлять. При переезде нужно сохранить и контент, и позиции в Google. Сайт Джузеппе, психотерапевта из Милана, я пересобрал на Next.js 16 и Sanity: перенёс 468 статей блога, с каждого старого адреса настроил 301-редирект на новый, добавил микроразметку и правила для ИИ-ботов. От старта до передачи прошло 44 рабочих дня.

Порядок переноса сайта с WordPress на Next.js

1. Выгрузка записей, страниц, изображений и SEO-полей, перевод их в структурированный контент CMS.
2. Карта всех старых адресов, включая рубрики, метки и страницы вложений.
3. Перенос title и description, проверка редиректов на тестовой версии.
4. После запуска — контроль ошибок 404 и индексации в Google Search Console.

Переезд с других платформ проходит так же, процесс описан на странице перенос сайта на другую платформу.

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

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

• HTML с настоящими заголовками, списками и таблицами, понятный без запуска скриптов
• микроразметка с названием компании или именем эксперта, услугами и авторами статей
• правила в robots.txt для GPTBot, OAI-SearchBot, PerplexityBot и Google-Extended: вы решаете, кто может читать сайт, а кто — обучать на нём модели
• файл llms.txt с короткой картой сайта, где он уместен

Джузеппе нашёл меня через ChatGPT, а новые страницы его обновлённого сайта уже появляются в ответах ChatGPT. Попасть в ответы ИИ — отдельная постоянная работа, она описана на странице AI SEO и GEO-оптимизация.

В студии над сайтом работают менеджер, дизайнер, фронтенд- и бэкенд-разработчики. Для сайта компании это обычно больше людей, чем нужно. У меня дизайн, код, настройка CMS, SEO и запуск — в одних руках, и вы общаетесь напрямую с тем, кто делает работу. В интернет-маркетинге я с 2010 года: сначала копирайтер, потом SEO, потом разработка, — поэтому сайт строится от того, что ищут ваши клиенты, а не от набора компонентов.

1. Бриф: страницы, языки, интеграции, типы контента и фиксированная цена.
2. Дизайн главной и одной внутренней страницы, согласованный на телефоне и компьютере.
3. Разработка на Next.js и Sanity с SEO и аналитикой; ход работы виден на тестовом адресе.
4. Контент, перенос, редиректы, подключение домена.
5. Передача: короткая инструкция по CMS, репозиторий и аккаунты, оформленные на вас.

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

Цены опубликованы на странице стоимости, дизайн входит в оба варианта:

• Сайт или лендинг на Next.js с Sanity CMS, несколько страниц и форма заявки: 700–1 400 €.
• Сайт на Next.js с headless CMS, несколькими языками, интеграциями с CRM или Stripe либо переносом с WordPress: от 2 000 €.

Цена зависит от количества шаблонов и типов контента, а не страниц: блог на 400 статей использует один шаблон статьи. Перенос добавляет работу над картой адресов и конвертацией контента. Хостинг и тариф CMS вы оплачиваете напрямую поставщикам, а ожидаемые расходы я называю до старта.