Nov'InvestCréation d'un site institutionnel avec Payload

Le script de migration affiche un log vert sur le terminal. En coulisses, une base de données entière vient de muter. Des dizaines de champs textuels, autrefois de simples chaînes de caractères brutes, sont désormais convertis en arbres syntaxiques complexes. L'équipe éditoriale peut enfin utiliser du texte riche sans risquer de casser la maquette millimétrée du site.

Novinvest est la vitrine numérique d'une société de gestion financière particulièrement exigeante sur son image. Le but de cette refonte était clair. Il fallait passer d'un ancien site statique figé à une plateforme de publication autonome pour le marketing, le tout avec un niveau de finition typographique irréprochable.

Pourquoi choisir un CMS headless pour la finance ?

Le site précédent remplissait son rôle d'information, mais la moindre mise à jour nécessitait de modifier le code source. L'équipe marketing voulait reprendre la main sur ses publications (rapports trimestriels, nouvelles stratégies d'investissement).

Nous avons d'emblée écarté les solutions monolithiques classiques. Le besoin de sécurité, de rapidité d'affichage et de contrôle absolu sur le code frontend nous orientait naturellement vers une architecture découplée. Payload CMS s'est imposé comme une évidence pour son écosystème TypeScript natif. Le fichier payload-types.ts agit comme l'unique source de vérité contractuelle entre l'interface d'administration et le site public.

Le mécanisme central de composition par blocs

Toutes les pages du site s'articulent autour d'un concept de blocs empilables. Il n'y a pas de gabarits rigides. L'éditeur compose sa page en piochant dans un catalogue de composants pré-développés.

La liberté de création est quasi totale pour l'équipe, mais elle reste fermement encadrée par le code. Chaque bloc possède ses propres validations de champs. La typographie, véritable cœur de l'interface, repose sur un contraste assumé. La police Cormorant Garamond gère l'autorité des titres, tandis que l'Inter assure la lisibilité parfaite des données denses.

La migration complexe vers l'éditeur de texte Lexical

Le plus gros défi s'est présenté lors de la gestion du texte riche. Le client avait besoin de mettre en forme ses articles (gras, listes, liens) et le simple champ textarea de l'ancienne base ne suffisait plus. Payload 3 embarque nativement Lexical, le puissant éditeur open source développé par Meta.

Le problème résidait dans l'existant. Le site comptait déjà des dizaines de contenus en base de données. Il était impensable de tout resaisir manuellement pour s'adapter au format JSON attendu par Lexical.

J'ai donc écrit un script de migration automatique qui s'exécute à chaque déploiement. Ce script parcourt les collections et convertit le texte brut en un arbre de syntaxe abstraite

return {
	root: {
		type: 'root',
			children: paragraphs.map(p => ({
				type: 'paragraph',
				children: [{ type: 'text', value: p }]
			}))
		}
	};
};

Un autre obstacle silencieux concernait le routage des liens. Lexical gère les liens internes sous forme d'identifiants MongoDB de base de données (et non des adresses web directes). Il a fallu créer un convertisseur personnalisé côté React pour intercepter ces identifiants, résoudre le nom de la page via les types générés et construire l'URL finale correspondante.

Métriques lighthouse

Un site institutionnel n'a pas le droit d'être lent. La confiance de l'utilisateur passe aussi par l'instantanéité de l'interface. En associant la génération statique de Next.js, l'optimisation drastique des polices au build et la distribution des médias sur le cloud, le front-end a été allégé au maximum. Le navigateur reçoit une page directement exploitable, sans calcul Javascript inutile lors du premier rendu. L'audit de performance confirme cette approche radicale, avec des signaux web essentiels (Core Web Vitals) irréprochables.

Une séparation stricte des contenus par collections

L'organisation des données dans le CMS reflète précisément la structure de l'entreprise financière. Nous avons segmenté l'information pour éviter les erreurs de saisie.

La stack Next.js et Payload en détail

Le projet repose sur un écosystème moderne pensé pour la robustesse des types et la vitesse de rendu statique. Les médias sont distribués dans le cloud pour alléger le serveur de base de données.

Ce que j'ai retenu de ce projet

La création de ce site institutionnel a validé plusieurs choix architecturaux pour mes développements futurs.

1. La génération automatique de types par Payload CMS est un filet de sécurité exceptionnel (les erreurs de variables manquantes disparaissent).
2. Les migrations de données d'un format texte vers un format AST riche (comme Lexical) nécessitent d'être anticipées dès le premier jour du projet.
3. Le mode "Live Preview" des CMS modernes est très sensible aux configurations de cookies locaux (le protocole HTTPS est obligatoire même en phase de développement).