Sanity

Sanity est un CMS headless de nouvelle génération qui se distingue par son approche centrée sur les données structurées et son studio d'édition collaborative en temps réel. Contrairement aux CMS traditionnels, Sanity offre une flexibilité totale dans la modélisation de contenu via des schémas personnalisables et une API de type Content Lake. Cette plateforme permet aux équipes de développement de créer des expériences digitales omnicanales tout en offrant aux éditeurs de contenu une interface intuitive et performante.

Fondements de Sanity

• Architecture headless découplant complètement le contenu de la présentation, permettant une distribution multi-plateforme
• Content Lake centralisé où les données sont stockées sous forme de documents JSON enrichis avec des relations
• Sanity Studio personnalisable, un éditeur React open-source déployable où vous le souhaitez
• API en temps réel (GROQ et GraphQL) avec synchronisation instantanée des modifications pour la collaboration d'équipe

Avantages clés

• Édition collaborative en temps réel avec présence des utilisateurs et résolution de conflits automatique
• Schémas de contenu entièrement personnalisables via JavaScript/TypeScript sans limitation de structure
• Performance exceptionnelle avec CDN global et cache intelligent pour des temps de réponse < 50ms
• Langage de requête GROQ puissant offrant plus de flexibilité que GraphQL pour les requêtes complexes
• Écosystème de plugins riche et API extensible pour intégrations tierces (e-commerce, analytics, DAM)
• Historique complet des versions avec possibilité de restauration à tout moment
• Gestion native des assets avec transformation d'images à la volée et optimisation automatique

Exemple concret de schéma

import { defineType, defineField } from 'sanity'

export default defineType({
  name: 'product',
  title: 'Product',
  type: 'document',
  fields: [
    defineField({
      name: 'title',
      title: 'Title',
      type: 'string',
      validation: Rule => Rule.required().min(3).max(100)
    }),
    defineField({
      name: 'slug',
      title: 'Slug',
      type: 'slug',
      options: {
        source: 'title',
        maxLength: 96
      },
      validation: Rule => Rule.required()
    }),
    defineField({
      name: 'price',
      title: 'Price',
      type: 'number',
      validation: Rule => Rule.required().positive()
    }),
    defineField({
      name: 'mainImage',
      title: 'Main Image',
      type: 'image',
      options: {
        hotspot: true
      },
      fields: [
        {
          name: 'alt',
          type: 'string',
          title: 'Alternative text'
        }
      ]
    }),
    defineField({
      name: 'description',
      title: 'Description',
      type: 'array',
      of: [{ type: 'block' }]
    }),
    defineField({
      name: 'categories',
      title: 'Categories',
      type: 'array',
      of: [{ type: 'reference', to: [{ type: 'category' }] }]
    })
  ],
  preview: {
    select: {
      title: 'title',
      media: 'mainImage',
      price: 'price'
    },
    prepare({ title, media, price }) {
      return {
        title,
        subtitle: `${price}€`,
        media
      }
    }
  }
})

Exemple de requête GROQ pour récupérer des produits avec leurs catégories et images optimisées :

import { client } from './sanityClient'

const query = `*[_type == "product" && defined(slug.current)] | order(publishedAt desc) [0...12] {
  _id,
  title,
  "slug": slug.current,
  price,
  "mainImage": mainImage.asset->url + "?w=800&h=600&fit=crop",
  "imageAlt": mainImage.alt,
  description,
  "categories": categories[]->{
    title,
    "slug": slug.current
  }
}`

export async function getFeaturedProducts() {
  return await client.fetch(query)
}

Mise en œuvre d'un projet Sanity

1. Installer Sanity CLI globalement : npm install -g @sanity/cli
2. Initialiser un nouveau projet : sanity init --template clean
3. Définir les schémas de contenu dans le dossier schemas/ avec validation TypeScript
4. Configurer le studio (sanity.config.ts) avec plugins nécessaires et customisations UI
5. Déployer le studio : sanity deploy (accessible via yourproject.sanity.studio)
6. Configurer le client dans votre application frontend avec les bonnes credentials
7. Implémenter les requêtes GROQ ou GraphQL selon les besoins de l'application
8. Configurer CORS et tokens d'accès pour sécuriser l'API en production

Outils et intégrations associés

• Next.js et Sanity Image pour l'optimisation automatique des images avec next/image
• Sanity Vision pour tester les requêtes GROQ directement dans le studio
• Algolia pour ajouter une recherche full-text performante sur le contenu
• Vercel pour déploiement automatique avec preview pour chaque branche Git
• Shopify intégration pour synchroniser produits e-commerce avec contenu éditorial
• Cloudinary ou Imgix comme alternatives pour la gestion avancée d'assets

Sanity représente une solution idéale pour les organisations cherchant à implémenter une stratégie de contenu omnicanal moderne. Son modèle de pricing transparent basé sur l'utilisation, sa courbe d'apprentissage progressive et sa communauté active en font un choix particulièrement pertinent pour les projets nécessitant flexibilité, performance et collaboration éditoriale avancée. L'investissement initial en configuration de schémas est rapidement rentabilisé par la vélocité de développement et l'autonomie qu'il offre aux équipes de contenu.