De Magento a Next.js: Cómo reconstruí BuenGolpe desde cero (y lo que aprendí)

Desarrollo web · E-commerce · Next.js · SEO

Hay proyectos que te cambian como desarrollador. Este es uno de ellos.

Durante semanas he estado trabajando en la migración completa de BuenGolpe — la tienda de golf online con la que colaboro desde el año 2010! — desde Magento a un stack moderno construido sobre Next.js. En este artículo cuento por qué lo hice, cómo lo hice, qué me encontré por el camino y todo lo que he desarrollado. Sin edulcorar.

El problema con Magento

BuenGolpe llevaba años funcionando sobre Magento 2. Es una plataforma sólida, madura, con muchas funcionalidades de serie. Pero tiene un problema fundamental que se hace más evidente con el tiempo: es lenta por defecto.

El TTFB (Time To First Byte) superaba los 2 segundos en páginas de categoría. El LCP (Largest Contentful Paint) rondaba los 4-5 segundos. Google Core Web Vitals en rojo. Y lo más frustrante: cada optimización de rendimiento en Magento es una batalla contra la arquitectura.

Además, cualquier personalización requería entender el sistema de plugins de Magento, los eventos, los observers… Una curva de aprendizaje enorme para cambios que en otros stacks llevarían horas.

La gota que colmó el vaso fue ver cómo la competencia, con plataformas más modernas, empezaba a superar posiciones que BuenGolpe había mantenido durante años.

Había que hacer algo radical.

Por qué Next.js

Valoré varias opciones: Shopify (demasiado cerrado, sin control real), Astro (faltaba madurez en e-commerce), Remix (interesante pero ecosistema más pequeño), y Next.js.

Next.js ganó por varias razones:

• SSR + RSC (React Server Components): Puedo decidir qué se renderiza en servidor y qué en cliente. Fundamental para SEO y rendimiento.
• Turbopack: Compilación increíblemente rápida en desarrollo.
• App Router: Una forma de pensar el routing que escala muy bien con layouts, Loading states y Suspense boundaries nativos.
• Ecosistema: Prisma, next-intl, Auth.js, Tiptap… todo encaja.

El stack final quedó así:

Frontend:      Next.js 16 (App Router + Turbopack)
Base de datos: PostgreSQL + Prisma ORM
Auth:          Auth.js (NextAuth v5) con soporte Passkeys
i18n:          next-intl (ES/EN)
Emails:        Resend + React Email
Pagos:         Redsys (pasarela española)
IA:            Google Gemini API
Push:          Web Push API nativa
Deploy:        VPS propio

La migración de datos

Lo primero y más doloroso: los datos. Magento tiene una estructura de base de datos compleja (EAV — Entity Attribute Value) que no se traduce directamente a un esquema relacional limpio.

Desarrollé scripts de migración en TypeScript que:

1. Extraen productos con todos sus atributos del EAV de Magento
2. Normalizan imágenes (rutas relativas → URLs absolutas)
3. Mapean categorías con sus jerarquías
4. Importan clientes, pedidos e historial
5. Migran las traducciones al sistema de internacionalización propio

Más de 5.000 productos con sus variantes, imágenes, descripciones y atributos técnicos. El proceso tardó noches. Los scripts de migración fallaban, los encoding de caracteres daban problemas, las URLs de imágenes necesitaban normalizarse… Nada que no se pudiera resolver, pero nada trivial tampoco.

Lo que se construyó

Una vez migrados los datos, empezó la parte interesante: construir todas las funcionalidades que Magento daba de serie, pero mejor.

🛒 E-commerce completo

El núcleo de la tienda:

• Catálogo con filtros dinámicos por marca, precio, atributos personalizados (loft, material, género…) y ordenación múltiple
• Búsqueda con sugerencias en tiempo real
• Fichas de producto con variantes (tallas, colores), galería de imágenes, reseñas verificadas y rating
• Carrito con sidebar deslizante
• Wishlist compartible por URL
• Checkout en un paso con múltiples métodos de envío

💳 Integración Redsys

Integrar Redsys en Next.js no tiene mucha documentación. La pasarela española sigue teniendo una API con cierto sabor a los años 2000 (firmas HMAC-SHA256, parámetros en base64, redirecciones de formulario…), pero funciona y es la referencia para pagos en España.

Desarrollé el servidor de webhooks para confirmación de pago, gestión de estados de pedido y devoluciones.

🌍 Internacionalización real

La tienda funciona en español e inglés con:

• URLs localizadas (/category/palos-de-golf ↔ /en/category/golf-clubs-main-shop)
• Traducciones de contenido (nombres de categorías, descripciones, bloques SEO)
• Hreflang correcto en todas las páginas
• Redirección automática según el idioma del navegador

🔐 Autenticación con Passkeys

Implementé Auth.js con soporte completo de WebAuthn / Passkeys. Los usuarios pueden registrarse y hacer login con biometría (Face ID, huella dactilar) sin recordar contraseñas. Es el futuro de la autenticación y muy pocas tiendas online lo tienen todavía.

🤖 Asistente IA

Un chatbot integrado que usa la API de Gemini y tiene acceso al catálogo de productos. El usuario puede preguntar cosas como "¿qué driver recomendáis para un handicap 18?" y el asistente busca en el catálogo real y da recomendaciones con enlaces directos.

La implementación usa function calling de Gemini para que el modelo pueda ejecutar búsquedas en la base de datos como herramienta, y streaming para que las respuestas aparezcan progresivamente.

🔔 Push Notifications

Notificaciones push nativas usando la Web Push API — sin Firebase, sin servicios de terceros. El servidor genera las claves VAPID, gestiona las suscripciones y envía notificaciones directamente.

El panel de admin permite enviar notificaciones a todos los suscriptores o a segmentos específicos con imagen, título y URL de destino.

🎯 Programa de Fidelidad

Sistema de puntos con acumulación automática por compra verificada (solo se acreditan puntos cuando el pago se confirma vía webhook de Redsys, no cuando el pedido se crea). Los puntos se muestran en los emails de confirmación de pedido y en el dashboard del usuario.

📧 Newsletter con IA

El panel de administración tiene un wizard de creación de newsletters que usa IA para generar el contenido (asunto, cuerpo del email, productos destacados) a partir de un briefing simple. El envío va por Resend con templates de React Email.

🖼️ OG Images dinámicas

Cada página genera automáticamente su propia imagen Open Graph con el título, descripción y branding de BuenGolpe. Esto mejora el CTR cuando se comparte en redes sociales.

📦 Panel de Administración

Un admin panel completo construido a medida:

• Gestión de productos con editor de texto enriquecido (Tiptap) e importación IA automática de fichas desde URLs de proveedores
• Gestión de categorías con posicionamiento y SEO
• Gestión de pedidos, envíos e impresión de albaranes
• CRM de clientes
• Reseñas con moderación
• Analytics básicos
• Importación masiva de productos vía CSV

Las innovaciones SEO

Aquí es donde creo que el proyecto hace algo realmente diferencial.

Structured Data completo

Cada página de categoría genera automáticamente 5 schemas JSON-LD distintos:

BreadcrumbList   → Ruta de navegación
CollectionPage   → Clasificación de la página
ItemList+Product → Lista de productos con precio, stock e imagen
Organization     → Datos de empresa
WebSite          → Con SearchAction para buscador interno
FAQPage          → Auto-generado cuando hay preguntas (opcional)

El ItemList incluye el schema Product completo por cada ítem: nombre, URL, imagen, SKU, marca, precio, disponibilidad, condición y rating. Google puede usar esto para mostrar productos directamente en la SERP.

Bloques de contenido SEO con modal

Quizás la funcionalidad que más me gusta de todo el proyecto, y que surgió de una reflexión sobre UX:

En lugar del típico acordeón que expande texto SEO al final de la página de categoría (aburrido, feo, y molesto en móvil), implementé un sistema donde:

1. El administrador puede crear bloques de contenido rico (FAQs, guías, novedades) por categoría desde el panel admin, con RichTextEditor y soporte bilingüe
2. En el frontend, los bloques aparecen como tarjetas elegantes al final de la página
3. Al hacer clic, se abre un modal en lugar de expandir el texto inline

La clave técnica: el contenido siempre está en el DOM dentro de un elemento <details> nativo (que Google indexa a peso completo, confirmado oficialmente por John Mueller). JavaScript intercepta el evento toggle y abre el modal. Si JS falla, el <details> expande de forma nativa.

Es el mejor equilibrio posible: SEO perfecto + UX premium + sin riesgo de penalización.

Rendimiento resultante

Los React Server Components son clave aquí. El HTML llega al cliente prácticamente completo — sin hidratación costosa, sin flash de contenido. El grid de productos usa Suspense streaming, así que el esqueleto de carga se muestra inmediatamente mientras los datos se resuelven en paralelo.

Lo que aprendí

El rendimiento y el SEO técnico son condición necesaria pero no suficiente. He construido algo técnicamente sólido pero el SEO real se gana con contenido de calidad y autoridad de dominio. Los schemas y la velocidad ayudan a Google a entender y servir mejor el contenido, pero sin contenido que merezca la pena posicionar, la técnica sola no mueve rankings.

Magento no era el problema, el problema era la falta de control. Migrar fue la decisión correcta no porque Magento sea malo, sino porque tener control total sobre cada capa de la arquitectura permite iterar mucho más rápido e implementar features que en Magento habrían requerido extensiones de terceros, customizaciones complejas o sencillamente no eran posibles.

La IA como herramienta de desarrollo, no de sustitución. He usado IA extensamente en este proyecto — para generar código, para depurar problemas, para pensar alternativas de arquitectura. Pero cada línea la he revisado, entendido y adaptado. La IA acelera, pero el criterio técnico sigue siendo humano.

¿Qué sigue?

El proyecto en producción es el punto de partida, no el destino. En el pipeline:

• Club Fitting Virtual con IA: El usuario responde 5 preguntas sobre su juego (hándicap, velocidad de swing, error habitual, presupuesto) y la IA genera una recomendación personalizada de bolsa completa con links directos al catálogo. Nadie lo tiene en España en golf.
• Más contenido SEO: Los bloques están construidos, ahora toca escribir el contenido que marca la diferencia.
• Internacionalización del catálogo: Traducción de fichas de producto al inglés.

Si estás pensando en migrar tu e-commerce de Magento o de cualquier plataforma cerrada, mi consejo es este: hazlo, pero sé consciente de que es un proyecto enorme. No solo de código — también de datos, de operativa, de reaprender cómo hacer cosas que antes dabas por resueltas.

Merece la pena.

¿Tienes preguntas sobre la migración o sobre alguna parte técnica concreta? Escríbeme.