Sanity CMS avec Next.js ou Astro : Guide complet

Ce que Sanity fournit

• ✓
  Une interface d'administration (Sanity Studio)

  Interface moderne et personnalisable pour éditer le contenu

• ✓
  Des modèles de contenu personnalisés (schémas)

  Définissez la structure exacte de vos contenus (pages, articles, projets...)

• ✓
  Une API pour exposer les données (GROQ ou GraphQL)

  Récupérez vos données via des requêtes optimisées

Exemple : Schéma Sanity pour une page

// schemas/page.ts
export default {
  name: 'page',
  title: 'Page',
  type: 'document',
  fields: [
    {
      name: 'title',
      title: 'Titre',
      type: 'string',
      validation: (Rule) => Rule.required()
    },
    {
      name: 'slug',
      title: 'URL',
      type: 'slug',
      options: {
        source: 'title',
        maxLength: 96
      }
    },
    {
      name: 'description',
      title: 'Description',
      type: 'text',
      rows: 3
    },
    {
      name: 'content',
      title: 'Contenu',
      type: 'array',
      of: [
        { type: 'block' },
        { type: 'image' }
      ]
    },
    {
      name: 'publishedAt',
      title: 'Date de publication',
      type: 'datetime'
    }
  ]
}

Ce schéma définit la structure d'une page : titre, URL, description, contenu enrichi et date. L'interface Sanity Studio est générée automatiquement depuis cette définition.

1. Un CMS orienté données, pas pages

Avec Sanity, le contenu est structuré sous forme de types : pages, sections, articles, projets, témoignages, FAQ...

Cette approche permet de construire des sites très personnalisés, réellement évolutifs, sans bricolage ni contournement. La structure du contenu est claire, maîtrisée et indépendante du design.

2. Une interface d'édition moderne

Sanity Studio est rapide, clair et agréable à utiliser. Bien configuré, il permet aux équipes non techniques de :

• •Modifier les textes et les images
• •Gérer les pages et les contenus
• •Publier ou dépublier du contenu
• •Prévisualiser les changements en temps réel

3. Une API flexible : GROQ et GraphQL

Sanity expose son contenu via deux options :

• →GROQ : langage de requêtes très performant pour sélectionner précisément les données nécessaires
• →GraphQL : via l'API officielle, pour les projets déjà orientés GraphQL

// Exemple de requête GROQ
const query = `
  *[_type == "page" && slug.current == $slug][0]{
    title,
    description,
    content,
    "imageUrl": mainImage.asset->url
  }
`;

const page = await client.fetch(query, { slug: 'about' });

GROQ permet de limiter le volume de données chargées et d'optimiser les performances du frontend.

Sanity est moins pertinent si :

• •Le projet est très simple et figé (1-2 pages statiques)
• •Vous souhaitez une solution prête immédiatement sans aucune configuration
• •Vous recherchez un outil no-code ou un page builder clé en main
• •Le budget est extrêmement limité et vous devez tout faire vous-même