Le bug silencieux des constructeurs de pages Sanity… et comment l’éviter
Chaque site marketing Sanity intègre un constructeur de pages : un tableau de sections, un menu d’insertion, une boucle de rendu qui associe block._type à un composant. Vous l’avez construit. Moi aussi. Tout le monde a reproduit la même chose… et chaque implémentation embarque le même bug. Vous ajoutez une nouvelle section, l’intégrez au schéma, ajoutez un composant de rendu, mettez à jour la carte et ajustez la projection GROQ. Puis vous oubliez une étape. La section s’affiche vide en production, ou disparaît du menu d’insertion, ou ne récupère aucun champ parce que la projection est manquante. Pas d’erreur. Pas de rouge. Juste un espace vide là où le contenu devrait apparaître.
Le coût caché de « ajouter une section »
Dans une configuration classique Sanity + Next.js, « ajouter une section » implique au moins cinq étapes : définition du schéma, projection GROQ, composant React, entrée de la carte de rendu et union TypeScript. Oubliez la projection GROQ et la section arrive vide. Sautez l’entrée de la carte de rendu et elle est silencieusement ignorée. Mettez à jour manuellement l’union et TypeScript peut rester muet parce que la liste maintenue à la main est désormais désynchronisée. Trois modes de défaillance différents, tous discrets, et tous ne se révèlent qu’en production.
Le vrai problème n’est pas le bug… mais la plomberie
Seul le composant est véritablement unique à votre site : son espacement, ses jetons et votre charte graphique. Les quatre autres étapes relèvent de la plomberie : « chercher _type dans une carte, appeler le composant de rendu, maintenir la carte synchronisée avec le schéma et la requête ». Ce code est presque identique dans tous les projets que vous avez construits. Pourtant, il réside dans votre dépôt, bricolé et divergent, pour la cinquième fois.
Co-localisez type, requête et rendu pour éviter les divergences
La solution ? Co-localisez le type de la section, la requête GROQ et le composant de rendu dans une seule déclaration. Définissez chaque section sous forme d’objet incluant son nom de type, les champs de projection et le composant. Puis déduisez à la fois la boucle de rendu et la projection GROQ à partir de cette même liste de sections. La projection combinée est générée automatiquement, ce qui empêche la requête de diverger du schéma. Oubliez un champ dans le composant et l’erreur apparaît dès la compilation, pas en production. Le motif est la clé ; des modules comme @maciejtrzcinski/sanity-page-builder-core en simplifient simplement l’usage.
Source : DEV Community. Synthèse éditoriale assistée par IA — TechnoExpress.