Headless WordPress CMS з Next.js, ACF та багаторазовою компонентною архітектурою

Ми створили headless WordPress + Next.js архітектуру, використовуючи Advanced Custom Fields (ACF) як гнучкий шар для моделювання контенту, багаторазову компонентну систему на фронтенді та автоматизовану оптимізацію SEO.

Архітектура

• CMS: WordPress (headless) з ACF Pro для моделювання структурованого контенту
• Шар API: WPGraphQL + WPGraphQL for ACF для надання типованого контенту через GraphQL
• Фронтенд: Next.js з App Router, React Server Components, TypeScript
• Стилізація: Tailwind CSS для стилізації за принципом "utility-first", узгодженої з дизайн-системою
• SEO: Next.js Metadata API, структуровані дані JSON-LD, автоматична генерація карти сайту
• Хостинг: Vercel (фронтенд) + керований WordPress хостинг (CMS)
• Медіа: Next.js Image optimization з бібліотекою медіа WordPress як джерелом

Моделювання контенту за допомогою ACF

Поля гнучкого контенту

Поля гнучкого контенту ACF дозволяють редакторам компонувати сторінки з попередньо визначених блоків контенту. Кожен блок безпосередньо відображається на React компоненті на фронтенді, охоплюючи поширені шаблони, такі як секції-герої, сітки функцій, каруселі відгуків, CTA, FAQ-акордеони, лічильники статистики, макети зображення-текст, вбудовані відео, таблиці цін та стрічки блогів.

Поля Repeater та Group

• Поля Repeater для списків (члени команди, елементи портфоліо, записи хронології)
• Поля Group для структурованих вкладених даних (блоки адрес, посилання на соцмережі, перевизначення SEO)
• Поля Relationship для зв'язування дописів, сторінок та користувацьких типів дописів
• Сторінки Options для глобальних налаштувань (шапка, підвал, посилання на соцмережі, кольори бренду)

Багаторазова компонентна архітектура

Принципи дизайну компонентів

Фронтенд слідує модульній архітектурі з окремими шарами:

• Компоненти блоків — Один React компонент на один блок гнучкого контенту ACF
• Примітивні компоненти UI — Багаторазові елементи, такі як кнопки, картки та бейджи
• Компоненти макета — Шапка, підвал, навігація та обгортки контейнерів
• Компоненти SEO — Генератори схем та утиліти метатегів

Шаблон Block Resolver

Центральний розв'язувач (resolver) зіставляє типи блоків ACF з React компонентами, дозволяючи редакторам компонувати сторінки без залучення розробників:

1. Редактор WordPress обирає блоки зі спадного списку та заповнює поля
2. WPGraphQL надає сторінку у вигляді структурованого JSON з типами блоків та даними полів
3. Next.js отримує дані сторінки під час збірки (ISR) або за запитом (SSR)
4. Block resolver ітерує масивом блоків та рендерить відповідний React компонент
5. Кожен компонент отримує свої дані полів ACF як типовані пропси

SEO-оптимізація

Технічне SEO

• Динамічні метатеги — Теги Title, description, Open Graph та Twitter Card генеруються для кожної сторінки з даних CMS
• Канонічні URL — Автоматична генерація канонічних тегів для запобігання дублюванню контенту
• Генерація карти сайту — Динамічна XML-карта сайту, побудована з даних сторінок/дописів WordPress під час збірки
• robots.txt — Програмна генерація з правилами, що враховують середовище
• Структуровані дані — JSON-LD схема для типів Organization, Article, FAQ, BreadcrumbList та Product

SEO продуктивності (Core Web Vitals)

• Статична генерація (ISR) — Сторінки попередньо рендеряться та ревалідуються при зміні контенту через webhook
• Оптимізація зображень — Автоматична конвертація WebP/AVIF, відкладене завантаження (lazy loading), адаптивний srcset
• Оптимізація шрифтів — Завантаження користувацьких шрифтів без зсуву макета
• Розділення коду — Автоматичне розділення коду за маршрутами за допомогою React Server Components
• Кешування на периферії — Глобальна периферійна мережа для TTFB менше 100 мс

Контентне SEO

• Поля SEO для кожної сторінки — Перевизначення метазаголовка, опису та зображення OG через користувацькі поля
• Хлібні крихти — Автоматично генерована навігація з хлібними крихтами зі схемною розміткою
• Внутрішнє посилання — Поля Relationship дозволяють структурувати пропозиції внутрішніх посилань
• Вимога Alt Text — Обов'язковий альтернативний текст для всіх полів зображень

Потік даних WordPress-Next.js

1. Зміна контенту — Редактор публікує або оновлює контент в адмінці WordPress
2. Тригер Webhook — WordPress надсилає webhook до точки ревалідації Next.js
3. Ревалідація ISR — Next.js перегенерує лише зачеплені сторінки
4. Анулювання CDN — Оновлені сторінки подаються з периферії протягом секунд після публікації

Ключові особливості

1. Візуальний конструктор сторінок — Редактори компонують сторінки з блоків ACF без написання коду
2. Типований API контенту — WPGraphQL + ACF надає повністю типовану GraphQL схему
3. Бібліотека компонентів — 10+ багаторазових блоків, що охоплюють усі поширені шаблони маркетингових сторінок
4. ISR + Webhooks — Оновлення контенту відображаються на живому сайті протягом секунд
5. Автоматизація SEO — Структуровані дані, карти сайту та метатеги генеруються з даних CMS
6. Core Web Vitals — Оптимізовані зображення, шрифти та розділення коду для найвищих оцінок Lighthouse
7. Режим попереднього перегляду — Кнопка попереднього перегляду WordPress показує чернетковий контент у Next.js фронтенді
8. Готовий до багатомовності — Інтеграція ACF + WPML/Polylang для інтернаціоналізованого контенту