Blog headless avec Ghost, Next.js et Claude : le stack 2026

Tu regardes ton blog WordPress. Le score Lighthouse plafonne à 62 sur mobile, un plugin de cache vient encore de casser après une mise à jour PHP, et tu passes plus de temps à maintenir l'installation qu'à écrire. Le pattern est classique : à un moment, la dette technique du CMS coûte plus cher que le CMS lui-même. C'est le moment où le headless devient intéressant, et où apprendre à travailler avec Claude comme copilote change vraiment la donne pour un solo ou une petite équipe.

Ce stack, je le décris tel que je le monte concrètement : Ghost comme backend éditorial, Next.js 15 en front, Claude pour scaffolder le code et écrire les articles. Pas de tour d'horizon JAMstack théorique, juste ce qui marche et ce qui coûte, avec les arbitrages que tu devras faire toi-même.

Pourquoi headless en 2026 (et pourquoi pas WordPress)

WordPress reste le CMS majoritaire du web. Il n'est pas mort, il est juste devenu inadapté à un profil précis : le solo qui publie 4 à 10 articles par mois, qui tient à la perf, et qui veut un front sur lequel il garde la main. La stack LAMP + thème + 15 plugins traîne trop d'accidents historiques pour ce cas d'usage.

Voici la comparaison que je fais quand un client hésite entre trois setups :

Le headless a un coût caché : il faut savoir déployer une app JavaScript. Si personne dans l'équipe ne touche à npm, garde WordPress ou reste sur Ghost natif. C'est un arbitrage honnête, pas une position idéologique.

Ghost comme CMS : ce qu'il fait bien, ce qu'il ne fait pas

Ghost a été pensé pour publier du long format et gérer des membres. L'éditeur est propre (pas de builder à blocs qui explose au copier-coller), l'API Content est native et documentée, et les briques newsletter, abonnements payants et membres sont intégrées dès la base. Tu n'installes pas Mailchimp, Stripe et un plugin de restriction : c'est déjà là.

Là où Ghost coince, c'est quand tu veux un workflow multi-auteur avancé avec rôles fins, des champs personnalisés flexibles à la Sanity, ou du multi-langue solide. Pour ces cas, tu regardes Payload, Strapi ou Sanity. Pour un solo entrepreneur qui publie 2 à 8 articles par mois avec une newsletter et éventuellement un mur payant, Ghost gagne largement.

Deux points à connaître avant de choisir. D'abord, Ghost Pro (le managé officiel) démarre à environ 9 $ par mois sur le plan Starter, ce qui est le chemin le plus court si tu ne veux pas toucher à un serveur. Ensuite, en self-hosted via Docker sur un VPS Hetzner à 6 € par mois, tu récupères tout, mais tu deviens responsable des backups et des mises à jour. Les deux options sont légitimes, elles n'ont juste pas le même coût réel une fois qu'on compte ton temps.

Next.js 15 en front : App Router, ISR et pages statiques

Next.js sert de couche de rendu. L'App Router structure les routes par dossiers, generateStaticParams prérend tes articles au build, et l'ISR (Incremental Static Regeneration) régénère une page à la demande quand Ghost pousse un webhook après publication. Résultat pratique : le lecteur voit un fichier HTML statique servi depuis le CDN Vercel, et tes modifs dans Ghost apparaissent en moins d'une minute.

Le fetch côté Next.js ressemble à ça, dans une route app/blog/[slug]/page.tsx :

import GhostContentAPI from '@tryghost/content-api';

const api = new GhostContentAPI({
  url: process.env.GHOST_URL!,
  key: process.env.GHOST_CONTENT_KEY!,
  version: 'v5.0'
});

export const revalidate = 3600;

export async function generateStaticParams() {
  const posts = await api.posts.browse({ limit: 'all', fields: 'slug' });
  return posts.map((p) => ({ slug: p.slug }));
}

export default async function Post({ params }: { params: { slug: string } }) {
  const post = await api.posts.read({ slug: params.slug }, { formats: ['html'] });
  return <article dangerouslySetInnerHTML={{ __html: post.html! }} />;
}

C'est le squelette minimum. En production tu ajoutes un renderer qui parse le HTML de Ghost pour l'enrichir (tables stylées, code blocks avec Shiki, images en next/image), et une route /api/revalidate qui écoute le webhook Ghost. C'est ce renderer que Claude accélère vraiment, parce que c'est du code répétitif à écrire mais spécifique à ton design.

Où Claude s'insère dans le stack

Claude a trois rôles distincts dans ce montage, et il vaut mieux les séparer plutôt que d'attendre qu'un seul prompt règle tout.

Premier rôle : scaffolder le repo. Tu ouvres Claude Code dans un dossier vide, tu décris ton stack cible, et tu obtiens en 10 minutes un projet Next.js 15 avec App Router, client Ghost typé TypeScript, page de liste, page article, sitemap et robots. Ce n'est pas magique, c'est du boilerplate bien fait. Le gain sur du code répétitif est réel, surtout si tu as pris le temps de configurer Claude proprement avec un CLAUDE.md qui décrit ta stack.

Deuxième rôle : écrire le renderer HTML → composants React. Ghost renvoie du HTML propre mais générique. Toi tu veux tes tables avec un style précis, tes <pre><code> avec highlight côté serveur, tes images optimisées. Ce parser custom, tu peux le décrire à Claude en 20 lignes de prompt et itérer dessus.

Troisième rôle : écrire les articles eux-mêmes dans Ghost. C'est un sujet à part entière, avec un pipeline structuré (brief, KB, contraintes de linking, meta SEO). Je le détaille dans le pipeline de blog SEO avec Claude. Ici on reste sur le code.

Setup pas à pas : de zéro à premier article publié

Voici l'ordre que je suis, testé plusieurs fois. Prévoir une demi-journée pour la première mise en place, une heure ensuite pour les suivantes.

1. Installer Ghost. Deux chemins : Ghost Pro à partir de 9 $/mois (créer un compte, choisir le domaine, prêt), ou Docker sur un VPS Hetzner à 6 €/mois avec docker compose up -d et un reverse proxy Caddy pour le HTTPS. Le premier gagne du temps, le second te laisse tout contrôler.
2. Créer une clé API Content. Dans Ghost Admin, Settings → Integrations → Add custom integration. Tu récupères le Content API Key (lecture seule, safe côté serveur Next.js) et l'URL de l'API.
3. Bootstrap le projet Next.js avec Claude. Ouvre Claude Code dans un dossier vide et lance le prompt ci-dessous.
4. Câbler le fetch et le rendu. Colle les variables d'environnement dans .env.local, lance npm run dev, vérifie que la home liste tes posts et qu'un article s'affiche.
5. Configurer le webhook. Dans Ghost, sur ton intégration, ajoute un webhook sur l'événement Post published qui pointe vers https://ton-site.vercel.app/api/revalidate?secret=XXX. Le handler Next.js appelle revalidatePath('/blog/[slug]').
6. Deploy sur Vercel. vercel --prod, tu ajoutes les variables d'env, tu pointes ton DNS. Fin.

Le prompt de bootstrap que j'utilise à l'étape 3 :

Crée un projet Next.js 15 avec App Router et TypeScript, tailwind
configuré, ESLint strict. Ajoute @tryghost/content-api et son typage.

Structure attendue :
- lib/ghost.ts : client Ghost avec URL et clé lues depuis process.env,
  fonctions getAllPosts, getPostBySlug, getAllTags, toutes typées.
- app/blog/page.tsx : liste des posts, ISR revalidate 3600, image en
  next/image, lien vers /blog/[slug].
- app/blog/[slug]/page.tsx : article seul, generateStaticParams pour
  prérendre au build, generateMetadata pour title/description/og.
- app/api/revalidate/route.ts : POST qui vérifie ?secret= vs
  REVALIDATE_SECRET et appelle revalidatePath sur la route de l'article.
- app/sitemap.ts et app/robots.ts.

Contraintes : pas de client component sauf si strictement nécessaire.
Commente uniquement ce qui n'est pas évident. Demande-moi les variables
d'env à définir avant de commencer.

Claude va poser deux ou trois questions (nom du site, domaine cible), puis générer les fichiers. Relis, corrige les imports qui traînent, commit. Si tu n'as jamais utilisé Claude Code sur un vrai projet, le guide débutant Claude Code couvre les réflexes de base (permissions, mode plan, /cost).

Pour la partie renderer HTML → composants, un second prompt court suffit : "parse le champ post.html avec node-html-parser, remplace les img par next/image avec largeur/hauteur détectées, les pre code par un composant CodeBlock avec Shiki côté serveur, et laisse le reste tel quel".

Coûts, limites et cas où ce stack ne convient pas

Budget mensuel réaliste, tout compris :

À ça tu ajoutes ton usage Claude. Si tu utilises l'abonnement Claude.ai (à partir de 20 €/mois pour le plan Pro), c'est inclus. Si tu passes par l'API pour des scripts automatisés, compte quelques euros par mois sur du trafic éditorial normal.

Les limites honnêtes de ce stack. Un, la courbe Next.js n'est pas triviale si tu n'as jamais fait de React : compte deux à trois semaines pour être à l'aise. Deux, ce n'est pas adapté à du e-commerce lourd (Shopify Hydrogen ou Next Commerce répondent mieux). Trois, tu deviens responsable du SEO technique : sitemap, robots, balises canonical, hreflang si multi-langue, données structurées. Ghost te donne des méta-données de base, le reste tu le codes. Ce n'est pas dur, c'est juste une checklist à ne pas oublier. Quatre, si tu veux un vrai site vitrine avec landing pages et pages produits en plus du blog, va voir la page créer un site avec Claude du brief au déploiement qui couvre le stack complet.

Le cas où je déconseille clairement : équipe non-technique, budget de maintenance à zéro, besoin de plugins tout faits (formulaires, popups, A/B testing). Reste sur WordPress managé ou passe sur Webflow. Le headless récompense ceux qui publient régulièrement et qui tiennent à contrôler leur front, pas ceux qui veulent juste "un site qui marche".

Passer à la pratique

Si tu as lu jusqu'ici, tu sais si ce stack est pour toi. Étape suivante : sors un VPS ou un compte Ghost Pro cette semaine, lance le prompt de bootstrap, et publie un premier article de test. Le vrai apprentissage démarre là, pas dans un article de plus. Pour aller plus loin sur la façon dont Claude devient un vrai copilote (setup, prompts, revue de code, pipeline éditorial), la formation Maîtriser Claude au quotidien couvre le stack complet en 5 semaines avec les projets exécutables : setup, site, blog, automatisations, marketing.