Sobre el proyecto
Desarrollo completo del sitio web corporativo de CarBen Soluciones Gráficas S.L., empresa familiar con más de 30 años en el sector de artes gráficas en Velilla de San Antonio, Madrid. El proyecto abarca desde la arquitectura de componentes en Next.js 15 (App Router) hasta el despliegue en Cloudflare Workers con OpenNext, pasando por la gestión del DNS, los correos corporativos con Google Workspace, la integración de Google Analytics 4 con consentimiento explícito conforme al RGPD, y un sistema de envío de formularios transaccional mediante la API de Resend. Se priorizó el rendimiento (Core Web Vitals), el SEO técnico con datos estructurados Schema.org y una arquitectura Privacy by Design para el manejo de datos de contacto.
Funcionalidades clave
- Arquitectura Next.js 15 App Router con separación estricta Server / Client Components para máximo rendimiento en SSR
- Sistema de animaciones scroll-reveal propio basado en IntersectionObserver, sin dependencias externas
- Formulario de contacto con validación en cliente y servidor, rate limiting, honeypot anti-spam y envío transaccional vía Resend API
- Panel de consentimiento de cookies RGPD-compliant con localStorage, carga condicional de GA4 y bloqueo de scroll hasta decisión del usuario
- SEO técnico completo: sitemap.xml y robots.txt generados dinámicamente, datos estructurados Schema.org (LocalBusiness, FAQPage, BreadcrumbList, Service) y meta tags Open Graph y Twitter Card
- Despliegue en Cloudflare Workers mediante OpenNext con CDN global, compatibilidad nodejs_compat y caché de assets estáticos con TTL de un año
- Gestión del DNS completa en Cloudflare con registros MX para Google Workspace y correos corporativos @carbensl.com
- Integración de Google Analytics 4 con anonimización de IP, Google Search Console con verificación por meta tag y sitemap enviado manualmente
- Optimización de imágenes con next/image (AVIF + WebP), tamaños responsivos precisos por breakpoint y preload de recursos críticos above-the-fold
- Cabeceras de seguridad HTTP configuradas a nivel de Next.js: HSTS, X-Content-Type-Options, Referrer-Policy y Permissions-Policy
El reto
El despliegue en Cloudflare Workers con OpenNext requirió resolver incompatibilidades entre el runtime Edge de Cloudflare y las APIs de Node.js que Next.js usa internamente. Además, configurar el sistema de cookies RGPD-compliant sin bloquear el renderizado SSR y evitar el hydration mismatch entre servidor y cliente fue técnicamente exigente.
La solución
Para el despliegue, utilicé el adaptador @opennextjs/cloudflare con la flag nodejs_compat y global_fetch_strictly_public, ajustando el wrapper y el converter para el entorno Edge. El panel de cookies se construyó como Client Component con estado inicial neutro en servidor ('pending'), leyendo localStorage solo tras el montaje en cliente para eliminar el mismatch. El rate limiting del formulario se implementó en memoria en el propio API Route, compatible con el modelo de ejecución de Workers.
Qué aprendí
Este proyecto me permitió profundizar en las diferencias entre los runtimes Node.js y Edge de Cloudflare, y en cómo OpenNext abstrae Next.js para funcionar en Workers. También adquirí experiencia real en configuración de DNS, gestión de correo corporativo con Google Workspace, cumplimiento del RGPD en producción y el flujo completo de entrega a un cliente no técnico: desde el briefing hasta la formación en uso del panel de Google.
Ver el proyecto