WordPress headless + Next.js : le plan de bataille pour 2026

Ce que signifie headless

Dans une architecture headless, WordPress reste l’endroit où les éditeurs écrivent et gèrent le contenu, mais il ne génère plus le site public. Un front-end séparé — ici Next.js — récupère le contenu via l’API REST de WordPress ou WPGraphQL et construit les pages.

Les avantages sont la vitesse, la sécurité (l’administration WordPress peut rester sur une adresse privée), la liberté de design et la possibilité d’envoyer le même contenu vers un site, des applications et d’autres canaux. Les coûts : deux systèmes à héberger et maintenir, et des fonctions normalement fournies par les thèmes et extensions WordPress à reconstruire côté front-end.

Quand cela vaut le coup

• Grands sites de contenu et éditeurs pour qui la vitesse et l’échelle comptent.
• Marques qui ont besoin d’un front-end très sur mesure, proche d’une application.
• Contenu partagé entre site web, applications mobiles et autres canaux.
• Équipes qui disposent déjà de développeurs React ou Next.js.

Pour un site vitrine ou une petite entreprise avec quelques pages, un thème WordPress classique bien construit est généralement moins cher et tout aussi rapide.

Rendu : des pages statiques toujours à jour

Générez les pages de façon statique et servez-les depuis un CDN pour que les visiteurs reçoivent le HTML instantanément. Au lieu de reconstruire tout le site, utilisez la revalidation à la demande : quand un éditeur publie ou met à jour un article, un petit hook WordPress appelle un point d’accès secret de Next.js qui revalide uniquement les pages ou étiquettes concernées. Le contenu est en ligne en quelques secondes et les pages restent rapides.

// app/api/revalidate/route.js — called by WordPress on publish
import { revalidateTag } from 'next/cache';

export async function POST(request) {
  const { secret, tag } = await request.json();
  if (secret !== process.env.REVALIDATE_SECRET) {
    return Response.json({ ok: false }, { status: 401 });
  }
  revalidateTag(tag);
  return Response.json({ ok: true });
}

Des aperçus pour les éditeurs

Les éditeurs s’attendent à ce que le bouton Aperçu fonctionne. Utilisez le draft mode de Next.js : WordPress renvoie vers une route d’aperçu avec un secret et l’identifiant de l’article, la route active le draft mode et la page récupère la dernière révision via une requête authentifiée (par exemple avec un mot de passe d’application ou un jeton). Testez les aperçus des articles non publiés, programmés et des pages avec champs personnalisés.

Le SEO dans un projet headless

• Exposez via l’API les champs de l’extension SEO (titre, description, canonical, image sociale, schema) et affichez-les dans les métadonnées Next.js.
• Générez le sitemap et le robots.txt depuis le front-end à partir du contenu WordPress.
• Gérez les redirections dans WordPress et synchronisez-les avec le front-end pour que les éditeurs gardent la main.
• Conservez les mêmes URL lors d’une migration, ou redirigez chaque ancienne URL.

Images, formulaires et recherche

Servez les médias WordPress via l’optimisation d’images de Next.js ou un CDN d’images, en autorisant le domaine des médias WordPress dans la configuration. Les formulaires ont besoin d’un point d’arrivée : envoyez-les à une route Next.js qui valide et transmet à votre CRM ou par e-mail, ou utilisez l’API d’une extension de formulaires. La recherche du site passe généralement par un service dédié ou un simple point d’API, car la page de recherche du thème n’existe plus.

Les pièges que nous anticipons

• Les constructeurs de pages stockent la mise en page sous forme de shortcodes ou de balisage propriétaire difficile à afficher ailleurs ; préférez les blocs Gutenberg ou les champs personnalisés.
• Menus, widgets et fonctions d’extensions dépendant du thème ont besoin d’équivalents dans l’API.
• Verrouillez l’administration WordPress et désactivez le thème public pour éviter le contenu dupliqué.
• Le contenu multilingue nécessite une extension compatible API et une stratégie d’URL claire dans Next.js.

Une check-list avant de commencer

Mettez-vous d’accord sur le modèle de contenu (types de contenus, champs, blocs), le fonctionnement des aperçus et de la publication, l’emplacement des redirections et des champs SEO, la gestion des formulaires et de la recherche, et qui héberge et surveille chaque moitié. Ces décisions prises en amont, WordPress headless offre aux éditeurs l’outil qu’ils connaissent et aux visiteurs un site rapide partout.