Configurer l’aperçu de contenu dans Next.js avec Strapi 5 Draft & Publish

Présentation

Strapi 5 : la fonctionnalité Draft & Publish permet aux éditeurs de travailler sur du contenu non publié tout en maintenant le site en ligne stable. En exposant les données de brouillon via l’API Document Service, vous pouvez alimenter un mode preview dans le front‑end Next.js. Le résultat : une manière rapide et sécurisée pour les marketeurs et les éditeurs de voir exactement à quoi ressemblera la page publiée avant sa mise en ligne.

La réponse courte : activez Draft & Publish sur les types de contenu concernés, créez un endpoint de prévisualisation protégé dans Strapi qui renvoie le document de brouillon, configurez les gestionnaires preview et previewData de Next.js, et protégez l’endpoint avec un jeton à courte durée de vie.

Vous trouverez ci‑dessous un guide complet, prêt pour la production, qui couvre chaque étape, de la configuration de Strapi à l’intégration avec Next.js, en passant par les considérations de sécurité et les tests.

1. Activer Draft & Publish dans Strapi

1. Ouvrez le panneau d’administration de Strapi.
2. Accédez à Content‑type Builder → sélectionnez le type de collection que vous souhaitez rendre prévisualisable (par ex. Article).
3. Dans l’onglet Settings, activez Draft & Publish ; cliquez sur Save.
4. Strapi ajoute deux champs cachés au modèle : publishedAt (horodatage) et draft (booléen). Les entrées existantes sont automatiquement marquées comme publiées.

2. Exposer le contenu de brouillon via l’API Document Service

L’API Document Service (DSA) est la méthode recommandée pour interroger une seule entrée avec toutes ses relations. Par défaut, elle ne renvoie que les documents publiés, mais vous pouvez demander les brouillons en ajoutant le paramètre de requête publicationState.

GET /api/articles/:id?publicationState=preview
Accept: application/json

• publicationState=live : valeur par défaut, ne renvoie que le contenu publié.
• publicationState=preview : renvoie le dernier brouillon, même s’il n’est pas publié.

2.1 Créer une route de prévisualisation

Créez une route personnalisée qui valide un jeton de preview et transmet la requête à la DSA.

/src/api/preview/routes/custom.js

module.exports = {
  routes: [
    {
      method: 'GET',
      path: '/preview/:model/:id',
      handler: 'preview.get',
      config: {
        policies: ['api::preview.preview-token'], // politique personnalisée
      },
    },
  ],
};

/src/api/preview/controllers/preview.js

module.exports = {
  async get(ctx) {
    const { model, id } = ctx.params;
    // Transmettre la requête à l'API Document Service intégrée
    const response = await strapi.service('api::document.document').findOne(model, id, {
      publicationState: 'preview',
    });
    ctx.body = response;
  },
};

2.2 Implémenter la politique de jeton

Stockez un secret dans config/plugins.ts ou dans une variable d’environnement (PREVIEW_TOKEN). La politique vérifie la chaîne de requête ?token=….

/src/policies/preview-token.js

module.exports = async (ctx, next) => {
  const token = ctx.query.token;
  if (!token || token !== process.env.PREVIEW_TOKEN) {
    return ctx.unauthorized('Invalid preview token');
  }
  await next();
};

Ajoutez la politique à config/policies.js si votre projet utilise le style de configuration classique.

3. Configurer le mode preview de Next.js

Next.js propose deux routes API spéciales : pages/api/preview.js et pages/api/exit-preview.js. Elles basculent un cookie (next-preview) qui fait exécuter getStaticProps en preview.

3.1 Créer la route API de preview

// pages/api/preview.js
export default async function handler(req, res) {
  const { slug, token } = req.query;
  if (!token) {
    return res.status(401).json({ message: 'Missing token' });
  }

  // Vérifier le jeton en appelant l'endpoint preview de Strapi
  const previewRes = await fetch(
    `${process.env.STRAPI_URL}/preview/article/${slug}?token=${token}`
  );

  if (!previewRes.ok) {
    return res.status(401).json({ message: 'Invalid token or draft not found' });
  }

  // Activer le mode preview de Next.js
  res.setPreviewData({});
  // Rediriger vers la page qui rendra le brouillon
  res.writeHead(307, { Location: `/${slug}` });
  res.end();
}

3.2 Créer la route Exit‑Preview

// pages/api/exit-preview.js
export default function handler(req, res) {
  res.clearPreviewData();
  res.writeHead(307, { Location: '/' });
  res.end();
}

3.3 Adapter getStaticProps pour prendre en compte le preview

// pages/[slug].js
export async function getStaticProps({ params, preview }) {
  const slug = params.slug;
  const endpoint = preview
    ? `${process.env.STRAPI_URL}/preview/article/${slug}?token=${process.env.PREVIEW_TOKEN}`
    : `${process.env.STRAPI_URL}/api/articles/${slug}`;

  const res = await fetch(endpoint);
  const data = await res.json();

  return {
    props: { article: data },
    // Re‑valider toutes les 60 secondes en production
    revalidate: preview ? false : 60,
  };
}

Lorsque preview est vrai, Next.js appelle le route preview de Strapi, qui renvoie la version de brouillon.

4. Sécuriser le flux de prévisualisation

1. Jeton à courte durée : générez un jeton aléatoire (par ex. UUID) pour chaque demande de preview depuis l’interface du CMS. Stockez‑le dans une table temporaire avec un TTL de 5‑10 minutes.
2. HTTPS uniquement : servez Strapi et Next.js via TLS afin de protéger le jeton en transit.
3. Restriction d’IP (optionnel) : ajoutez une politique qui limite les requêtes preview aux plages d’IP éditoriales connues.
4. Limitation du débit : utilisez un reverse‑proxy (NGINX, Cloudflare) pour limiter les requêtes vers /preview/*.

La combinaison d’un jeton à usage unique et du TLS garantit que seuls les éditeurs autorisés peuvent visualiser le contenu non publié.

5. Tester le flux de preview

1. Dans l’admin Strapi, éditez un Article et Save sans le publier.
2. Cliquez sur le bouton Preview (vous devrez peut‑être ajouter une action UI personnalisée qui ouvre /api/preview?slug=…&token=…).
3. Le navigateur doit être redirigé vers la page d’article du site Next.js, affichant le contenu de brouillon.
4. Vérifiez que le cookie next-preview est présent (document.cookie).
5. Ouvrez une fenêtre privée/incognito — vous devez voir la version publiée, prouvant que le preview est limité au cookie.
6. Appelez /api/exit-preview et assurez‑vous que le cookie est supprimé et que la version en direct réapparaît.

6. Problèmes courants & solutions

7. Considérations de performance

• Champs sélectifs : utilisez le paramètre de requête fields[] pour ne demander que les champs nécessaires au rendu, ce qui réduit la taille du payload.
• Cache des brouillons avec parcimonie : le contenu de brouillon change fréquemment ; évitez les caches à long terme. Un petit cache en mémoire (≈ 30 secondes) peut réduire la charge lors d’éditions rapides.
• Requêtes groupées : si une page nécessite plusieurs entrées liées, utilisez l’option populate de l’API Document Service pour les récupérer en une seule requête.

8. Étendre le workflow avec Revisionary (optionnel)

Si vous avez le plugin Revisionary, vous bénéficiez d’une sécurité supplémentaire :

• Le panneau d’historique des versions permet aux éditeurs de comparer le brouillon à la dernière version publiée avant de lancer un preview.
• L’espace de révision peut être utilisé pour exiger une approbation éditoriale avant la génération du jeton de preview.
• Toutes les actions de preview sont enregistrées dans le journal d’audit, offrant une traçabilité indispensable pour la conformité.

L’intégration de Revisionary est facultative mais recommandée pour les équipes qui ont besoin d’un contrôle de changement rigoureux.

Conclusion

Mettre en place un environnement de preview fiable avec Strapi 5 et Next.js repose sur trois étapes essentielles : activer Draft & Publish, exposer les brouillons via un endpoint sécurisé, et configurer le mode preview de Next.js. En suivant les extraits de code et les bonnes pratiques de sécurité présentés ci‑dessus, vous offrez aux rédacteurs un retour visuel immédiat sans risque de publication accidentelle. Le même schéma fonctionne pour n’importe quel type de collection et peut être étendu avec Revisionary pour un contrôle de version complet et des capacités d’audit.

Vous pouvez désormais laisser les marketeurs et les éditeurs prévisualiser pages, articles de blog ou fiches produits avant leur mise en ligne, améliorant ainsi la qualité du contenu et la vitesse de diffusion.