Интеграция Next.js с WordPress

Веб-разработка развивается стремительно, и связка Next.js 14 + WordPress становится одним из самых удобных решений для создания быстрых и SEO-дружественных сайтов. Благодаря App Router, Server Components и встроенному кешированию, можно получить мощный фронтенд, сохранив привычную админку WordPress.

В этой статье разберём, как интегрировать WordPress через REST API, настроить кеширование и минимизировать количество клиентского кода.

Почему стоит выбрать Next.js 14 + WordPress?

Преимущества WordPress как headless CMS

• ✅ Интуитивная админка для управления контентом
• ✅ Гибкая структура (посты, страницы, таксономии, ACF)
• ✅ Огромное сообщество и готовые плагины

Преимущества Next.js 14 как фронтенда

• ⚡ Встроенное кеширование (fetch cache, ISR)
• 🚀 Server Components → меньше клиентского JS, быстрая загрузка
• 📈 Отличное SEO благодаря SSR и статической генерации
• 💡 App Router с удобной файловой маршрутизацией

Настройка интеграции Next.js 14 + WordPress REST API

1. Создание проекта

npx create-next-app@latest wp-next-app
cd wp-next-app

2. Получение постов из WordPress

Next.js 14 кеширует fetch по умолчанию (cache: "force-cache"). Для ISR используем revalidate:

// app/blog/page.js
export default async function BlogPage() {
  const posts = await fetch("https://ваш-сайт.ru/wp-json/wp/v2/posts", {
    next: { revalidate: 60 }, // обновление каждые 60 секунд
  }).then((res) => res.json());

  return (
    <div>
      <h1>Блог</h1>
      {posts.map((post) => (
        <article key={post.id}>
          <h2>{post.title.rendered}</h2>
          <div dangerouslySetInnerHTML={{ __html: post.content.rendered }} />
        </article>
      ))}
    </div>
  );
}

3. Динамические страницы постов

Используем generateStaticParams для генерации статических маршрутов:

// app/posts/[id]/page.js
export async function generateStaticParams() {
  const posts = await fetch("https://ваш-сайт.ru/wp-json/wp/v2/posts").then(
    (res) => res.json()
  );
  return posts.map((post) => ({ id: post.id.toString() }));
}

export default async function PostPage({ params }) {
  const post = await fetch(
    `https://ваш-сайт.ru/wp-json/wp/v2/posts/${params.id}`,
    {
      next: { revalidate: 60 },
    }
  ).then((res) => res.json());

  return (
    <article>
      <h1>{post.title.rendered}</h1>
      <div dangerouslySetInnerHTML={{ __html: post.content.rendered }} />
    </article>
  );
}

Оптимизация и кеширование

1. SSG + ISR
   • generateStaticParams формирует маршруты при сборке.
   • revalidate обновляет данные по расписанию.
2. Минимум клиентского JS
   • Используем Server Components → меньше кода в бандле.
3. Гибкое кеширование запросов
   • fetch кешируется автоматически.
   • Поведение настраивается через next: { revalidate, tags }.

Итог

Используя Next.js 14 с App Router и WordPress REST API, можно получить:
✔ Ультрабыстрый сайт с современным фронтендом.
✔ Полный контроль контента через WordPress.
✔ Оптимизированное SEO и минимальный клиентский код.
✔ Сниженную нагрузку на сервер за счёт кеширования.

Такой подход идеально подходит для тех, кто хочет ускорить WordPress-сайт, не теряя удобства CMS.

🚀 Планируете миграцию на Next.js? Давайте сделаем ваш сайт быстрее и современнее!