CMS WordPress découplé avec Next.js, ACF et architecture de composants réutilisables

Nous avons construit une architecture WordPress découplée + Next.js en utilisant Advanced Custom Fields (ACF) comme couche flexible de modélisation de contenu, un système de composants réutilisables sur le frontend, et une optimisation SEO automatisée à tous les niveaux.

Architecture

• CMS : WordPress (headless) avec ACF Pro pour la modélisation de contenu structuré
• Couche API : WPGraphQL + WPGraphQL pour ACF afin d'exposer du contenu typé via GraphQL
• Frontend : Next.js avec App Router, React Server Components, TypeScript
• Style : Tailwind CSS pour un style axé sur les utilitaires et aligné sur le système de design
• SEO : Next.js Metadata API, données structurées JSON-LD, génération automatique de sitemap
• Hébergement : Vercel (frontend) + hébergement WordPress géré (CMS)
• Médias : Optimisation d'images Next.js avec la médiathèque WordPress comme source

Modélisation de contenu avec ACF

Champs de contenu flexibles

Les champs ACF Flexible Content permettent aux éditeurs de composer des pages à partir de blocs de contenu prédéfinis. Chaque bloc correspond directement à un composant React sur le frontend, couvrant des modèles courants tels que les sections hero, les grilles de fonctionnalités, les carrousels de témoignages, les CTAs, les accordéons FAQ, les compteurs de statistiques, les mises en page image-texte, les intégrations vidéo, les tableaux de prix et les flux de blog.

Champs Répétition et Groupe

• Champs Répétition pour les listes (membres d'équipe, éléments de portfolio, entrées de chronologie)
• Champs Groupe pour les données imbriquées structurées (blocs d'adresse, liens sociaux, surcharges SEO)
• Champs Relation pour lier des articles, des pages et des types de publication personnalisés
• Pages d'options pour les paramètres globaux (en-tête, pied de page, liens sociaux, couleurs de marque)

Architecture de composants réutilisables

Principes de conception des composants

Le frontend suit une architecture modulaire avec des couches distinctes :

• Composants de bloc — Un composant React par bloc ACF Flexible Content
• Composants UI primitifs — Éléments réutilisables comme les boutons, les cartes et les badges
• Composants de mise en page — En-tête, pied de page, navigation et conteneurs d'encapsulage
• Composants SEO — Générateurs de schéma et utilitaires de balises meta

Modèle de résolveur de blocs

Un résolveur centralise le mappage des types de blocs ACF aux composants React, permettant aux éditeurs de composer des pages sans intervention de développeur :

1. L'éditeur WordPress sélectionne les blocs dans un menu déroulant et remplit les champs
2. WPGraphQL expose la page sous forme de JSON structuré avec les types de blocs et les données de champ
3. Next.js récupère les données de la page au moment de la construction (ISR) ou de la requête (SSR)
4. Le résolveur de blocs itère sur le tableau de blocs et rend le composant React correspondant
5. Chaque composant reçoit ses données de champ ACF sous forme de props typées

Optimisation SEO

SEO technique

• Balises meta dynamiques — Balises titre, description, Open Graph et Twitter Card générées par page à partir des données du CMS
• URLs canoniques — Génération automatique de balises canoniques pour éviter le contenu dupliqué
• Génération de Sitemap — Sitemap XML dynamique construit à partir des données de page/article WordPress au moment de la construction
• robots.txt — Génération programmatique avec des règles adaptées à l'environnement
• Données structurées — Schéma JSON-LD pour les types Organization, Article, FAQ, BreadcrumbList et Product

Performance SEO (Core Web Vitals)

• Génération statique (ISR) — Pages pré-rendues et revalidées lors des changements de contenu via webhook
• Optimisation des images — Conversion automatique WebP/AVIF, lazy loading, srcset responsif
• Optimisation des polices — Chargement de polices personnalisées sans décalage de mise en page
• Fractionnement de code (Code Splitting) — Fractionnement de code automatique par route avec React Server Components
• Mise en cache en périphérie (Edge Caching) — Réseau de périphérie global pour un TTFB inférieur à 100 ms

SEO du contenu

• Champs SEO par page — Titre meta, description et surcharge d'image OG via des champs personnalisés
• Fil d'Ariane (Breadcrumbs) — Navigation fil d'Ariane auto-générée avec balisage de schéma
• Liaison interne — Les champs de relation permettent des suggestions de liens internes structurés
• Application du texte alternatif — Texte alternatif requis sur tous les champs d'image

Flux de données de WordPress vers Next.js

1. Changement de contenu — L'éditeur publie ou met à jour le contenu dans l'administration WordPress
2. Déclenchement du webhook — WordPress déclenche un webhook vers le point de terminaison de revalidation Next.js
3. Revalidation ISR — Next.js régénère uniquement les pages affectées
4. Invalidation CDN — Les pages mises à jour sont servies depuis le réseau de périphérie en quelques secondes après la publication

Fonctionnalités clés

1. Constructeur de pages visuel — Les éditeurs composent des pages à partir de blocs ACF sans toucher au code
2. API de contenu typée — WPGraphQL + ACF fournit un schéma GraphQL entièrement typé
3. Bibliothèque de composants — Plus de 10 blocs réutilisables couvrant tous les modèles courants de pages marketing
4. ISR + Webhooks — Les mises à jour de contenu sont reflétées sur le site en direct en quelques secondes
5. Automatisation SEO — Données structurées, sitemaps et balises meta générées à partir des données du CMS
6. Core Web Vitals — Images, polices et fractionnement de code optimisés pour les meilleurs scores Lighthouse
7. Mode prévisualisation — Le bouton de prévisualisation WordPress affiche le contenu brouillon dans le frontend Next.js
8. Prêt pour le multilingue — Intégration ACF + WPML/Polylang pour du contenu internationalisé