Comment NextBlock Fonctionne : Regard Sous le Capot
Comment NextBlock fonctionne : architecture pour un CMS axé sur l'expérience visuelle
NextBlock est conçu pour fonctionner dès le premier jour avec un socle Nx. Applications et librairies cohabitent pour que le même code propulse l'expérience CMS hébergée et le template open-source. Au lieu d'éparpiller la configuration, les chemins TypeScript, le preset Tailwind et les règles lint sont centralisés à la racine, gardant tous les packages alignés.
Architecture monorepo et flux de dépendances
Le dossier apps/nextblock contient l'interface Next.js (site public + CMS). Le CLI apps/create-nextblock la reflète et publie un outil de scaffolding. Les briques réutilisables vivent dans libs/ : UI et design tokens via @nextblock-cms/ui, helpers (traductions, R2, règles Supabase) via @nextblock-cms/utils, et la base de données + migrations dans @nextblock-cms/db. Les travaux futurs (SDK, e-commerce) ont déjà leurs librairies dédiées.
Ce découplage est lisible via nx graph : un changement dans l'éditeur impacte clairement les apps dépendantes. Les alias de tsconfig.base.json et le tailwind.config.js partagé assurent une cohérence de thème et d'outils entre pages marketing, back-office et projets générés.
En pratique, cela accélère les livraisons sans régressions : migrations dans libs/db, primitives UI dans libs/ui, et le CLI synchronise simplement en aval—pas de dettes de copier/coller ni de configs divergentes.
Stack technique et exécution
Le stack—Next.js 16, Supabase, Tailwind CSS, shadcn/ui—équilibre vélocité et performance. L'App Router active les Server Components et l'ISR pour un rendu edge rapide. Supabase gère Postgres/Auth/Storage, réduisant l'opérationnel tout en gardant la liberté SQL. Tailwind + shadcn/ui fournissent des blocs réutilisables pour le CMS, le site marketing et les projets générés.
nx serve nextblock
nx run-many -t build --all
supabase db push
Éditeur basé sur Tiptap
Le package @nextblock-cms/editor transforme Tiptap v3 en surface d'édition robuste : mise en forme riche, menus contextuels, compteurs de caractères, blocs de code avec syntax highlighting, tables, listes de tâches, et plus. Éditor et template consomment la même librairie pour garantir la parité de contenu.
En résumé
Chaque choix architectural se renforce : Nx garde les dépendances lisibles, l'app Next.js impose une UX cohérente, les migrations Supabase codifient l'accès, et l'éditeur Tiptap assure une expérience identique pour tous les contributeurs.