Resumen ejecutivo
- Cliente
- Promocionales J&J
- Servicios
- Productos web B2B
- Sitio y código
- Ver sitio publicado (se abre en una pestaña nueva) Ver repositorio público (se abre en una pestaña nueva)
- Resultado técnico documentado
- 840 productos en 39 categorías, todos alcanzables mediante enlaces HTML gracias a la paginación estática.
- El caso describe la arquitectura y las funciones del sitio; no se publican métricas de tráfico ni de ventas.
El problema
El catálogo de 840 productos tenía categorías vacías y no todos los productos eran alcanzables mediante enlaces rastreables. Hacía falta ordenar la taxonomía y facilitar que el cliente encontrara productos y armara su solicitud.
La solución
Exportación estática de Next.js con paginación rastreable, una reclasificación del catálogo reproducible por script, un buscador por nombre, referencia y filtros reales, y una cotización multiproducto que genera un mensaje editable para WhatsApp.
Alcance técnico
- Sitio estático con Next.js 14 (exportación estática) y Tailwind CSS
- Reclasificación del catálogo con un script reproducible
- Buscador con sinónimos y filtros por categoría, material y técnica
- Cotización guiada multiproducto con mensaje editable
- Datos estructurados factuales y verificación SEO del build
Decisiones técnicas
Datos estructurados factuales
Fichas Product sin precios ni marcas inventados, y Service por ciudad en lugar de un negocio local ficticio.
Taxonomía reproducible
La reclasificación se hace con un script versionado: se poblaron 8 categorías vacías con productos reales y se retiraron 5 sin oferta.
Estado de búsqueda en la URL
La consulta y los filtros viven en la URL, se conserva la posición y hay estados para «sin resultados» y reintento ante un fallo.
Qué se entregó
- Imágenes servidas por Netlify Image CDN mediante un loader propio
- Analítica de uso sin datos personales (búsqueda, ficha, cotización y clic a WhatsApp)
- Pruebas automáticas de las reglas de cotización y del buscador
- Comprobaciones de UX automatizadas en 9 anchos de pantalla
Cómo funciona, paso a paso
- 01 El catálogo vive en JSON versionado: productos, categorías y artículos del blog.
- 02 Un script reclasifica el catálogo de forma reproducible antes de publicar.
- 03 Next.js genera en el build las fichas, la tienda y las categorías con paginación estática.
- 04 El índice de búsqueda se publica como un JSON estático que consulta el buscador en el navegador.
- 05 La cotización guiada valida las cantidades por producto y compone un mensaje editable para WhatsApp.
- 06 Un script de verificación SEO revisa el sitio exportado en modo estricto.
- 07 Netlify publica el sitio y optimiza las imágenes con su Image CDN.
Stack tecnológico
- Next.js 14
- Exportación estática del sitio
- React 18 + TypeScript
- Interfaz y tipado
- Tailwind CSS
- Estilos
- GSAP
- Animaciones
- Netlify Image CDN
- Optimización de imágenes
- Netlify
- Despliegue y cabeceras