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 de modélisation de contenu flexible, un système de composants réutilisables sur le frontend et une optimisation SEO automatisée tout au long du processus.

Architecture

• CMS: WordPress (découplé) avec ACF Pro pour la modélisation de contenu structuré
• Couche API: WPGraphQL + WPGraphQL for ACF pour exposer du contenu typé via GraphQL
• Frontend: Next.js avec App Router, React Server Components, TypeScript
• Stylisation: Tailwind CSS pour une stylisation axée sur l'utilité, alignée sur le système de design
• SEO: API de métadonnées Next.js, 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 bibliothèque de médias WordPress comme source

Modélisation de contenu avec ACF

Champs de contenu flexible

Les champs de contenu flexible ACF 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 d'en-tête, les grilles de fonctionnalités, les carrousels de témoignages, les CTA, 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éteur & Groupe

• Champs répéteurs pour les listes (membres de l'équipe, éléments de portfolio, entrées de chronologie)
• Champs de groupe pour les données imbriquées structurées (blocs d'adresse, liens sociaux, surcharges SEO)
• Champs de 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 de contenu flexible ACF
• Composants d'interface utilisateur (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 enveloppants
• Composants SEO — Générateurs de schémas et utilitaires de balises meta

Modèle de résolveur de blocs

Un résolveur central mappe les 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 depuis 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 des champs
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 comme des props typées

Optimisation SEO

SEO technique

• Balises meta dynamiques — Balises Title, description, Open Graph et Twitter Card générées par page à partir des données du CMS
• URL 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 sensibles à l'environnement
• Données structurées — Schéma JSON-LD pour les types Organization, Article, FAQ, BreadcrumbList et Product

SEO de performance (Core Web Vitals)

• Génération statique (ISR) — Pages pré-rendues et revalidées lors d'un changement de contenu via webhook
• Optimisation d'images — Conversion automatique WebP/AVIF, chargement paresseux (lazy loading), srcset adaptatif
• Optimisation des polices — Chargement de polices personnalisées sans décalage de mise en page
• Séparation du code (Code Splitting) — Séparation automatique du code par route avec les 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 de contenu

• Champs SEO par page — Surcharge du titre meta, de la description et de l'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
• Liens internes — Les champs de relation permettent des suggestions de liens internes structurés
• Application du texte alternatif (Alt Text) — 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éclencheur de Webhook — WordPress déclenche un webhook vers le point de terminaison de revalidation Next.js
3. Revalidation ISR — Next.js ne régénère que les pages affectées
4. Invalidation CDN — Les pages mises à jour sont servies depuis la périphérie 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 séparation du 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 multi-langue — Intégration ACF + WPML/Polylang pour le contenu internationalisé