Міграція з Webflow на Next.js: коли і як

Міграція з Webflow на Next.js має сенс, коли сайт переріс можливості візуального конструктора: складний контент, кілька мов, нестандартні інтеграції або жорсткі вимоги до швидкості. Сама популярність Next.js причиною не є. У статті розбираємо ознаки, що час переїжджати, випадки, коли Webflow досі кращий, і план міграції, який береже позиції в пошуку.

Webflow є добрим продуктом. Для багатьох маркетингових сайтів це найшвидший шлях від макета до запуску, і команда без розробників може ним керувати. Питання не в тому, який інструмент кращий загалом. Питання в тому, що обійдеться дешевше, грошима і зусиллями, для сайту, який у вас буде через два роки.

Коли міграція з Webflow на Next.js виправдана

У наших проєктах команди починають говорити про переїзд з кількох типових причин. Однієї зазвичай мало. Дві-три разом уже є серйозним аргументом.

Контент переріс модель CMS. Глибоко пов’язані колекції, блоки, що повторюються на різних сторінках, або тисячі записів упираються в ліміти тарифу і структуру колекцій.
Потрібно кілька мов. У Webflow є окремий продукт для локалізації, але ціна росте з кожною мовою, а складну багатомовну SEO-схему буває важко контролювати.
Інтеграції стають нестандартними. Закритий контент, ціни з вашого застосунку, дані продуктів з API або логіка на сервері.
Швидкість є вимогою, а не надією. Ви хочете контролювати кожен скрипт, шрифт і зображення та самі задавати бюджет продуктивності.
Продукт уже ведуть розробники. Якщо застосунок написано на React, маркетинговий сайт на тому самому стеку може ділити з ним компоненти, авторизацію і дизайн-токени.
Залежність від платформи стала ризиком. Експорт коду не містить робочої CMS, тож модель вашого контенту живе всередині платформи.

Коли краще лишитися на Webflow?

Є вагомі причини не мігрувати, і ми прямо кажемо про них на дзвінках. Лишайтеся на Webflow, якщо більшість пунктів про вас:

На сайті до 20 шаблонів, і змінюються переважно тексти й зображення.
Маркетологи самі збирають нові сторінки у візуальному редакторі, і їм це подобається.
Після запуску немає бюджету на розробника, навіть невеликого.
Жодна з причин вище сьогодні не коштує вам реальних грошей.

Власна розробка переносить роботу з платформи у ваш код. Це дає контроль, але хтось має оновлювати залежності, стежити за хостингом та інтеграцією з CMS. Якщо цим ніхто не займатиметься, міграція просто замінить одну проблему іншою. Закладіть цей час у бюджет до того, як ухвалювати рішення.

Що зміниться для маркетингової команди

Найчастіше ми чуємо побоювання: «На кожну правку доведеться кликати розробника». Насправді це питання вибору CMS, а не обмеження Next.js. З headless CMS редактори збирають сторінки з погоджених блоків, переглядають чернетки і публікують без деплою.

Як обрати CMS

Обирайте CMS за тим, хто і як часто редагує, а не за списком функцій. Варто перевірити:

Візуальний перегляд чернеток у реальному макеті сторінки.
Збирання сторінок із блоків, щоб маркетинг міг робити лендинги самостійно.
Модель локалізації: переклад на рівні полів чи цілих документів.
Ролі й погодження, якщо публікують кілька людей.
Ціну за місце і за мову, бо обидва показники з часом ростуть.

До популярних headless-варіантів належать Sanity, Contentful, Storyblok і Payload. Кожен пасує різним командам. Ми вирішуємо після того, як подивимося на вашу модель контенту, а не до.

План міграції крок за кроком

Міграція є, по суті, редизайном із суворішими правилами щодо URL і даних. Загальні кроки є в нашому чеклісті редизайну сайту. Нижче зібрано те, що стосується саме Webflow.

Вивантажте все. Проскануйте живий сайт, зберіть URL і метадані, експортуйте кожну колекцію CMS у CSV. Завантажте медіафайли, бо адреси зображень на CDN Webflow перестануть бути вашими.
Змоделюйте контент. Зіставте кожну колекцію і поле Webflow зі схемою нової CMS. Виправте структуру там, де вона була обхідним рішенням.
Імпортуйте скриптом. Переносьте записи і форматований текст скриптом, а не копіюванням. Rich text доведеться почистити: вбудовані блоки, власний код, інлайн-стилі.
Перезберіть шаблони як компоненти. Кожен шаблон Webflow стає макетом сторінки, а секції, що повторюються, перевикористовуваними блоками.
Відтворюйте анімації свідомо. Лишіть ті, що допомагають зрозуміти зміст, і приберіть ті, що лише додають ваги.
Налаштуйте редиректи для кожної адреси, що змінюється. URL колекцій у Webflow часто мають вигляд /collection/item, і, можливо, ви захочете його змінити.
Тримайте обидва сайти паралельно на тестовому сервері, доки контент, посилання і форми не збігатимуться.

Схема міграції: експорт із Webflow, моделювання контенту, імпорт скриптом, нові шаблони і редиректи

Редиректи в Next.js

Для маркетингового сайту редиректи можна тримати в конфігурації Next.js. Типовий приклад для зміненого шляху блогу:

// next.config.ts
import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  async redirects() {
    return [
      { source: "/post/:slug", destination: "/blog/:slug", permanent: true },
      { source: "/about-us", destination: "/about", permanent: true },
    ];
  },
};

export default nextConfig;

Якщо разових редиректів сотні, генеруйте цей список із карти URL, а не пишіть вручну.

Як зберегти SEO та аналітику

Пошуковий трафік зазвичай переживає зміну платформи, якщо акуратно поводитися з URL, контентом і метаданими. Падіння спричиняють пропущені редиректи, видалений контент і биті внутрішні посилання.

Зберігайте тайтли, описи й заголовки сторінок із позиціями, якщо немає причини їх змінювати.
Генеруйте XML-карту сайту і canonical із CMS і перевіряйте їх на тестовому сервері.
Відтворіть мікророзмітку, яку додавав Webflow, і все, що ви додавали вручну.
Перенесіть аналітику, банер згоди та події конверсій до запуску і протестуйте кожну подію.
Перші два тижні після запуску щодня дивіться в Search Console, далі щотижня.

Вартість і терміни

Міграція з Webflow на Next.js ближча до перезбирання, ніж до копіювання. На типовому проєкті дизайн переноситься або оновлюється, розробка та імпорт контенту є новою роботою, а SEO-міграція стає окремим завданням.

Маркетинговий сайт із блогом зазвичай вміщується в наш пакет редизайну сайту: від 9 500 $ за 8 шаблонів сторінок, 5-6 тижнів, SEO-міграція включена.
Кожен додатковий шаблон має фіксовану опубліковану ціну, а кожна додаткова мова додає 12% від базової вартості й вартості додаткових шаблонів.
Налаштування CMS коштує 2 000 $. SEO-міграція входить у редизайн, а як окрема послуга до інших пакетів коштує 1 500 $.

Приклад: сайт на 10 шаблонів, перенесений на Next.js із headless CMS однією мовою, коштує 12 300 $.

Змінюються і регулярні витрати. Ви перестаєте платити за тарифи і місця у Webflow, натомість платите за хостинг, тариф CMS і трохи часу на підтримку. Для багатьох команд підсумки схожі. Змінюється те, що ви контролюєте.

Сплануйте переїзд на Next.js

Якщо про вас дві чи більше причин зі списку вище, варто отримати план з оцінкою. Наша послуга редизайну сайту охоплює переїзд на Next.js повністю: моделювання контенту, CMS, перезбирання сайту і SEO-міграцію за фіксованою ціною, з щотижневими демо на тестовому сервері.

Якщо ви ще вагаєтеся, почніть із цифр у порівнянні Webflow чи власний сайт на Next.js і поверніться, коли один зі шляхів стане для вас очевидно дешевшим.