CMS для сайта на Next.js: как добавить админку, не переписывая проект
Анна· Директор по продукту и технологиям·7 октября 2026 г.·7 мин чтенияКоротко: сайт на Next.js, где тексты и цены зашиты в код, переписывать ради админки не нужно — CMS подключается к существующему проекту. Выбор сводится к трём подходам: хранить контент в репозитории (Keystatic), поднять CMS внутри самого приложения (Payload) или подключить внешний сервис (Sanity, Storyblok, Strapi). Основная работа — не установка системы, а вынос контента из кода в структуры и корректная настройка ревалидации, чтобы правки появлялись на сайте без полной пересборки.
Три подхода
1. Контент в репозитории (Git-based)
Статьи и страницы остаются файлами в проекте, админка редактирует их через веб-интерфейс и коммитит изменения в репозиторий. Базы данных нет.
Keystatic — самый зрелый вариант для Next.js: ставится как часть приложения, схема описывается в TypeScript, админка доступна по отдельному маршруту, работает и локально с файлами, и через GitHub. Рядом стоят Sveltia CMS и Pages CMS — они подключаются конфигом и не требуют вмешательства в код.
- Плюсы: ноль инфраструктуры, бесплатно, контент версионируется вместе с кодом, откат — это обычный revert.
- Минусы: публикация означает коммит и пересборку, то есть задержка в минуты; совместное редактирование и права доступа примитивны; тяжело моделировать связи между сущностями.
- Когда брать: блог, документация, небольшой маркетинговый сайт, один-два редактора с доступом к GitHub.
2. CMS внутри приложения
Payload версии 3 устанавливается прямо в приложение Next.js: та же папка app, тот же сервер, админка на том же домене. Схема описывается в TypeScript, типы генерируются автоматически, данные доступны через локальный API без HTTP-запроса — это заметно экономит время рендера на серверных компонентах.
- Плюсы: один репозиторий и один деплой, нет сетевых лимитов и вендор-лока, полноценные роли, медиатека, черновики и версии; лицензия MIT.
- Минусы: нужна база данных (Postgres или Mongo) и, значит, эксплуатация; админка ориентирована на разработчиков — редакторам-маркетологам она нравится меньше, чем визуальные конструкторы.
- Когда брать: контент-тяжёлый сайт на Next.js, когда команда хочет держать всё в своём коде и не платить за объём запросов.
3. Внешний сервис (SaaS или self-hosted)
Sanity — пожалуй, самое распространённое сочетание с Next.js: собственный язык запросов GROQ, встраиваемая студия, хорошая поддержка App Router с черновиками и живым предпросмотром. Storyblok выигрывает визуальным редактированием, что ценят маркетинговые команды. Strapi и Directus — открытые системы, которые вы разворачиваете у себя; Strapi моделирует контент через интерфейс, а не кодом.
- Плюсы: удобный редактор, совместная работа, предпросмотр, в случае SaaS — ничего не нужно администрировать.
- Минусы: зависимость от провайдера, лимиты бесплатных тарифов, отдельный источник данных со своей задержкой.
- Когда брать: контент ведут несколько человек, нужен визуальный предпросмотр, важнее удобство редактора, чем контроль над инфраструктурой.
Сравнение
| Keystatic | Payload | Sanity | Strapi | |
|---|---|---|---|---|
| Где живёт контент | Файлы в репозитории | Ваша база данных | Облако провайдера | Ваша база данных |
| Отдельный сервис | Нет | Нет, внутри приложения | Да | Да |
| Стоимость | Бесплатно | Бесплатно + хостинг базы | Бесплатный тариф с лимитами | Бесплатно + хостинг |
| Публикация | Коммит + пересборка | Мгновенно | Мгновенно | Мгновенно |
| Роли и права | Базовые | Полноценные | Полноценные | Полноценные |
| Схема | TypeScript | TypeScript | Код студии | Через интерфейс |
| Кому удобнее | Разработчику | Разработчику | Редактору | Редактору |
Что важнее выбора системы
Ревалидация, а не полная пересборка
Самая частая ошибка интеграции: после каждого изменения контента запускается полный билд. На сайте из полусотни страниц это терпимо, дальше — мучительно.
Правильная схема: страницы отдаются из кеша, а CMS по вебхуку дёргает маршрут ревалидации, который сбрасывает кеш только изменённых страниц или тега. В App Router для этого есть revalidateTag и revalidatePath; теги удобнее — помечаете запросы тегом вида post-<slug>, и вебхук сбрасывает ровно его.
Для Git-based систем этот путь недоступен по определению: там публикация и есть новый билд. Это главное ограничение подхода, и о нём стоит знать до выбора.
Черновики и предпросмотр
Редактору нужно видеть неопубликованную страницу. В Next.js для этого есть Draft Mode: маршрут включает режим черновика, и серверные компоненты запрашивают из CMS неопубликованную версию. Это настраивается один раз, но настраивается — само не появится.
Типизация
Payload генерирует типы из схемы, Sanity умеет генерировать типы по запросам, Keystatic описывает схему прямо в TypeScript. Это не роскошь: при ручной типизации контента любое изменение поля ломает сборку в неожиданном месте.
Изображения
Решите заранее, кто оптимизирует картинки. SaaS-решения отдают изображения через свой CDN с преобразованиями на лету; при self-hosted варианте придётся настраивать хранение (локально или в S3-совместимом хранилище) и работать с next/image и доменами в конфиге.
Лимиты бесплатных тарифов
Отдельная ловушка: бесплатные тарифы считают обращения к API. Сайт с частой ревалидацией может выбирать месячную квоту одними только серверными запросами, не считая предпросмотров редактора. Перед выбором SaaS прикиньте число запросов при вашей частоте обновления и трафике.
Как подключить CMS к существующему сайту
Порядок, который снижает риски:
- Инвентаризация контента. Выписать всё, что зашито в код: тексты, цены, списки, FAQ, метаданные, изображения. Отдельно пометить то, что дублируется в нескольких местах — контакты, реквизиты, цены.
- Моделирование. Описать коллекции и глобальные настройки: настройки сайта, услуги, тарифы, кейсы, статьи, команда. Поля SEO — у каждой сущности.
- Выбор системы под получившуюся модель, а не наоборот.
- Один пилотный раздел. Обычно блог: перенести, проверить ревалидацию и предпросмотр, убедиться, что метаданные и разметка не потерялись.
- Остальной контент по частям, начиная с того, что чаще меняется.
- Проверка после запуска: canonical, Open Graph, JSON-LD, карта сайта, формы, счётчики.
Пятый и шестой пункты — не формальность. При переносе текстов в CMS легко потерять метатеги и микроразметку, а это прямое падение трафика. Что проверять, мы разбирали в статьях «Страниц нет в поиске» и «Редизайн сайта: когда пора».
Стоит ли писать свою админку
Соблазн велик: с современными инструментами форма редактирования пишется за вечер. Но админка — это не форма. Это аутентификация и роли, загрузка и обработка изображений, черновики и предпросмотр, история версий и откат, валидация полей, редактор форматированного текста, который не ломает вёрстку, и защита маршрутов записи.
В готовых системах всё это есть и обновляется без вашего участия. Своё решение оправдано там, где готовая модель данных мешает: калькуляторы со сложной логикой, внутренние дашборды, интеграции с учётными системами. Рабочий гибрид — CMS для контента плюс собственный модуль под специфическую задачу.
Для веб-студии есть ещё один довод: настроенная один раз связка Next.js + CMS становится заготовкой для клиентских проектов. Самописная админка таким активом не станет — её придётся поддерживать в каждом проекте отдельно.
Как выбрать за пять минут
- Контент правят один-два человека с доступом к репозиторию, нужен блог и пара страниц → Keystatic.
- Контента много, важна скорость публикации и контроль над данными, команда работает с TypeScript → Payload.
- Редакторы — не разработчики, нужны предпросмотр и совместная работа, инфраструктуру держать не хочется → Sanity.
- Нужна готовая экосистема плагинов и моделирование через интерфейс, сервер свой → Strapi.
- Главное — визуальное редактирование страниц маркетологами → Storyblok.
Частые вопросы
Нужно ли переписывать сайт на Next.js, чтобы добавить админку? Нет. CMS подключается к существующему проекту: внешний вид, адреса страниц и позиции в поиске не меняются. Основная работа — вынести контент из кода в структуры.
Какая CMS лучше всего интегрируется с Next.js? Payload — самая тесная интеграция: устанавливается внутрь приложения и работает на том же сервере. Sanity — самое распространённое сочетание для App Router с черновиками и предпросмотром.
Можно ли обойтись без базы данных? Да, если взять Git-based систему вроде Keystatic: контент хранится файлами в репозитории. Плата за это — пересборка при публикации.
Как сделать, чтобы правки появлялись сразу, без полного билда? Настроить вебхук из CMS на маршрут ревалидации и сбрасывать кеш по тегам изменённых страниц.
Сколько стоит подключение CMS? Сами системы бесплатны. Платить придётся за работу: инвентаризация контента, моделирование, перенос и проверка SEO. Для блога это обычно один-два дня, для всего сайта — несколько дней.
Нужна админка для сайта на Next.js? Напишите нам — посмотрим проект, предложим схему контента и оценим работу. Разработка и доработка сайтов — на странице корпоративных сайтов.