Миграция с WordPress на Next.js
О миграции
Миграция с WordPress на Next.js: Headless CMS для современного фронтенда
Headless-архитектура разделяет контент и его отображение. WordPress остаётся системой управления контентом — редакторы продолжают работать в привычном интерфейсе. Но фронтенд полностью переписывается на Next.js: статическая генерация страниц, React-компоненты, мгновенная навигация и оценки PageSpeed близкие к 100.
Почему выбирают Headless WordPress + Next.js
- Скорость, недостижимая для классического WordPress. Страницы генерируются заранее (SSG) или по запросу с кешированием (ISR). Никаких PHP-запросов в рантайме — только CDN.
- Свобода фронтенд-разработки. Вёрстка на React без ограничений тем и шаблонов. Любые анимации, интерактивность, кастомные компоненты.
- Омниканальность. Один источник контента — сайт, мобильное приложение, AMP, Smart TV. WP REST API или GraphQL (WPGraphQL) отдаёт данные любому клиенту.
- Надёжность.. Фронтенд полностью отделён от бэкенда. Взлом или падение WordPress не роняет публичный сайт — он живёт на CDN.
Что вы теряете и что приобретаете
Вы теряете возможность мгновенно менять страницы через визуальный редактор с мгновенным эффектом. В Headless-схеме изменение контента требует ребилда или ISR-обновления страницы. Плагины, влияющие на фронтенд (слайдеры, попапы), нужно переписывать на React.
Вы приобретаете оценки Core Web Vitals в зелёной зоне, бесплатный или почти бесплатный хостинг фронтенда на Vercel/Netlify, полную свободу дизайна без «темочной» архитектуры, лёгкую интеграцию с любыми API и сервисами, а также TypeScript и современные инструменты разработки.
Этапы миграции
- Подготовка WordPress как Headless CMS. Устанавливаем WPGraphQL или настраиваем REST API. Проверяем, что все поля (ACF, SEO Yoast) доступны через API.
- Проектирование структуры Next.js. Определяем какие страницы статические (SSG), какие серверные (SSR), какие используют ISR. Проектируем маршрутизацию.
- Разработка компонентного дерева. Создаём React-компоненты для всех типов контента: посты, страницы, категории, виджеты. Стилизация через CSS Modules или Tailwind.
- Реализация динамических страниц. `getStaticPaths` + `getStaticProps` для постов и категорий. Настройка ISR для контента, который меняется часто.
- SEO-слой. Компонент Head с метатегами, Open Graph, JSON-LD Schema.org, canonical. Интеграция с Yoast или Rank Math через GraphQL.
- Формы и интерактивность. Контактные формы через API Routes Next.js или внешние сервисы. Комментарии — через Disqus или собственный API.
- Деплой и CDN. Фронтенд на Vercel с автодеплоем из Git. Webhook в WordPress для ребилда при публикации контента.
Сроки и стоимость
Корпоративный сайт или блог на 50–200 страниц переезжает за 6–10 недель. Новостной портал с сотнями публикаций и сложной категоризацией — 12–16 недель. Бюджет определяется сложностью дизайна и количеством кастомных типов контента.
Новостной портал после переезда на Next.js + Headless WordPress получил 97 баллов в PageSpeed. Редакция не заметила изменений — они работают в том же WordPress. Но читатели теперь получают страницы за 200 мс вместо 2,5 секунд.
Откуда и куда
WordPress — система управления контентом для сайтов любого масштаба WordPress — самая распространённая CMS в мире: по данным W3Techs, на ней работает более 43% всех сайтов в интернете. Изначально созданный как блог-платформа в 2003 году, WordPress эволюционировал в полнофункциональную CMS, способную обслуживать новостные порталы, корпоративные сайты, интернет-магазины и образовательные платформы. Огромная экосистема плагинов (более 60 000 в официальном репозитории) позволяет добавить практически любую функциональность без написания кода. Архитектура WordPress основана на PHP и MySQL. Редактор Gutenberg (блочный редактор) позволяет контент-менеджерам создавать сложные страницы визуально, без знания HTML. Гибкая система тем даёт возможность кардинально менять внешний вид сайта. Система пользователей с ролями (администратор, редактор, автор, подписчик) закрывает большинство требований к разграничению доступа. Студия Gulaev.Dev разрабатывает на WordPress в первую очередь корпоративные сайты, блоги и небольшие интернет-магазины, где заказчику важна возможность самостоятельно редактировать контент без привлечения разработчика. WordPress в связке с Advanced Custom Fields, Elementor Pro или кастомной темой на основе Underscores даёт оптимальное соотношение цены и функциональности для таких задач. Для каких проектов подходит WordPress Корпоративные сайты и лендинги — когда нужна простая CMS без лишней сложности. Заказчик сам обновляет тексты, добавляет страницы, публикует новости. Блоги и медиа-издания — исторически сильная сторона WordPress. Мультиавторские блоги, тематические порталы, корпоративные издания. Портфолио и агентства — сайты дизайнеров, рекламных агентств, студий. Быстрый запуск с красивым визуальным результатом. Небольшие интернет-магазины (WooCommerce) — до 500–1000 SKU, где не требуются сложная бизнес-логика или ERP-интеграции. Образовательные платформы — с плагинами LearnDash или LifterLMS можно построить полноценную онлайн-школу. Мультиязычные сайты — плагин WPML или Polylang делают локализацию управляемой задачей. Преимущества WordPress для бизнеса Скорость запуска — типовой корпоративный сайт на WordPress разрабатывается за 2–4 недели. Простота управления контентом — любой сотрудник без технических знаний справится с обновлением текстов и изображений. Низкая стоимость разработки — готовые плагины и темы снижают трудозатраты разработчика. Большой рынок специалистов — WordPress-разработчика проще найти, чем специалиста по экзотическим CMS. SEO-возможности — плагины Yoast SEO или Rank Math обеспечивают полный контроль над мета-тегами, sitemap, Schema.org. Гибкость кастомизации — при наличии опытного разработчика WordPress можно адаптировать под нестандартные требования. Экономия на хостинге — WordPress работает на стандартном shared-хостинге, хотя для производительности рекомендуется VPS с Nginx и Redis. Стоимость разработки на WordPress Лендинг на готовой теме с кастомизацией — от 30 000 до 70 000 руб. Корпоративный сайт (кастомная тема) — от 80 000 до 200 000 руб. Блог или медиа-портал — от 60 000 до 150 000 руб. Интернет-магазин на WooCommerce — от 120 000 до 300 000 руб. (см. отдельный раздел WooCommerce). Образовательная платформа — от 150 000 до 350 000 руб. Примеры из практики студии Gulaev.Dev разработал несколько корпоративных сайтов на WordPress для компаний из сферы строительства и услуг. В каждом проекте использовалась кастомная тема (без конструктора), Advanced Custom Fields для гибкого управления контентом, настроенный кэш через Redis Object Cache и оптимизация под Core Web Vitals. Один из проектов — новостной портал с редакционным рабочим процессом и ролевой системой для 5 авторов.
О WordPressNext.js — React-фреймворк для продакшен-приложений с SSR и SSG Next.js — фреймворк на базе React, разработанный компанией Vercel. Он решает одну из главных проблем традиционных React SPA — плохую индексацию поисковыми системами и медленный первый рендер. Next.js предоставляет несколько режимов рендеринга: SSR (Server-Side Rendering, рендеринг на сервере при каждом запросе), SSG (Static Site Generation, генерация статических страниц при сборке) и ISR (Incremental Static Regeneration, периодическое обновление статических страниц). Разработчик выбирает стратегию для каждой страницы отдельно. App Router, введённый в Next.js 13 и стабилизированный в 14, кардинально меняет архитектуру приложения. Server Components позволяют выполнять код на сервере и отдавать готовый HTML без JavaScript на клиенте — это критически важно для производительности и SEO. Client Components добавляются только там, где нужна интерактивность. Такая модель обеспечивает оптимальный баланс между производительностью и функциональностью. Next.js включает встроенную оптимизацию изображений (компонент Image с автоматическим WebP-конвертированием и lazy loading), оптимизацию шрифтов, поддержку Middleware для работы с запросами до рендеринга, API Routes для создания серверных endpoint прямо внутри Next.js-приложения. Для деплоя подходят Vercel (платформа от создателей), Docker, любой VPS с Node.js. Студия Gulaev.Dev использует Next.js для проектов, где критически важны SEO и скорость загрузки. Для каких проектов подходит Next.js Маркетинговые сайты и лендинги — статическая генерация даёт максимальную скорость загрузки (Core Web Vitals), критичную для конверсии и SEO. Контентные порталы и блоги — SSG + ISR позволяет публиковать тысячи страниц с обновлением без полной пересборки сайта. Интернет-магазины — страницы товаров как статика (SSG), корзина и личный кабинет как Client Components. Идеальный баланс SEO и UX. Fullstack-приложения — Next.js с API Routes или Server Actions может работать как полноценный бэкенд для небольших и средних проектов. Корпоративные сайты — когда нужны React-компоненты, высокая производительность и хорошее SEO одновременно. Headless CMS-проекты — Next.js как frontend для Contentful, Strapi, Sanity, WordPress (headless mode). Преимущества Next.js для бизнеса SEO из коробки — серверный рендеринг означает, что поисковые роботы видят готовый HTML, а не пустую страницу с JavaScript. Максимальная скорость загрузки — статические страницы отдаются из CDN без обращения к серверу. Lighthouse 95+ достижим по умолчанию. Встроенная оптимизация изображений — автоматическое сжатие, конвертация в WebP, lazy loading, предотвращение CLS. Единый стек — frontend и backend в одном репозитории, один язык (TypeScript), один деплой. Incremental Static Regeneration — страницы обновляются в фоне без полной пересборки, контент актуален без задержки. Vercel Edge Network — глобальный CDN с минимальной задержкой при деплое на Vercel. Активное развитие — Vercel инвестирует в Next.js, выходит несколько мажорных версий в год с существенными улучшениями производительности. Стоимость разработки на Next.js Корпоративный сайт (SSG) — от 100 000 до 250 000 руб. Интернет-магазин (Next.js + headless CMS или API) — от 300 000 до 700 000 руб. Контентный портал с ISR — от 150 000 до 400 000 руб. Fullstack Next.js-приложение — от 350 000 до 800 000 руб. Примеры из практики студии Gulaev.Dev применяет Next.js для проектов с высокими требованиями к SEO и скорости. В частности, реализован корпоративный сайт с гибридным рендерингом: маркетинговые страницы — SSG, личный кабинет — CSR. Интеграция с Headless WordPress как источником данных через WP REST API позволила клиенту управлять контентом привычным способом, получив при этом производительность современного JAMstack-сайта.
О Next.jsГотовы перейти с WordPress на Next.js?
Составим детальный план, проведём безопасную миграцию данных и запустим проект на новой платформе.