Skip to content
Learni
Voir tous les tutoriels
Développement Backend

Comment intégrer un Headless CMS avec Next.js en 2026

18 minADVANCED
Next.jsHeadless CMSStrapi
Read in English

Introduction

Un Headless CMS découple la gestion de contenu de la présentation, offrant une flexibilité maximale pour les architectures modernes. En 2026, combiner Strapi avec Next.js permet de créer des expériences riches tout en maintenant des performances optimales. Ce tutoriel avancé vous guide à travers la configuration de types de contenu complexes, l'implémentation de webhooks sécurisés pour la révalidation ISR, l'authentification JWT personnalisée et le déploiement sur Vercel. Vous apprendrez à éviter les pièges courants liés à la scalabilité et à la sécurité des APIs. Chaque étape inclut du code fonctionnel prêt à l'emploi.

Prérequis

  • Node.js 20+ et npm
  • Connaissances avancées de TypeScript et Next.js App Router
  • Compte Strapi Cloud ou serveur auto-hébergé
  • Base de données PostgreSQL
  • Compte Vercel pour le déploiement

Initialisation du projet Strapi

terminal
npx create-strapi-app@latest cms-strapi --quickstart
cd cms-strapi
npm run develop

Cette commande crée un projet Strapi complet avec une base SQLite par défaut. Passez ensuite à PostgreSQL en production pour la scalabilité. Le mode develop active l'admin panel sur http://localhost:1337.

Définition du Content Type Article

src/api/article/content-types/article/schema.json
{
  "kind": "collectionType",
  "collectionName": "articles",
  "info": { "singularName": "article", "pluralName": "articles" },
  "attributes": {
    "title": { "type": "string", "required": true },
    "slug": { "type": "uid", "targetField": "title" },
    "content": { "type": "richtext" },
    "publishedAt": { "type": "datetime" }
  }
}

Ce schéma définit un type Article avec slug auto-généré. Strapi génère automatiquement les endpoints REST et GraphQL. Ajoutez des relations et des composants pour des structures plus complexes.

Configuration des permissions et JWT

config/plugins.ts
export default {
  'users-permissions': {
    config: {
      jwt: { expiresIn: '7d' },
      register: { allowedFields: ['username', 'email'] }
    }
  }
};

Personnalisez la durée du JWT et les champs autorisés lors de l'inscription. Cela renforce la sécurité pour les APIs consommées par Next.js.

Webhook pour révalidation ISR

src/api/webhook/controllers/webhook.ts
import { Strapi } from '@strapi/strapi';
export default ({ strapi }: { strapi: Strapi }) => ({
  async handle(ctx) {
    const { model, entry } = ctx.request.body;
    if (model === 'api::article.article') {
      await fetch(`${process.env.NEXT_URL}/api/revalidate?secret=${process.env.REVALIDATE_SECRET}&slug=${entry.slug}`);
    }
    ctx.send({ success: true });
  }
});

Ce contrôleur personnalisé déclenche la révalidation ISR dans Next.js lors de la publication d'un article. Protégez-le avec un secret partagé.

Route API de révalidation dans Next.js

app/api/revalidate/route.ts
import { NextRequest, NextResponse } from 'next/server';
import { revalidatePath } from 'next/cache';
export async function GET(request: NextRequest) {
  const secret = request.nextUrl.searchParams.get('secret');
  const slug = request.nextUrl.searchParams.get('slug');
  if (secret !== process.env.REVALIDATE_SECRET) return NextResponse.json({ message: 'Invalid' }, { status: 401 });
  revalidatePath(`/articles/${slug}`);
  return NextResponse.json({ revalidated: true });
}

Cette route sécurisée permet à Strapi de purger le cache ISR. Utilisez-le uniquement pour les mises à jour critiques de contenu.

Client Strapi dans Next.js

lib/strapi.ts
const STRAPI_URL = process.env.STRAPI_URL;
const STRAPI_TOKEN = process.env.STRAPI_API_TOKEN;
export async function fetchArticles() {
  const res = await fetch(`${STRAPI_URL}/api/articles?populate=*`, {
    headers: { Authorization: `Bearer ${STRAPI_TOKEN}` }
  });
  return res.json();
}

Ce client TypeScript centralise les appels API avec le token d'API Strapi. Gérez les erreurs et le caching pour la production.

Bonnes pratiques

  • Toujours utiliser des tokens API limités aux permissions minimales requises
  • Implémenter la validation des webhooks avec signature HMAC
  • Configurer la pagination et les filtres côté Strapi pour éviter les fuites de données
  • Utiliser des environnements distincts (dev/staging/prod) avec des bases de données séparées
  • Monitorer les performances avec les logs Strapi et les métriques Vercel

Erreurs courantes à éviter

  • Oublier de configurer les CORS sur Strapi, bloquant les requêtes Next.js
  • Exposer des secrets dans le code client sans variables d'environnement
  • Négliger la gestion des relations profondes (populate) entraînant des requêtes N+1
  • Ne pas tester les webhooks en local avec ngrok avant le déploiement

Pour aller plus loin

Explorez les plugins Strapi avancés comme i18n ou les middlewares personnalisés. Découvrez nos formations Learni pour approfondir l'architecture Headless CMS.