Next.js pour WordPress headless

Qu'est-ce que Next.js ?

Next.js est un framework open source developpe par Vercel, construit au-dessus de la bibliotheque React. Il ajoute a React un ensemble de fonctionnalites indispensables pour la production : routage base sur le systeme de fichiers, rendu cote serveur, generation statique, optimisation des images et gestion automatique du code-splitting.

Contrairement a une application React classique (Single Page Application), Next.js permet de generer le HTML cote serveur ou au moment du build. Le navigateur recoit donc un document HTML complet, ce qui ameliore a la fois le temps de premier affichage et l'indexation par les moteurs de recherche.

Pourquoi Next.js pour WordPress headless ?

Next.js est le framework frontend le plus utilise avec WordPress headless. Cette position s'explique par plusieurs facteurs techniques.

Strategies de rendu adaptees au contenu editorial

Next.js propose trois strategies de rendu, chacune adaptee a un type de page :

• SSG (Static Site Generation) : les pages sont generees en HTML au moment du build. Ideal pour les articles de blog et les pages institutionnelles dont le contenu change rarement.
• SSR (Server-Side Rendering) : le HTML est genere a chaque requete. Adapte aux pages dont le contenu depend de l'utilisateur connecte ou de parametres dynamiques.
• ISR (Incremental Static Regeneration) : les pages statiques sont regenerees en arriere-plan apres un intervalle configurable. Combine la performance du statique avec la fraicheur du contenu dynamique.

Optimisation des images integree

Le composant next/image redimensionne, convertit au format WebP/AVIF et charge les images de maniere differee (lazy loading). Avec WordPress headless, les images stockees dans la mediatheque sont automatiquement optimisees par Next.js au moment du rendu.

Routage base sur le systeme de fichiers

Chaque fichier dans le repertoire app/ correspond a une route. Pour un blog WordPress headless, la structure est directe :

app/
  page.tsx              → /
  blog/
    page.tsx            → /blog
    [slug]/
      page.tsx          → /blog/mon-article
  a-propos/
    page.tsx            → /a-propos

App Router et Pages Router

Depuis la version 13, Next.js propose deux systemes de routage. L'App Router (repertoire app/) est le systeme recommande pour les nouveaux projets.

Pour un projet WordPress headless demarre en 2025, l'App Router est le choix recommande. Les exemples de cet article utilisent l'App Router.

Demarrer un projet Next.js pour WordPress headless

npx create-next-app@latest mon-site-headless --typescript --tailwind --eslint --app --src-dir

NEXT_PUBLIC_WORDPRESS_URL=https://admin.monsite.fr
WORDPRESS_API_TOKEN=votre-token-application-password

// src/lib/wordpress.ts
const API_URL = `${process.env.NEXT_PUBLIC_WORDPRESS_URL}/wp-json/wp/v2`;

export async function getPosts(perPage = 10) {
  const res = await fetch(`${API_URL}/posts?per_page=${perPage}&_embed`, {
    next: { revalidate: 3600 } // ISR : regeneration toutes les heures
  });
  if (!res.ok) throw new Error('Erreur lors de la recuperation des articles');
  return res.json();
}

export async function getPostBySlug(slug: string) {
  const res = await fetch(`${API_URL}/posts?slug=${slug}&_embed`, {
    next: { revalidate: 3600 }
  });
  const posts = await res.json();
  return posts[0] ?? null;
}

// src/app/blog/page.tsx
import { getPosts } from '@/lib/wordpress';

export default async function BlogPage() {
  const posts = await getPosts();

  return (
    <main>
      <h1>Blog</h1>
      <ul>
        {posts.map((post: any) => (
          <li key={post.id}>
            <a href={`/blog/${post.slug}`}>
              <h2 dangerouslySetInnerHTML={{ __html: post.title.rendered }} />
            </a>
          </li>
        ))}
      </ul>
    </main>
  );
}

// src/app/blog/[slug]/page.tsx
import { getPosts, getPostBySlug } from '@/lib/wordpress';

export async function generateStaticParams() {
  const posts = await getPosts(100);
  return posts.map((post: any) => ({ slug: post.slug }));
}

export default async function ArticlePage({ params }: { params: { slug: string } }) {
  const post = await getPostBySlug(params.slug);
  if (!post) return <div>Article non trouve</div>;

  return (
    <article>
      <h1 dangerouslySetInnerHTML={{ __html: post.title.rendered }} />
      <div dangerouslySetInnerHTML={{ __html: post.content.rendered }} />
    </article>
  );
}

Configuration de next.config.js pour WordPress

Le fichier next.config.js doit autoriser le domaine WordPress pour le chargement des images :

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'admin.monsite.fr',
        pathname: '/wp-content/uploads/**',
      },
    ],
  },
};

module.exports = nextConfig;

Revalidation du contenu

La revalidation permet de mettre a jour les pages statiques sans rebuild complet. Deux approches sont possibles :

Revalidation basee sur le temps : la page est regeneree apres un intervalle fixe.

// Dans un Server Component ou une fonction fetch
const res = await fetch(url, { next: { revalidate: 3600 } }); // Toutes les heures

Revalidation a la demande : un webhook WordPress declenche la regeneration immediate d'une page.

// src/app/api/revalidate/route.ts
import { revalidatePath } from 'next/cache';
import { NextRequest } from 'next/server';

export async function POST(request: NextRequest) {
  const secret = request.nextUrl.searchParams.get('secret');
  if (secret !== process.env.REVALIDATION_SECRET) {
    return new Response('Token invalide', { status: 401 });
  }

  const body = await request.json();
  revalidatePath(`/blog/${body.post_name}`);
  return Response.json({ revalidated: true });
}

Next.js face a Gatsby et Nuxt

Ce qu'il faut retenir