Créer un blog avec Sanity et Next.js en partant de zéro

Quand j'ai commencé à apprendre Sanity, le truc qui m'a le plus bloqué c'est pas la technique c'est de ne pas comprendre pourquoi on faisait les choses dans cet ordre. La plupart des tutos te font copier-coller du code sans vraiment t'expliquer ce qui se passe. Tu finis avec un truc qui marche, mais t'as rien appris. Celui-là est différent. On va construire un mini-blog ensemble une liste d'articles, des pages de détail en partant de zéro. Mais surtout, je t'explique pourquoi chaque étape existe, pas juste quoi taper.

À qui ça s'adresse ? Tu connais HTML, CSS, un peu de JavaScript. T'as peut-être touché à React. Tu n'as jamais utilisé de CMS headless et t'as pas trop compris ce que c'est. C'est exactement là où j'en étais en octobre.

Ce que tu vas construire : Un blog fonctionnel où le contenu vit dans Sanity et s'affiche dans Next.js. Pas de template, pas de magie tu codes chaque partie à la main pour comprendre ce qui se passe.

Compte entre 1 et 2 heures (ou plus). Pas parce que c'est compliqué, mais parce que tu vas lire, tester, casser des trucs, et recommencer. C'est normal. C'est comme ça qu'on apprend.

Prêt ? On commence.

Prérequis : Node.js installé, un compte gratuit sur sanity.io, et un terminal.

Étape 1 ) Comprendre l'architecture avant de coder

Dans une architecture headless, il y a deux parties distinctes :

• Sanity = ton back-office. C'est là que tu écris et stockes ton contenu (textes, images, métadonnées).
• Next.js = ton front-end. C'est lui qui va récupérer le contenu via une API et l'afficher à tes visiteurs.

Ces deux parties ne se "voient" pas directement : elles communiquent via l'API de Sanity. C'est ce découplage qui donne toute la flexibilité à cette architecture.

Étape 2 ) Créer ton projet Next.js

Dans ton terminal :

npx create-next-app@latest mon-blog
cd mon-blog

Choisis les options suivantes quand on te demande : TypeScript → Non (pour rester simple), App Router → Oui, Tailwind → selon ta préférence.

Étape 3 ) Créer ton projet Sanity

Dans le même dossier, lance :

npm create sanity@latest -- --project monprojet --dataset production --template clean

Sanity va créer un sous-dossier studio avec tout le back-office. Lance-le avec :

cd studio
npm run dev

Tu peux maintenant ouvrir http://localhost:3333 et voir ton Sanity Studio, vide pour l'instant.

Étape 4 ) Définir ton premier schéma

Un schéma dans Sanity, c'est la définition de la structure de ton contenu. Pour un blog, on veut des "articles" avec un titre, un contenu, et une date.

Dans studio/schemaTypes/, crée un fichier article.js :

export const article = {
  name: 'article',
  title: 'Article',
  type: 'document',
  fields: [
    {
      name: 'title',
      title: 'Titre',
      type: 'string',
    },
    {
      name: 'slug',
      title: 'Slug (URL)',
      type: 'slug',
      options: { source: 'title' },
    },
    {
      name: 'publishedAt',
      title: 'Date de publication',
      type: 'datetime',
    },
    {
      name: 'body',
      title: 'Contenu',
      type: 'text',
    },
  ],
}

Puis dans studio/schemaTypes/index.js, ajoute :

import { article } from './article'
export const schemaTypes = [article]

Retourne dans ton Studio : tu vois maintenant un type "Article" dans le menu. Crée 2-3 articles de test.

Étape 5 ) Connecter Next.js à Sanity

Reviens dans le dossier racine de ton projet Next.js et installe le client Sanity :

npm install @sanity/client

Crée un fichier lib/sanity.js :

import { createClient } from '@sanity/client'

export const client = createClient({
  projectId: 'TON_PROJECT_ID', // visible dans sanity.io/manage
  dataset: 'production',
  useCdn: true,
  apiVersion: '2024-01-01',
})

Remplace TON_PROJECT_ID par l'identifiant visible dans ton tableau de bord Sanity.

Étape 6 ) Afficher la liste des articles

Dans app/page.js, remplace le contenu par :

import { client } from '../lib/sanity'

export default async function Home() {
  const articles = await client.fetch(`*[_type == "article"] | order(publishedAt desc)`)

  return (
    <main>
      <h1>Mon blog</h1>
      <ul>
        {articles.map((article) => (
          <li key={article._id}>
            <a href={`/articles/${article.slug.current}`}>
              {article.title}
            </a>
          </li>
        ))}
      </ul>
    </main>
  )
}

La requête *[_type == "article"] est du GROQ le langage de requête de Sanity. Il fonctionne comme SQL mais pour du JSON structuré.

Étape 7 ) Créer la page de détail d'un article

Crée le fichier app/articles/[slug]/page.js :

import { client } from '../../../lib/sanity'

export default async function ArticlePage({ params }) {
  const article = await client.fetch(
    `*[_type == "article" && slug.current == $slug][0]`,
    { slug: params.slug }
  )

  return (
    <main>
      <h1>{article.title}</h1>
      <p>{new Date(article.publishedAt).toLocaleDateString('fr-FR')}</p>
      <p>{article.body}</p>
    </main>
  )
}

Lance npm run dev dans le dossier Next.js et ouvre http://localhost:3000. Tu dois voir tes articles Sanity s'afficher !

Ce que tu as appris

En suivant ce tutoriel, tu as mis en place une architecture headless complète : tu as défini un schéma de contenu dans Sanity, créé du contenu via le Studio, puis récupéré et affiché ce contenu dans Next.js via une requête GROQ. C'est exactement ce qu'utilise ce site Beyond Pages.

Pour aller plus loin :

• Ajoute des images à tes articles avec le type image dans Sanity et @sanity/image-url côté Next.js
• Explore la documentation Sanity Learn pour des cas d'usage plus avancés
• Consulte l'article Intégrer Sanity dans Next.js : stratégies de rendu pour aller plus loin sur les performances