Практика вайб-кодинга: миграция бизнес-сайта с Webflow на Next.js и Sanity CMS за три дня

Практика вайб-кодинга: миграция бизнес-сайта с Webflow на Next.js и Sanity CMS за три дня

Концепция вайб-кодинга (vibe coding) — разработки программного обеспечения и веб-ресурсов путем ведения диалога с ИИ-ассистентами без ручного написания кода — переходит из разряда экспериментов в плоскость реальных бизнес-задач. Практическим подтверждением этого тренда стал успешный кейс образовательной платформы No Code MBA, которая перенесла свой основной сайт nocode.mba с визуального конструктора Webflow на собственный стек Next.js и headless CMS Sanity.

С помощью связки ИИ-агентов Codex и Claude Code миграция 1621 документа из 15 коллекций базы данных, верстка интерфейса, настройка редиректов и развертывание проекта на хостинге Vercel были выполнены всего за три дня силами одного человека.

Почему бизнес уходит от визуальных конструкторов

Конструктор Webflow предоставляет удобную среду визуальной разработки, однако по мере масштабирования контентной базы и роста посещаемости сайт начинает сталкиваться с ограничениями. Переход на собственную инфраструктуру Next.js и Sanity CMS обусловлен следующими факторами:

• Контроль над кодом и производительностью. Страницы на Next.js загружаются почти мгновенно благодаря механизмам серверного рендеринга (React Server Components) и инкрементальной статической регенерации (ISR).
• Снижение накладных расходов. Стоимость хостинга и обслуживания собственной кодовой базы на Vercel значительно ниже тарифов Webflow на обслуживание крупных CMS-коллекций.
• Масштабируемость данных. Переход к схеме Headless CMS позволяет отделить контент от дизайна. Одни и те же данные из базы Sanity можно использовать не только на сайте, но и в мобильных приложениях или внешних ИИ-сервисах.

Однако миграция крупного проекта всегда сопряжена с критическим риском потери поискового трафика из-за битых ссылок, изменения структуры URL или потери SEO-тегов. Чтобы этого не произошло, процесс должен быть жестко регламентирован.

Чек-лист предмиграционного SEO-аудита

Прежде чем вносить изменения в DNS-записи или импортировать данные, соберите слепок старого сайта. Запустите ИИ-агента для выполнения предмиграционного сканирования:

1. Сбор карты URL. Сделайте полный краулинг старого сайта, выгрузив адреса всех страниц, их статус-коды (200 OK, 301, 404), а также теги: title, meta description, h1 и canonical.
2. Экспорт редиректов. Сформируйте Excel-таблицу старых 301-редиректов, настроенных в панели Webflow.
3. Фиксация схем данных. Экспортируйте структуры CMS-коллекций Webflow и API-идентификаторы (Field API IDs) всех полей.

Пошаговое руководство по миграции контента и кода

Шаг 1. Получение доступов к Webflow API

Для извлечения документов из Webflow потребуется API-токен доступа:

1. В панели управления Webflow перейдите в настройки проекта -> вкладка Integrations.
2. Сгенерируйте API-токен с правами чтения (read-only), чтобы исключить случайное повреждение данных на живом сайте.
3. Сохраните токен в локальном файле .env.local вашего проекта под именем WEBFLOW_API_TOKEN.

Шаг 2. Развертывание Sanity CMS и экспорт схем

Настройка базы данных Sanity и перенос структуры коллекций происходят по следующему сценарию:

1. Создайте аккаунт на платформе Sanity и инициализируйте проект с помощью CLI. Подробности управления описаны в руководстве по CLI Sanity.
2. Попросите ИИ-агента сгенерировать схемы данных Sanity на основе экспортированной структуры коллекций Webflow. Проверьте соответствие типов: текстовые поля, изображения, даты и связи между документами (references).
3. Создайте тестовый набор данных (staging dataset) для отладки импорта. Подробнее о переносе схем читайте на странице миграций Sanity.

Шаг 3. Написание скрипта импорта данных

Используя OpenAI Codex, напишите скрипт, который обращается к Webflow API, получает документы и записывает их в Sanity:

1. Установите официальный пакет Webflow SDK: npm install webflow-api (требует Node.js 18+). Спецификации запросов доступны в документации Webflow CMS API.
2. Запустите тестовый прогон скрипта импорта на staging dataset.
3. Проведите валидацию данных. Для проверки схем запустите команду валидации Sanity в терминале: sanity documents validate -y --format ndjson > documentValidations.ndjson
4. Проверьте корректность переноса сложных полей: HTML-кода, rich text и внешних ссылок. В No Code MBA перенос HTML-эмбедов в статьях занял больше всего времени и потребовал точечного ручного вмешательства.

Шаг 4. Scaffolding и верстка Next.js

Шаблон сайта создается на базе фреймворка Next.js:

1. Инициализируйте проект Next.js с поддержкой App Router. Изучите принципы маршрутизации в документации Next.js App Router.
2. Используйте ИИ-агента Claude Code для верстки страниц по скриншотам и стилям старого сайта. Claude Code отлично справляется с доводкой интерфейсных компонентов, созданием CSS-переменных и полировкой дизайна.
3. Для настройки редиректов со старых адресов Webflow откройте файл next.config.js и пропишите функцию редиректов. Согласно стандартам Next.js, для постоянных перенаправлений используются редиректы со статусом 308 (предотвращает изменение метода запроса):

module.exports = {
  async redirects() {
    return [
      {
        source: '/old-course-path/:slug',
        destination: '/courses/:slug',
        permanent: true, // вернет статус 308
      },
    ]
  },
}

Параметры функции редиректов описаны в справочнике по редиректам Next.js.

Шаг 5. Деплой на Vercel и смена DNS

Финальный этап — публикация готового сайта:

1. Свяжите локальный репозиторий с хостингом Vercel. Подробности развертывания доступны в документации Vercel Next.js.
2. Запустите CLI-деплой с помощью команды vercel для создания превью-версии сайта.
3. Укажите переменные окружения (токены Sanity) в панели управления Vercel.
4. Протестируйте сборку проекта. Смените DNS-записи домена только после того, как превью-сайт успешно пройдет тесты.

Чек-лист проверки качества перед запуском (QA)

Сайт считается готовым к переносу домена, если выполнены следующие условия:

• Сборка без ошибок. Команда npm run build выполняется локально и на Vercel без предупреждений и падений.
• Сохранение структуры ссылок. Старые URL перенаправляют на новые адреса со статусом 301 или 308. Битые ссылки (404) на целевых страницах отсутствуют.
• Доступность карты сайта. Файл sitemap возвращает валидный XML-код и содержит актуальные ссылки на все 1621 документ.
• Настройка индексации. Файл robots.txt доступен и не блокирует поисковых роботов на важных страницах.
• SEO-паритет. Заголовки title, мета-описания и canonical-ссылки на страницах Next.js попиксельно совпадают с данными предмиграционного аудита.

Риски и ограничения вайб-кодинга

Перенос сайта силами ИИ имеет свои ограничения:

• Необходимость ручного контроля кода. ИИ-агенты могут легко сгенерировать рабочий код, но часто допускают неточности в логике связей полей CMS (references) или неверно трактуют типы данных. Каждая сгенерированная схема должна проверяться разработчиком.
• HTML-эмбеды и rich text. Перевод Webflow rich text в формат Sanity Portable Text является сложным процессом. Кастомные скрипты и интеграции, вставленные пользователем в Webflow, могут сломать верстку в Next.js.
• Откат изменений. Вайб-кодинг должен всегда предусматривать сценарии отката: сохраняйте резервную копию базы данных Webflow и настраивайте короткое время жизни записей DNS (TTL) перед переключением домена.