Introducción

EugeniaBravo evolucionó de una sencilla aplicación de página única en React a un proyecto construido con Next.js para mejorar el SEO, la visibilidad y los flujos editoriales de un sitio orientado al contenido. La migración también reemplazó AWS Amplify por Supabase, que encaja mejor en proyectos más pequeños que aun así necesitan autenticación, almacenamiento y una base de datos relacional.

Objetivos de la migración

Los principales objetivos eran lograr que el contenido del blog se indexara de forma fiable, mejorar el rendimiento de las páginas y simplificar las operaciones de backend para que el proyecto pudiera mantenerse ligero sin renunciar a funciones como las herramientas de administración, la subida de archivos multimedia y la edición de contenido enriquecido.

Tecnologías

La reconstrucción se centra en Next.js con TypeScript en el frontend y Supabase para el backend y el almacenamiento.

Next.js

React

TypeScript

Supabase

Frontend y SEO

Next.js permite el renderizado en el servidor y la generación estática del blog, lo que significa que los rastreadores reciben el HTML completo en lugar de una estructura prácticamente vacía. Esto supone una gran mejora frente a React puro para la indexación dinámica, porque cada publicación puede entregar metadatos completos, etiquetas canónicas y vistas previas enriquecidas en el momento en que se solicita.

El proyecto incluye sitemaps, reglas de robots y metadatos por página para que los nuevos artículos se vuelvan visibles rápidamente. También mejora el enrutamiento, la optimización de imágenes y el rendimiento general de carga del sitio público.

Backend con Supabase

Supabase reemplazó a Amplify para mantener el stack más ligero y accesible para un equipo más pequeño. Con Postgres, autenticación integrada y almacenamiento en un solo lugar, es más fácil de mantener que una configuración de AWS más grande, sin dejar de ofrecer una base sólida para el panel de administración y los flujos de trabajo multimedia.

La autenticación ahora admite MFA, las publicaciones y categorías viven en tablas relacionales, y las imágenes se almacenan en Supabase Storage con alternativas sensatas.

Flujo de trabajo de contenido

Los editores gestionan publicaciones, categorías y autores desde el panel de administración, con TinyMCE para la edición de contenido enriquecido y flujos de vista previa antes de publicar. El blog usa slugs amigables para el SEO, publicaciones relacionadas y tarjetas recomendadas para mantener el interés de los lectores.

Panel de administración

Experiencia pública

El sitio público combina un embudo de marketing con un blog fácil de explorar y de carga rápida. Las páginas de servicios, testimonios, preguntas frecuentes y contacto están construidas sobre la misma base amigable para el SEO.

Página de inicio

Salvaguardas de la versión de demostración

La rama de demostración se publica sin secretos, funciona con datos de prueba en memoria y desactiva las escrituras para que los revisores puedan explorar la interfaz de forma segura. La analítica y las herramientas de cookies están controladas mediante variables de entorno para mantener la demo aislada de producción.

La demo pública está disponible con las páginas de administración habilitadas en eugeniabravo-public.vercel.app.

Versión anterior

Si quieres un desglose completo del stack original de React y Amplify, puedes leer la publicación anterior aquí.