Introduction

EugeniaBravo est passé d'une simple application React monopage à une version Next.js afin d'améliorer le SEO, la visibilité et les flux éditoriaux d'un site axé sur le contenu. La migration a également remplacé AWS Amplify par Supabase, qui convient mieux aux projets de plus petite taille nécessitant tout de même l'authentification, le stockage et une base de données relationnelle.

Objectifs de la migration

Les principaux objectifs étaient d'obtenir une indexation fiable du contenu du blog, d'améliorer les performances des pages et de simplifier les opérations backend, afin que le projet reste léger sans renoncer à des fonctionnalités telles que les outils d'administration, le téléversement de médias et l'édition de contenu riche.

Technologies

La refonte s'articule autour de Next.js avec TypeScript pour le frontend et de Supabase pour le backend et le stockage.

Next.js

React

TypeScript

Supabase

Frontend et SEO

Next.js permet le rendu côté serveur et la génération statique pour le blog, ce qui signifie que les robots d'indexation reçoivent un HTML complet plutôt qu'une coquille presque vide. C'est une nette amélioration par rapport au React pur pour l'indexation dynamique, car chaque article peut fournir des métadonnées complètes, des balises canoniques et des aperçus enrichis dès qu'il est demandé.

Le build inclut des sitemaps, des règles robots et des métadonnées propres à chaque page, afin que les nouveaux articles deviennent rapidement repérables. Il améliore également le routage, l'optimisation des images et les performances de chargement globales du site public.

Backend avec Supabase

Supabase a remplacé Amplify afin de garder une stack plus légère et plus accessible pour une petite équipe. Avec Postgres, l'authentification intégrée et le stockage réunis au même endroit, il est plus facile à maintenir qu'une configuration AWS plus lourde, tout en offrant une base solide pour le tableau de bord d'administration et les flux liés aux médias.

L'authentification prend désormais en charge le MFA, les articles et les catégories sont stockés dans des tables relationnelles, et les images sont conservées dans Supabase Storage avec des solutions de repli pertinentes.

Flux de contenu

Les éditeurs gèrent les articles, les catégories et les auteurs depuis le tableau de bord d'administration, avec TinyMCE pour l'édition de contenu riche et des flux d'aperçu avant publication. Le blog utilise des slugs optimisés pour le SEO, des articles connexes et des cartes recommandées pour maintenir l'intérêt des lecteurs.

Tableau de bord d'administration

Expérience publique

Le site public combine un tunnel marketing avec un blog facile à parcourir et rapide à charger. Les pages services, témoignages, FAQ et contact sont toutes bâties sur la même base optimisée pour le SEO.

Page d'accueil

Garde-fous de la version démo

La branche de démonstration est livrée sans secrets, fonctionne sur des fixtures en mémoire et désactive les écritures afin que les évaluateurs puissent explorer l'interface en toute sécurité. Les outils d'analytique et de cookies sont conditionnés par des variables d'environnement pour isoler la démo de la production.

La démo publique est disponible avec les pages d'administration activées à l'adresse eugeniabravo-public.vercel.app.

Version précédente

Si vous souhaitez un décryptage complet de la stack originale React et Amplify, vous pouvez lire l'article précédent ici.