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

Веб-разработка не стоит на месте, и Next.js 14 с его App Router и Server Components позволяет создавать ещё более производительные и удобные сайты. В этой статье разберём, как подключить WordPress в качестве headless CMS, используя REST API, с кешированием данных и минимальным клиентским кодом.

Почему Next.js 14 + WordPress — идеальное сочетание?

Плюсы WordPress как бэкенда:

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

Плюсы Next.js 14 как фронтенда:

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

Настройка Next.js 14 + WordPress REST API

1. Создаём проект Next.js

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

2. Получаем данные из WordPress с кешированием

Next.js 14 автоматически кеширует fetch-запросы (по умолчанию cache: 'force-cache').

Пример получения постов (app/blog/page.js):

export default async function BlogPage() {
  const posts = await fetch("https://ваш-сайт.ru/wp-json/wp/v2/posts", {
    next: { revalidate: 60 }, // ISR: обновление каждые 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. Динамические страницы постов (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 в fetch обновляет данные по расписанию (Incremental Static Regeneration).

2. Минимум клиентского JS

Благодаря Server Components, HTML рендерится на сервере, уменьшая размер клиентского кода.

3. Кеширование запросов

• fetch в Next.js 14 кешируется автоматически (force-cache).
• Можно управлять поведением через next: { revalidate, tags }.

Вывод: новый сайт на Next.js без потери данных WordPress

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

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

🚀 Готовы к миграции? Обращайтесь ко мне, и ваш сайт станет в разы быстрее!