Créer un site Headless avec WordPress et Next.js

12 mai 2025

Wordpress

Next.js

Headless

🎯 Pourquoi choisir un WordPress headless avec Next.js ?

⚡ Performance et SEO
Next.js permet de pré-générer les pages en HTML statique ou via Incremental Static Regeneration (ISR), ce qui réduit drastiquement les temps de chargement. Résultat : un site plus rapide, une meilleure expérience utilisateur et un SEO optimisé.
🔒 Sécurité renforcée
L’interface d’administration WordPress (wp-admin) reste inaccessible depuis le front-end. Cela réduit la surface d’attaque et protège le CMS contre les tentatives de piratage.
🎨 Flexibilité de design
Fini les limitations des thèmes WordPress en PHP. Avec React et Next.js, vous créez des interfaces 100 % sur mesure, modernes, responsives et interactives.
📈 Scalabilité
Vous séparez le front-end du back-end : par exemple, Next.js hébergé sur Vercel ou Netlify, et WordPress sur un hébergement optimisé. Cela facilite la montée en charge et permet une gestion plus souple des ressources.

🔗 Connecter Next.js à WordPress

1. 🌀 REST API native

Point d’accès : https://votre-site.com/wp-json/wp/v2/posts
Aucune extension nécessaire, parfait pour un démarrage rapide.

2. 🌐 WPGraphQL (optionnel)

Plus de contrôle sur les requêtes et les données exposées.
Installez WPGraphQL pour bénéficier d’une API GraphQL performante et bien documentée.

🧩 Exemple de mise en œuvre simple

Pour nextJs `/pages` : // pages-index.tsx —

TSX

function getStaticProps() {
  const res = await fetch('https://votre-site.com/wp-json/wp/v2/posts');
  const posts = await res.json();

  return {
    props: { posts },
    revalidate: 120, // ISR : régénération toutes les 2 minutes
  };
}

function Home({ posts }) {
  return (    
      {posts.map(post => (        
          {post.title.rendered}
      ))}    
  );
}

Tsx

function getStaticProps() {
  const res = await fetch('https://votre-site.com/wp-json/wp/v2/posts');
  const posts = await res.json();

  return {
    props: { posts },
    revalidate: 120, // ISR : régénération toutes les 2 minutes
  };
}

function Home({ posts }) {
  return (    
      {posts.map(post => (        
          {post.title.rendered}
      ))}    
  );
}

Pour nextJs `/app` : // app-route-page.tsx —

TSX

async function Home() {
  const res = await fetch('https://votre-site.com/wp-json/wp/v2/posts', {
    next: { revalidate: 120 } // ISR automatique (rebuild toutes les 2 minutes)
  });
  const posts = await res.json();

  return (
    <main>
      {posts.map(post => (
        <article key={post.id}>
          <h2 dangerouslySetInnerHTML={{ __html: post.title.rendered }} />
          <div dangerouslySetInnerHTML={{ __html: post.excerpt.rendered }} />
        </article>
      ))}
    </main>
  );
}

Tsx

async function Home() {
  const res = await fetch('https://votre-site.com/wp-json/wp/v2/posts', {
    next: { revalidate: 120 } // ISR automatique (rebuild toutes les 2 minutes)
  });
  const posts = await res.json();

  return (
    <main>
      {posts.map(post => (
        <article key={post.id}>
          <h2 dangerouslySetInnerHTML={{ __html: post.title.rendered }} />
          <div dangerouslySetInnerHTML={{ __html: post.excerpt.rendered }} />
        </article>
      ))}
    </main>
  );
}

👉 Cette approche permet un rendu statique ultra-rapide, avec des mises à jour automatiques toutes les 2 minutes (ISR).

✨ Avantages pour le propriétaire du site

👨‍💻 Expérience utilisateur fluide : transitions rapides, sans « flash » de rechargement.
🔄 Déploiement autonome : le front-end évolue indépendamment du CMS, sans interruption de service.
📱 Compatibilité mobile optimale : React + Next.js garantissent un rendu performant sur tous les appareils.

🧰 Plugins et outils recommandés

🕸️ WPGraphQL : pour des requêtes GraphQL flexibles.
🔐 JWT Auth ou Application Passwords : pour sécuriser les appels API.
🛠️ ACF + ACF to REST API : pour exposer vos champs personnalisés facilement.

🏁 Conclusion

Adopter une architecture headless WordPress + Next.js, c’est combiner la richesse fonctionnelle et la simplicité d’administration de WordPress avec les performances et la modernité d’un front-end React.
Une solution parfaite pour les sites éditoriaux, vitrines d’entreprise ou e-commerce qui recherchent rapidité, sécurité et design sur mesure.

Créer un site Headless avec WordPress et Next.js

🎯 Pourquoi choisir un WordPress headless avec Next.js ?

🔗 Connecter Next.js à WordPress

1. 🌀 REST API native

2. 🌐 WPGraphQL (optionnel)

🧩 Exemple de mise en œuvre simple

✨ Avantages pour le propriétaire du site

🧰 Plugins et outils recommandés

🏁 Conclusion

Migrer son site WordPress vers Next.js : guide complet 2026

Pourquoi j'utilise Vercel pour héberger votre site internet ?

✨ Wisp.blog : Publier sur son blog sans friction ni déploiement

📢 Optimisez le SEO de votre portfolio via Facebook et LinkedIn