WordPress Headless + Next.js : guide pratique complet (2026)

WordPress Headless est l’architecture où WordPress ne gère que le contenu (back-end), et Next.js se charge de l’affichage (front-end). Le résultat : des performances de site statique avec la puissance du CMS WordPress. Voici comment l’implémenter concrètement.

Pourquoi une architecture Headless ?

L’architecture traditionnelle WordPress est “monolithique” : PHP génère le HTML côté serveur à chaque requête. L’architecture headless sépare les responsabilités : WordPress stocke et expose le contenu via l’API REST ou GraphQL, Next.js génère des pages statiques (SSG) ou serveur (SSR) ultra-rapides. Avantages : performances exceptionnelles (pages servies depuis un CDN), sécurité accrue (WordPress n’est pas exposé publiquement), liberté totale sur le front-end.

Quand choisir WordPress Headless ?

Le headless n’est pas toujours la bonne réponse. C’est pertinent si : vous avez une équipe front-end React/Next.js, vos performances actuelles sont critiques pour le business, vous avez besoin d’une expérience utilisateur très interactive (SPA), ou vous alimentez plusieurs canaux (web, app mobile, PWA) depuis un seul CMS.

C’est probablement excessif si : votre site est un simple blog ou vitrine, votre équipe ne maîtrise pas JavaScript moderne, ou votre budget ne permet pas de maintenir deux applications distinctes.

Configurer WordPress comme back-end headless

Installez WordPress normalement. Activez l’API REST (elle l’est par défaut). Pour de meilleures performances et des requêtes plus flexibles, installez WPGraphQL — il expose votre contenu via GraphQL plutôt que REST, ce qui permet de demander exactement les champs dont vous avez besoin.

Configurez CORS pour autoriser les requêtes depuis votre domaine Next.js. Dans functions.php :

add_action('init', function() {
    header('Access-Control-Allow-Origin: https://votre-site-nextjs.fr');
    header('Access-Control-Allow-Methods: GET, POST, OPTIONS');
});

Créer le front-end Next.js

Dans votre projet Next.js, créez une fonction pour récupérer les articles depuis l’API WordPress :

async function getPosts() {
  const res = await fetch('https://cms.votre-site.fr/wp-json/wp/v2/posts?per_page=10&_embed', {
    next: { revalidate: 3600 } // ISR: revalidation toutes les heures
  });
  return res.json();
}

export default async function BlogPage() {
  const posts = await getPosts();
  return (
    <main>
      {posts.map(post => (
        <article key={post.id}>
          <h2 dangerouslySetInnerHTML={{ __html: post.title.rendered }} />
        </article>
      ))}
    </main>
  );
}

Génération statique des articles (SSG + ISR)

Pour chaque article WordPress, Next.js génère une page statique. Avec l’ISR (Incremental Static Regeneration), les pages sont régénérées automatiquement quand le contenu WordPress change, sans rebuild complet. C’est le meilleur compromis entre performances statiques et contenu dynamique.

export async function generateStaticParams() {
  const posts = await fetch('https://cms.votre-site.fr/wp-json/wp/v2/posts?per_page=100').then(r => r.json());
  return posts.map(post => ({ slug: post.slug }));
}

Gérer l’aperçu (preview mode)

Le preview mode Next.js permet aux rédacteurs de voir leurs articles WordPress en cours de rédaction avant publication. Configurez un webhook WordPress qui déclenche le Draft Preview de Next.js — c’est l’un des points d’intégration les plus délicats de l’architecture headless.

Les limites du headless WordPress

Ce n’est pas parfait : le formulaire de commentaires WordPress ne fonctionne plus nativement, la recherche native WordPress ne s’intègre pas facilement (utilisez Algolia ou une API de recherche tierce), et les plugins WordPress qui génèrent du shortcode HTML ne s’intègrent pas bien avec Next.js. L’architecture headless demande une maturité technique que les projets simples n’ont pas besoin d’assumer.

Besoin d’un expert ? Développeur Next.js Paris →

Questions fréquentes

Qu’est-ce qu’un WordPress headless ?

Un WordPress headless utilise WordPress uniquement comme back-end (gestion de contenu via l’interface admin et l’API REST) tandis que le front-end est développé avec un framework JavaScript comme Next.js ou Nuxt. L’éditeur WordPress reste familier pour les équipes éditoriales, mais le rendu est géré par le framework, ce qui permet des performances et une flexibilité front-end bien supérieures.

Quand WordPress headless + Next.js vaut-il le surcoût ?

L’architecture headless se justifie quand : vous avez besoin de performances front-end maximales (LCP < 1s), vous développez plusieurs front-ends sur le même contenu (web + app mobile), vous avez une équipe éditoriale habituée à WordPress qui ne veut pas changer d'outil. Pour un site vitrine simple, WordPress natif suffira et coûtera moins cher.

Peut-on faire du e-commerce en WordPress headless ?

Oui avec WooCommerce headless (API REST ou GraphQL via WPGraphQL). C’est plus complexe à développer qu’un WooCommerce classique mais permet un front-end Next.js ultra-performant. Alternative : utiliser WordPress/WooCommerce headless pour le back-office et Next.js + Stripe pour le paiement, en contournant le rendu WooCommerce.