wpnext
github wpnext
Cover Image for Использование Headless WordPress с Next.js и Vercel

Использование Headless WordPress с Next.js и Vercel

14 января 2026

Headless CMS — это архитектура, при которой WordPress используется исключительно как бэкенд для управления данными и контентом, а фронтенд создается с помощью JAM-stack технологий, таких как Next.js.

Этот подход позволяет объединить мощную админ-панель WordPress с производительностью, безопасностью и превосходным опытом разработки, которые предлагает Jamstack в лице NextJS. В этом руководстве мы пошагово разберем, как настроить, разработать и развернуть сайт на Headless WordPress с использованием фреймворка Next.js и платформы Vercel.

Оглавление

Что такое Headless WordPress?

В традиционной архитектуре WordPress отвечает как за управление контентом (бэкенд), так и за его отображение пользователю (фронтенд) через систему тем и плагинов. Headless-подход («обезглавленный») разделяет эти две функции. WordPress становится исключительно системой управления контентом, которая предоставляет данные через API. Фронтенд же создается как отдельное независимое приложение. В нашем случае для создания этого приложения будет использоваться Next.js — фреймворк на базе React.

Взаимодействие между WordPress и Next.js происходит через GraphQL API, который можно легко организовать с помощью плагина WPGraphQL. Это позволяет разработчикам получать именно те данные, которые им нужны, и создавать высокооптимизированные, быстрые и безопасные пользовательские интерфейсы.

Преимущества использования Headless WordPress с Next.js

Сочетание WordPress, Next.js и Vercel предлагает множество преимуществ по сравнению с классическим подходом:

  • Высокая производительность: Next.js позволяет генерировать статические страницы (SSG) во время сборки проекта. Такие страницы загружаются практически мгновенно, так как представляют собой готовые HTML-файлы. Для динамического контента можно использовать инкрементальную статическую регенерацию (ISR), которая обновляет страницы в фоновом режиме без необходимости полной пересборки сайта.
  • Повышенная безопасность: Разделение бэкенда и фронтенда значительно сужает поверхность для атак. Ваша база данных и административная панель WordPress изолированы от публичного фронтенда, что защищает их от распространенных уязвимостей.
  • Масштабируемость: Развернутые на Vercel статические сайты легко масштабируются благодаря глобальной сети доставки контента (CDN). Сайт выдержит любые пиковые нагрузки, поскольку контент раздается из ближайшей к пользователю географической точки.
  • Превосходный опыт разработки (Developer Experience): Разработчики могут использовать современные инструменты экосистемы JavaScript, такие как React, Next.js, и удобную систему контроля версий Git. Это ускоряет разработку и упрощает командную работу.
  • Гибкость: WordPress может служить источником данных для нескольких платформ одновременно: веб-сайта, мобильного приложения, IoT-устройств и так далее. Вы не привязаны к одной системе отображения.

Пошаговое руководство по настройке

Рассмотрим процесс создания и развертывания headless-сайта с нуля.

Шаг 1: Настройка WordPress

Для начала вам понадобится работающий сайт на WordPress. Вы можете использовать любой хостинг или развернуть его локально.

  1. Установите WordPress. Если у вас еще нет сайта, установите свежую версию WordPress.
  2. Установите необходимые плагины. Для организации GraphQL API нам понадобятся два ключевых плагина:
    • WPGraphQL: Основной плагин, который создает конечную точку GraphQL API для вашего WordPress-сайта. После его активации ваш API будет доступен по адресу ваш-сайт.com/graphql.
    • WPGatsby (опционально, но рекомендуется): Несмотря на название, этот плагин полезен и для Next.js. Он добавляет несколько важных функций, таких как отслеживание изменений контента для более эффективного обновления, и улучшает интеграцию с Jamstack-фреймворками.
  3. Проверьте работу API. Перейдите в админ-панели WordPress в раздел «GraphQL» -> «GraphiQL IDE». Это интерактивная среда, где вы можете тестировать запросы к своему API и видеть доступные данные.

Шаг 2: Создание проекта Next.js

Next.js предоставляет готовый шаблон для быстрой интеграции с WordPress.

  1. Инициализируйте проект. Откройте терминал и выполните следующую команду, заменив my-wordpress-app на название вашего проекта:
    npx create-next-app --example cms-wordpress my-wordpress-app
  2. Перейдите в папку проекта:
    cd my-wordpress-app
  3. Настройте переменные окружения. Создайте в корне проекта файл с именем .env.local и добавьте в него URL вашего GraphQL API:
    WORDPRESS_API_URL=https://ваш-сайт.com/graphql
    Этот файл используется для хранения секретных ключей и URL, и его не следует добавлять в систему контроля версий (он уже включен в .gitignore).

Шаг 3: Получение данных из WordPress

Шаблон проекта уже содержит примеры получения и отображения данных. Основная логика получения данных находится в файлах внутри папки pages и использует функцию getStaticProps.

Например, для получения списка постов используется GraphQL-запрос, который выполняется на стороне сервера во время сборки проекта. Вот упрощенный пример кода со страницы pages/index.js:

import { getPostsForHome } from '../lib/api';

export default function Index({ allPosts: { edges } }) {
  // Код для отображения постов
}

export async function getStaticProps() {
  const allPosts = await getPostsForHome();
  return {
    props: { allPosts },
    revalidate: 10, // Включает ISR, пересборка страницы раз в 10 секунд
  };
}

Функция getPostsForHome из файла lib/api.js отправляет запрос к вашему WordPress API, получает данные и передает их в виде props на страницу для рендеринга.

Шаг 4: Развертывание на Vercel

Vercel — это идеальная платформа для развертывания Next.js проектов.

  1. Загрузите проект на GitHub/GitLab/Bitbucket. Инициализируйте Git-репозиторий в папке вашего проекта и загрузите код на одну из этих платформ.
  2. Импортируйте проект в Vercel. Зарегистрируйтесь на Vercel, используя свой GitHub/GitLab/Bitbucket аккаунт. Нажмите «New Project» и выберите ваш репозиторий. Vercel автоматически определит, что это проект на Next.js.
  3. Настройте переменные окружения. В настройках проекта Vercel перейдите в раздел «Environment Variables» и добавьте переменную WORDPRESS_API_URL со значением URL вашего GraphQL API.
  4. Запустите развертывание. Нажмите кнопку «Deploy». Vercel соберет ваш проект и развернет его в своей глобальной сети. После этого каждое изменение, отправленное в основную ветку вашего Git-репозитория, будет автоматически запускать новую сборку и развертывание.

Получаем преимущества Edge Cache

Edge Cache — это технология кэширования контента на граничных серверах (Edge), расположенных географически близко к конечным пользователям. В контексте JAMstack и Next.js это означает, что статически сгенерированные страницы и данные распределяются по глобальной сети серверов, обеспечивая максимально быструю доставку контента.

  • Edge Cache реплицирует контент на граничные серверы — статические страницы Next.js автоматически распространяются по глобальной сети серверов, расположенных близко к пользователям
  • Минимальная задержка доставки — контент отдается с ближайшего сервера вместо централизованного, что снижает время отклика
  • Автоматическая масштабируемость — система справляется с любым объемом трафика без перегрузки origin-сервера
  • Высокая отказоустойчивость — если один сервер выходит из строя, контент продолжает отдаваться с других узлов
  • Снижение нагрузки на бэкенд — большинство запросов обслуживается из кэша, что экономит ресурсы WordPress сервера
  • ISR обновляет контент без редеплоя — измененные страницы регенерируются и распространяются по Edge глобально менее чем за 500 мс
  • Улучшение SEO и UX — быстрая загрузка улучшает Core Web Vitals, ранжирование и снижает показатель отказов
  • Идеальная совместимость с JAMstack — предварительно сгенерированный статический контент легко кэшируется и безопасно обслуживается через Edge

Продвинутые возможности и рекомендации

  • Инкрементальная статическая регенерация (ISR): Используя параметр revalidate в getStaticProps, вы можете настроить автоматическое обновление страниц в фоновом режиме. Это идеально подходит для блогов или новостных сайтов, где контент обновляется, но не требует мгновенного отображения.
  • Пользовательские типы записей и ACF: Если вы используете плагины вроде Advanced Custom Fields (ACF) или создаете собственные типы записей (Custom Post Types), вам понадобятся дополнительные плагины для WPGraphQL, чтобы эти данные стали доступны через API. Популярным решением является WPGraphQL for Advanced Custom Fields.

Заключение

Переход на Headless-архитектуру с WordPress, Next.js и Vercel — это мощный шаг к созданию современных, невероятно быстрых веб-сайтов. Вы сохраняете удобство лучшей в мире CMS для управления контентом и одновременно получаете все преимущества передовой Jamstack-экосистемы. Хотя начальная настройка может показаться сложнее, чем запуск стандартной WordPress-темы, итоговые выгоды в производительности, безопасности и гибкости разработки многократно окупают затраченные усилия.

Ещё почитать