Je vous propose ici un guide pratique, basé sur mon expérience, pour configurer un site headless sans prise de tête avec Next.js (frontend), Strapi (headless CMS) et Vercel (hosting). J’ai monté plusieurs projets ainsi et j’ai retenu les étapes et astuces qui évitent les écueils courants : sécurité, déploiement continu, prévisualisation de contenu et optimisation des performances.

Pourquoi ce trio ?

Next.js et Strapi forment un couple logique : Next gère le rendu côté client/serveur (SSG/SSR/ISR) tandis que Strapi offre une interface admin simple et des API flexibles (REST/GraphQL). Vercel, de son côté, rend le déploiement de Next quasi instantané avec des builds optimisés et une intégration Git facile. Ensemble, ils permettent un workflow moderne : écrire du contenu dans Strapi, déclencher un build sur Vercel et servir un site rapide et SEO-friendly.

Prérequis rapides

  • Node.js (version active LTS recommandée)
  • Un compte GitHub/GitLab/Bitbucket pour le repo
  • Un compte Vercel
  • Strapi : hébergé (Heroku/Render/DigitalOcean) ou auto-hébergé via Docker
  • PostgreSQL si vous êtes en production (éviter SQLite en prod)

1. Installer et configurer Strapi (v4+)

Personnellement, j’aime démarrer Strapi en Docker pour garder l’environnement reproductible. Mais pour un test rapide :

npx create-strapi-app@latest my-cms --quickstart

Ensuite :

  • Créer vos Content Types (Articles, Pages, Authors, Media, etc.).
  • Configurer les rôles/permissions : autorisez la lecture publique (ou créez des endpoints protégés si besoin).
  • Préparer l’upload provider (Cloudinary, S3) pour les images en production.
  • En production, utilisez PostgreSQL ; ajoutez les variables DB via votre provider (Render/DO).

Astuce : pensez à activer et configurer le plugin strapi-plugin-users-permissions si vous gérez des accès, et installez le plugin documentation ou GraphQL si vous préférez GraphQL.

2. Créer la partie Next.js

J’aime démarrer avec le template officiel :

npx create-next-app@latest my-site

Dans Next, choisissez votre stratégie de rendu en fonction des pages :

  • getStaticProps + getStaticPaths pour les pages publiées qui changent peu (SSG).
  • ISR (revalidate) si vous voulez rebuild automatiquement après X secondes.
  • getServerSideProps pour du contenu dynamique à chaque requête (plus coûteux).

Exemple minimal pour récupérer des articles depuis Strapi via REST dans getStaticProps :

export async function getStaticProps() {  const res = await fetch(`${process.env.STRAPI_API_URL}/api/articles?populate=*&pagination[pageSize]=100`);  const data = await res.json();  return { props: { articles: data.data }, revalidate: 60 };}

Notes :

  • J'utilise souvent ?populate=*
  • Stockez l’URL de l’API Strapi dans une variable d’environnement STRAPI_API_URL.

3. Gestion des variables d’environnement

Dans Vercel, ajoutez les variables suivantes :

  • STRAPI_API_URL — URL publique de votre Strapi (https://cms.mondomaine.com)
  • NEXT_PUBLIC_STRAPI_URL — si besoin côté client
  • STRAPI_TOKEN — token d’accès (si vous protégez les endpoints)

Je préfère limiter l’exposition côté client : seul NEXT_PUBLIC_STRAPI_URL si nécessaire ; sinon faites les requêtes côté serveur pour garder STRAPI_TOKEN secret.

4. Déployer Strapi correctement

Options :

  • Strapi sur Render ou DigitalOcean App Platform — pratique car on gère la DB, backups et variables.
  • Strapi sur un VPS Docker — plus de flexibilité mais nécessite la maintenance.
  • Strapi Cloud (si disponible) — gestion simplifiée.

Points clés :

  • Utiliser un storage provider pour les médias (S3/Cloudinary).
  • Configurer HTTPS et CORS : ajoutez l’URL de votre site Vercel dans Settings → CORS de Strapi.
  • Créer un API token pour les requêtes depuis Next si vous limitez les accès publics.

5. Intégration Vercel — Continuous Deployment

Reliez votre repo Next à Vercel. Dans Settings > Environment Variables, répliquez celles définies localement. Vercel déclenchera un build à chaque push.

Pour les builds qui prennent du temps, activez l’option « Build Cache » et optimisez les pages : privilégiez SSG où possible.

6. Webhooks : automatiser le rebuild

Pour que votre site reflète les changements dans Strapi sans attendre un revalidate trop long, configurez un webhook :

  • Dans Strapi, créez un webhook pointant vers l’URL Vercel : https://api.vercel.com/v1/integrations/deploy/{VERCEL_DEPLOY_HOOK}
  • Déclenchez le webhook à chaque création/modification de contenu (configurable par evenement dans Strapi).

Astuce : filtrez les événements pour éviter des builds inutiles (ex : only published changes).

7. Prévisualisation du contenu (Preview)

La preview est essentielle pour les éditeurs. Mon approche :

  • Créer une route /api/preview dans Next qui valide le token et crée un cookie de preview, puis redirige vers la page à prévisualiser.
  • Dans Strapi, appeler cette route via une action ou un bouton personnalisé (ou via webhook si vous passez par l’UI).
export default async function handler(req, res) {  const { secret, slug } = req.query;  if (secret !== process.env.PREVIEW_SECRET) return res.status(401).json({ message: 'Invalid token' });  res.setPreviewData({});  res.writeHead(307, { Location: `/${slug}` });  res.end();}

Ensuite, dans getStaticProps, détectez context.preview et récupérez le contenu draft depuis Strapi (endpoint avec token).

8. Optimisation et performance

  • Utilisez next/image avec domain list (ajouté dans next.config.js) pour servir correctement les images uploadées sur Cloudinary/S3/Strapi.
  • Activez l’ISR (revalidate) pour garder de bonnes performances et des mises à jour raisonnables.
  • Limitez la profondeur de populate dans Strapi pour éviter des JSON volumineux.

9. Sécurité et bonnes pratiques

  • N’exposez pas de tokens dans le code client. Utilisez des env vars côté serveur.
  • Mettez en place des rôles et permissions précis dans Strapi.
  • Activez rate-limiting et monitoring dans Strapi (ou via votre infra).

Exemple de tableau de configuration recommandée

Composant Recommandation
DB PostgreSQL en production
Media Cloudinary ou S3
Déploiement Strapi Render/DigitalOcean/Heroku (avec Docker)
Déploiement Next Vercel (CI/CD natif)

J’espère que ce guide pratique vous donne une feuille de route claire. Si vous voulez, je peux vous fournir un template Next.js préconfiguré (avec gestion preview, ISR et fetch adapté), ou un fichier docker-compose pour Strapi + PostgreSQL pour démarrer rapidement. Indiquez-moi votre préférence (REST vs GraphQL, hébergement Strapi, etc.).