OpenNext: O cómo desplegar tu app de Next.js en Cloudflare sin venderle tu alma a Vercel

TL;DR

OpenNext es una iniciativa open-source para poder desplegar apps de Next.js donde te dé la gana, no solo en Vercel. Lo guay es que te deja usar todo el potencial de Next.js (SSR, ISR, etc.) en sitios como Cloudflare Workers, aprovechando su free tier y sin estar atado a nadie. No es perfecto y tiene sus cosillas, pero es un paso de gigante para la libertad del desarrollador.

¡Buenas! Aquí estamos de nuevo. Hoy quiero hablaros de una de esas movidas que te alegran el día como DevOps, sobre todo si, como a nosotros, te gusta tener el control de tus cosas y usar todos los free tiers.

La historia de siempre con Next.js

A ver, que no se me malinterprete. Next.js está guay. Es un framework potente, te soluciona un montón de papeletas y para hacer webs modernas va de lujo. Nosotros lo usamos, como usamos otros. El problema no es el framework, es el ecosistema que se ha montado alrededor.

Parece que si quieres usar todas sus features tochas (SSR, ISR, Middleware en el edge, optimización de imágenes...), el camino de baldosas amarillas te lleva siempre al mismo sitio: Vercel. Y oye, Vercel es un productazo, pero a nadie le gusta sentir que le están llevando del hocico a un corral del que luego es difícil salir. Eso, amigos, huele a "vendor lock-in" que tira para atrás. Aparte de que es el envoltorio de AWS más caro de la historia

¿Y si te dijera que la comunidad, como siempre, ha venido al rescate?

Pues eso es OpenNext. Ni más ni menos. Es una iniciativa open-source, apoyada por gente bastante tocha como la comunidad de SST y las propias empresas Cloudflare y Netlify, que se hartaron de lo mismo.

La idea de OpenNext es simple: crear un "adaptador" universal. Una herramienta que coge tu aplicación de Next.js y la empaqueta para que pueda correr en la infraestructura que a ti te dé la gana. AWS, Netlify y, la que nos pone ojitos a nosotros, Cloudflare.

La magia: Desplegando en Cloudflare Workers como si nada

Aquí es donde la cosa se pone interesante. Como ya os contamos en un post anterior, somos muy fans del free tier de Cloudflare. Es una barbaridad lo que te dan gratis. El problema era que desplegar una app full-stack de Next.js ahí era un cristo.

OpenNext te lo soluciona. Cuando lo ejecutas, hace varias cosas:

• Coge tu código del servidor (SSR, API Routes) y lo empaqueta en un Cloudflare Worker.
• Sube tus archivos estáticos (CSS, JS, imágenes) a Cloudflare Pages.
• Configura R2 (su S3) para que funcione el caché de Next.js (para ISR y esas vainas).
• Te apaña la optimización de imágenes para que use la de Cloudflare.

Básicamente, hace de traductor. Convierte el "idioma Vercel" en el que Next.js piensa a "idioma Cloudflare". Y todo esto con un comando.

Pero no todo es color de rosa (de momento)

A ver, con calma. La iniciativa es la hostia, pero no es magia potagia. Está en desarrollo activo (la versión para Cloudflare es una 1.0.0-beta a día de hoy) y tiene sus cosillas. Hay usuarios en GitHub reportando que a veces el rendimiento no es el esperado o que se pegan con los límites de tamaño de los Workers si la app es muy grande. Integrar algunas librerías de terceros también puede dar algún que otro dolor de cabeza.

No es para asustarse, es para ser realistas. Es una tecnología nueva y la comunidad está currando a tope para pulirla. Pero si te vas a meter, que sepas que igual te toca remangarte un poco.

Entonces, ¿vale la pena?

Para nosotros, la respuesta es un sí como una catedral. ¿Por qué?

• El Free Tier: Poder desplegar una aplicación full-stack bastante seria, con funciones en el edge y todo el percal, sin pagar un euro, es una locura.
• Tú tienes el control: No dependes de una plataforma mágica. Tu infraestructura está definida en tu código. ¿Qué mañana te quieres ir a AWS? Pues cambias el adaptador y a correr. Libertad.
• Rendimiento (potencialmente) brutal: Tu código server-side se ejecuta en la red global de Cloudflare, pegadito al usuario. Cuando esté maduro, esto va a volar.

OpenNext es un ejemplo muy bueno de por qué el open-source es genial. Es la comunidad auto-organizándose para darnos a los desarrolladores más poder y flexibilidad. Así que si estás empezando un proyecto con Next.js y no te apetece casarte con Vercel, échale un ojo. Igual te toca pelearte un poco, pero lo que ganas en libertad y ahorro, merece la pena.

Nos vemos en la red 👋.