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

WordPress traîne, Notion plafonne sur le SEO, Webflow facture cher dès que le blog grossit. Si tu écris sérieusement (deux articles par mois ou plus) et que tu veux à la fois la qualité d'écriture d'un éditeur conçu pour la prose et le contrôle d'un front Next.js, le stack Ghost headless commence à faire sens. On va voir comment l'assembler avec Claude pour la rédaction, et combien ça te coûte vraiment.

Ce papier suppose que tu as déjà touché à un CMS et que tu n'as pas peur d'ouvrir un terminal. Si tu pars de zéro côté IA, commence par le guide complet pour apprendre Claude avant de revenir ici, sinon la partie pipeline va te paraître abstraite.

Pourquoi un blog headless en 2026 (et pourquoi Ghost)

Headless veut dire que le CMS ne gère plus l'affichage. Il devient une API qui sert le contenu en JSON, et un front séparé (ici Next.js) s'occupe du rendu, du SEO et de la performance. Tu sépares l'écriture de la présentation, ce qui te laisse libre de refaire le design sans toucher aux articles.

Pour un blog d'entrepreneur solo, Ghost gagne face à Strapi, Sanity ou Payload sur trois points concrets : un éditeur conçu pour les textes longs (pas un builder de schémas), une Content API native sans configuration, et le membership plus newsletter intégrés si tu veux capitaliser une audience email. Strapi est plus flexible mais demande de modéliser ton contenu à la main. Sanity est puissant mais son éditeur en blocs casse le flow d'écriture quand tu produis 2000 mots d'affilée.

Côté hébergement, deux options : Ghost(Pro) à partir d'environ 9 USD par mois pour le plan starter, ou auto-hébergement sur un VPS pour 4 à 12 EUR par mois selon le fournisseur. Auto-hébergé, tu gardes le contrôle des sauvegardes et des intégrations. Pro, tu paies pour ne plus penser à la maintenance. Le critère de décision : si tu publies plus de deux articles par mois et que tu veux brancher des scripts d'automatisation, l'auto-hébergement vaut le coup.

Architecture du stack : Ghost en backend, Next.js en frontend

Le flux ressemble à ça : Ghost vit sur cms.tonsite.com et expose sa Content API. Next.js (App Router, déployé sur Vercel) fetch les articles au moment du build avec generateStaticParams, puis revalide les pages via ISR ou à la demande quand Ghost envoie un webhook. Le sitemap, les balises Open Graph, le JSON-LD, tout ça vit côté Next.js.

Versions cibles pour 2026 : Ghost 5.x, Next.js 15 avec App Router, Node 20 ou 22. Ce qui vit où :

Pourquoi pas Astro à la place de Next.js ? Astro est plus rapide en pur statique, mais Next.js gagne sur la revalidation fine (ISR à la page près) et l'écosystème React si tu veux ajouter des composants interactifs plus tard. C'est la même logique que pour monter un site web avec Claude : choisir l'outil qui te suit quand le projet grandit.

Installer Ghost et exposer le Content API

Pour l'auto-hébergement, un VPS à 4 EUR par mois suffit largement pour un blog qui démarre. Installation en quatre étapes :

1. Provisionner le VPS (Ubuntu 22.04, 2 Go RAM minimum) et pointer un sous-domaine cms.tonsite.com vers son IP.
2. Installer Node 20, MySQL 8, Nginx (ou Caddy si tu veux du HTTPS automatique sans configurer Let's Encrypt à la main).
3. Installer ghost-cli en global, puis ghost install dans /var/www/ghost. Le CLI gère la config Nginx et le certificat SSL.
4. Dans Ghost Admin → Integrations, créer une Custom Integration nommée "Next.js front". Tu récupères une Content API Key.

Tester avec curl :

curl "https://cms.tonsite.com/ghost/api/content/posts/?key=YOUR_KEY&limit=3"

Si tu reçois un JSON avec tes posts, tu es bon. Avant de passer à la suite, configure un cron qui dump MySQL chaque nuit vers un bucket S3 ou Backblaze. Sans sauvegarde, un crash disque te fait perdre tous les articles et la base des abonnés à la newsletter.

Brancher Next.js : fetch, routes dynamiques et ISR

Côté Next.js, deux options : le client officiel @tryghost/content-api, ou un simple fetch vers l'API REST. Le fetch direct est plus léger et joue mieux avec le cache Next.js. Exemple minimal :

// lib/ghost.ts
const GHOST_URL = process.env.GHOST_URL;
const GHOST_KEY = process.env.GHOST_CONTENT_KEY;

export async function getPosts() {
  const res = await fetch(
    `${GHOST_URL}/ghost/api/content/posts/?key=${GHOST_KEY}&limit=all&include=tags,authors`,
    { next: { revalidate: 3600 } }
  );
  const data = await res.json();
  return data.posts;
}

export async function getPostBySlug(slug: string) {
  const res = await fetch(
    `${GHOST_URL}/ghost/api/content/posts/slug/${slug}/?key=${GHOST_KEY}&include=tags,authors`,
    { next: { revalidate: 3600 } }
  );
  const data = await res.json();
  return data.posts?.[0];
}

Dans app/blog/[slug]/page.tsx, tu utilises generateStaticParams pour pré-générer les pages au build, et revalidate pour que l'ISR rafraîchisse toutes les heures. Pour la fraîcheur instantanée quand tu publies, ajoute un endpoint /api/revalidate dans Next.js et configure un webhook Ghost (post.published, post.updated, post.unpublished) qui pingue cet endpoint avec un secret partagé.

Piège classique : les images uploadées dans Ghost sont servies depuis cms.tonsite.com. Si tu utilises next/image, il faut autoriser ce domaine dans next.config.js :

module.exports = {
  images: {
    remotePatterns: [
      { protocol: 'https', hostname: 'cms.tonsite.com' }
    ]
  }
};

Où Claude entre dans le pipeline

Tentation classique : tout déléguer à Claude, du brief à la publication. Mauvaise idée, le contenu devient uniforme et reconnaissable en deux paragraphes. Trois points d'injection précis fonctionnent mieux, et c'est exactement la logique d'un pipeline de blog SEO avec Claude.

1. Brief et premier jet. Tu crées un Claude Project avec ton guide éditorial en system prompt (voix, formules à éviter, longueur cible, structure type). Tu lui donnes le keyword et les 5 premiers résultats Google, il sort un brief structuré que tu valides, puis un premier jet en Markdown que tu colles dans Ghost.

Tu es rédacteur pour [nom du blog].
Ton: direct, technique, tutoiement.
Interdits: "révolutionner", "dans un monde où", tirets cadratins.
Structure: 5 à 7 H2, chaque section ancrée par un chiffre
ou un exemple exécutable.
Longueur: 1500 à 1800 mots.
Sortie: Markdown propre, prêt à coller dans Ghost.

2. Optimisation SEO post-rédaction. Une fois le draft écrit, tu repasses l'article à Claude avec les SERPs et tu lui demandes : questions manquantes du sujet, suggestions de maillage interne, meta title et description sous 60 et 155 caractères. Claude Sonnet suffit largement pour cet usage.

3. Refonte d'archives. Un script Node qui utilise l'Admin API Ghost pour lister les posts publiés il y a plus de 18 mois, les envoie à Claude via l'API Anthropic avec une instruction de mise à jour (nouvelles données, nouveaux liens, suppression du obsolète), puis repush en draft pour que tu valides. Pour bien cadrer ce genre d'automatisation, jette un œil à la configuration Claude pour un usage quotidien.

SEO technique : ce que Ghost ne fait pas et Next.js doit gérer

Ghost gère correctement les meta de base : title, description, OG image par article. Mais le SEO technique fin (sitemap dynamique, JSON-LD Article, BreadcrumbList, maillage interne automatique, hreflang) doit vivre côté Next.js.

generateMetadata dans app/blog/[slug]/page.tsx :

export async function generateMetadata({ params }) {
  const post = await getPostBySlug(params.slug);
  return {
    title: post.meta_title || post.title,
    description: post.meta_description || post.excerpt,
    openGraph: {
      title: post.og_title || post.title,
      description: post.og_description || post.excerpt,
      images: [post.feature_image]
    }
  };
}

Pour le sitemap, crée app/sitemap.ts qui itère sur getPosts() et renvoie l'objet attendu par Next. Le JSON-LD se met dans le composant de page en script type="application/ld+json".

Piège canonical important : ton post existe à deux URLs (cms.tonsite.com/mon-article et tonsite.com/blog/mon-article). Si Google indexe les deux, tu te tires une balle dans le pied. Solution : un robots.txt côté Ghost qui bloque tout, ou une règle Nginx qui retourne X-Robots-Tag: noindex sur cms.tonsite.com. Vérifie avec curl que l'en-tête sort bien.

Coûts réels et quand ce stack ne vaut PAS le coup

Pour un blog qui publie 4 articles par mois :

À comparer à WordPress managé chez un hébergeur sérieux (15 à 30 EUR), ou Ghost Pro plus Vercel Pro (environ 30 USD plus 20 USD). Le stack auto-hébergé reste compétitif et te laisse beaucoup plus de contrôle.

Quand ce stack ne vaut PAS le coup : si tu publies moins d'un article par mois, le temps de maintenance VPS et le coût mental de garder Next.js à jour ne se justifient pas. Reste sur Ghost natif (ils ont un thème par défaut très propre) ou même WordPress avec un thème minimaliste. Le headless devient rentable à partir du moment où tu industrialises ta production avec Claude.

Passer à la pratique

Le stack tient en une journée de setup si tu connais Next.js, deux à trois jours si tu pars de plus loin. Le vrai chantier n'est pas technique, c'est éditorial : construire le system prompt de ton Claude Project, définir les trois ou quatre formats d'articles que tu publies, et savoir où l'IA arrête de t'aider et où tu reprends la main. Si tu veux structurer cette partie là sans tâtonner six mois, la formation Maîtriser Claude au quotidien couvre exactement ce pipeline : briefs, prompts, refonte d'archives, et les gardes-fous pour que ton contenu reste reconnaissable.