L'architecture au scroll

1

Un visiteur demande une page

La requête arrive sur une route Next.js. Pour la home, c'est un composant serveur minuscule : il cherche la page au slug / dans la composition et délègue tout à l'assembleur.

src/app/page.tsx

2 La composition — la source de vérité

Un simple objet TypeScript décrit le site entier : le chrome (variantes du header et du footer), les pages, et pour chaque page la liste ordonnée des sections avec leur variante — plus les groupes d'animation. Dans un projet client, ce fichier est figé par le bake à partir des choix du playground.

src/blocks/composition.ts

3 L'assembleur monte la page

Il traduit chaque id de section en composant via son registre SECTIONS, découpe la liste selon les groupes d'animation, et enveloppe le tout dans le chrome partagé (header + footer).

src/blocks/page-assembler.tsx

4 La coque décore

Chaque section passe dans une SectionShell : largeur (pleine ou contenue), fond (doux / marque / mesh), séparateurs SVG. La décoration est externe — la section n'en sait rien.

src/blocks/section-shell.tsx

5 La section va chercher ses données

Le composant serveur de la section (ex. le hero) demande son contenu… mais jamais à Sanity ni à Prismic directement : il parle au contrat — l'interface CmsClient. Un import direct d'un CMS ici casserait le lint, donc la CI.

src/blocks/hero/section.tsx → @/cms

6 Le sélecteur choisit l'adapter

Le contrat charge l'implémentation désignée par NEXT_PUBLIC_CMS_PROVIDER — par import dynamique : le code de l'autre provider n'est jamais embarqué. Changer de CMS, c'est changer cette variable.

src/cms/index.ts

7 La normalisation, à la frontière

Le document brut du CMS (format propriétaire : _id, uid, rich text natif…) est projeté vers la forme du contrat : id, slug, updatedAt, rich text opaque. Passé cette douane, plus aucun format propriétaire ne circule dans le site.

src/cms/<provider>/normalize.ts

8 La variante rend — en tokens

La variante choisie reçoit les données et produit le HTML. Elle ne connaît aucune couleur, aucun rayon : uniquement des tokens (bg-brand, rounded-card, py-section) — c'est le design actif qui décide des valeurs. Voilà pourquoi le même bloc peut être brutalist, glass ou editorial sans changer une ligne.

src/blocks/hero/variants/centered.tsx + globals.css