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

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

Архітектура

• CMS: WordPress (безголовий) з 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-акордеони, лічильники статистики, макети зображення-тексту, вбудовані відео, таблиці цін та стрічки блогів.

Поля-повторювачі та групові поля

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

Архітектура багаторазових компонентів

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

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

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

Паттерн розв'язання блоків

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

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

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 через користувацькі поля
• Навігаційні ланцюжки (хлібні крихти) — Автоматично генерована навігація з розміткою схеми
• Внутрішнє посилання — Поля зв'язків дозволяють пропонувати структуровані внутрішні посилання
• Примусове використання Alt Text — Обов'язковий атрибут alt text для всіх полів зображень

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

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

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

1. Візуальний конструктор сторінок — Редактори створюють сторінки з блоків ACF, не торкаючись коду
2. Типізований Content 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 для інтернаціоналізованого контенту