Conoce Vinext, la alternativa a Next.js construida sobre Vite
Conoce cómo Vinext lleva aplicaciones Next.js a Vite, qué admiten sus API y destinos de despliegue, sus límites de compatibilidad y cómo probar un proyecto existente.
Vinext es un plugin de Vite de código abierto creado por Cloudflare que reimplementa la API de Next.js. Gracias a ello, un código base existente con App Router o Pages Router puede compilarse y servirse con Vite en lugar de con el toolchain de Next.js. Cloudflare anunció la versión 1.0 el 28 de septiembre de 2026.
Muchos equipos aprecian Next.js, pero no el hosting hacia el que este los empuja, y migrar una aplicación grande a otro framework solo para cambiar de proveedor es difícil de justificar. Vinext ofrece otra vía. Este artículo explica qué admite Vinext, dónde puede desplegarse, los comandos exactos para probarlo en tu propia aplicación y las carencias que la propia Cloudflare documenta.
Puntos clave
- Vinext conserva tus archivos
app/,pages/ynext.configy sustituye únicamente la capa que los compila y los sirve, lo que lo convierte en un cambio de plataforma, no en una reescritura. - Cloudflare publica dos cifras de compatibilidad: el anuncio de la versión 1.0 indica más de un 99 % de compatibilidad en las pruebas de las funcionalidades más solicitadas, excluidos los Cache Components, y el README afirma que alrededor del 94 % de la superficie de la API de Next.js 16 cuenta con soporte total o parcial.
npx vinext checkanaliza un proyecto Next.js en busca de incompatibilidades conocidas, ynpx vinext initprepara el proyecto para Vinext sin rompernext dev.- Cloudflare Workers es el destino de despliegue principal. Otros proveedores, como Netlify y AWS, se alcanzan mediante el plugin de Vite de Nitro.
- El soporte de Cache Components es parcial, y el README de Vinext señala OpenNext como la opción más madura para aplicaciones que necesitan un comportamiento en producción contrastado.
¿Qué es Vinext y en qué se diferencia de otras alternativas a Next.js?
Vinext es Next.js reimplementado por Cloudflare sobre Vite. Vinext nació en febrero de 2026 como un experimento de una semana impulsado por IA y llegó a la versión 1.0 siete meses después. El README deja claro que no es un fork: el núcleo se escribió desde cero para replicar la API pública de Next.js.
Por tanto, Vinext es un tipo de opción distinto de las habituales alternativas a Next.js. Pasarse a React Router, Astro o SvelteKit implica reescribir rutas, carga de datos y componentes. Vinext no toca ese código y cambia únicamente lo que lo compila y lo sirve. Tu proyecto sigue pareciendo un proyecto Next.js. Vite hace el trabajo por debajo.
¿Qué admite Vinext?
Vinext cubre ambos routers y las principales funcionalidades de servidor del Next.js moderno. El anuncio de la versión 1.0 y el README incluyen soporte para:
- App Router, Pages Router y aplicaciones híbridas que usan ambos
- React Server Components y Server Actions
- Middleware, rutas de API y route handlers
- Revalidación ISR
- Prerenderizado en tiempo de compilación mediante
generateStaticParams()ygetStaticPaths() - Exportación estática con
output: "export"
El README tiene como objetivo Next.js 16.x e indica vite ^8.0.0 como peer dependency.
Cloudflare expresa la compatibilidad de Vinext con Next.js de dos formas distintas, y ambas cifras no miden lo mismo. La publicación de la versión 1.0 indica más de un 99 % de compatibilidad en las pruebas, pero solo para las funcionalidades más solicitadas por los clientes y dejando fuera los Cache Components. El README afirma que “~94% of the Next.js 16 API surface has full or partial support” (alrededor del 94 % de la superficie de la API de Next.js 16 cuenta con soporte total o parcial). Ambas cifras proceden de Cloudflare. Ninguna sustituye a ejecutar tu propia aplicación.
¿Dónde se puede desplegar Vinext?
Vinext se despliega de forma nativa en Cloudflare Workers, y la publicación de la versión 1.0 indica que funciona con el plan gratuito de Workers. Esa misma publicación menciona Netlify y AWS Lambda como destinos de despliegue. El README explica el mecanismo: Workers se gestiona directamente con @vinext/cloudflare, mientras que Vercel, Netlify, AWS y Deno Deploy se alcanzan añadiendo el plugin de Vite de Nitro. No interviene ningún adaptador nativo para Netlify ni para Lambda.
Una configuración mínima añade un único plugin:
// vite.config.ts
import { defineConfig } from "vite";
import vinext from "vinext";
export default defineConfig({
plugins: [vinext()],
});
Para desplegar en un proveedor distinto de Cloudflare, instala nitro y añade su plugin:
// vite.config.ts
import { defineConfig } from "vite";
import vinext from "vinext";
import { nitro } from "nitro/vite";
export default defineConfig({
plugins: [vinext(), nitro()],
});
npm install nitro
NITRO_PRESET=netlify npx vite build
Cómo probar Vinext en una aplicación Next.js existente
Probar Vinext en una aplicación existente requiere dos comandos, y ninguno de ellos impide que tu flujo de trabajo actual con Next.js siga funcionando. Ejecútalos en una rama:
npx vinext check
npx vinext init
vinext check analiza el proyecto e informa de las incompatibilidades conocidas antes de que cambies nada. vinext init no es destructivo, de modo que next dev sigue funcionando junto a la nueva configuración. Solicita un destino de despliegue y, por defecto, elige Cloudflare. Desde la versión 1.0, las configuraciones para Cloudflare usan por defecto el cf CLI con un archivo cloudflare.config.ts tipado. Si prefieres mantener la configuración anterior basada en Wrangler, pasa --legacy-wrangler-cloudflare-init.
Crear una nueva aplicación con Vinext
Para un proyecto desde cero, genera la estructura de la aplicación, ejecútala, compílala y despliégala:
npm create vinext-app@latest my-app
npx vite dev
npx vite build
npx @vinext/cloudflare deploy
La versión 1.0 añade el flag --warm-cache al comando de despliegue. Este sube la nueva versión con el 0 % del tráfico, solicita a través de ella las páginas cacheables para llenar las cachés y solo entonces la promociona.
¿Cuáles son las limitaciones y carencias conocidas de Vinext?
La sección Known gaps del README enumera cuatro áreas en las que Vinext todavía no está a la altura de Next.js: Cache Components, optimización de imágenes y fuentes en tiempo de compilación, módulos nativos en el entorno de desarrollo de App Router y parte de la configuración de rutas específica de cada plataforma. Cloudflare afirma que sigue trabajando en las cuatro, por lo que ninguna es una limitación permanente.
- Cache Components y PPR:
"use cache"funciona en parte, pero el modelo completo decacheComponentsno está terminado. Los perfiles de caché, las etiquetas, los shells parciales, la reanudación, el prefetching y parte del cacheado en desarrollo y en compilación todavía pueden comportarse de forma distinta a Next.js. - Imágenes y fuentes: En Cloudflare, las imágenes pueden optimizarse en el momento en que se solicitan. Vinext aún no replica el pipeline completo de imágenes que Next.js ejecuta en tiempo de compilación, y las fuentes se cargan en tiempo de ejecución en lugar de procesarse durante la compilación.
- Módulos nativos: Paquetes como sharp, resvg, satori, lightningcss y @napi-rs/canvas pueden fallar en el entorno de desarrollo RSC de Vite. Las compilaciones de producción admiten más de ellos que el modo de desarrollo.
- Configuración de rutas: Vinext ignora los ajustes de ruta
runtimeypreferredRegion.
El README también indica que Vinext todavía no es un sustituto directo para cualquier aplicación.
Quién debería adoptar Vinext y quién debería esperar
Vinext encaja con equipos que quieren seguir escribiendo Next.js sin quedar atados a un único proveedor de hosting. Las fuentes no coinciden del todo sobre su madurez para producción. El anuncio de Cloudflare califica la versión 1.0 como lista para producción, mientras que el README responde “You can, with caution” (“Puedes, con precaución”) y señala que Vinext todavía presenta carencias de compatibilidad y aún no se ha probado en todos los tipos de aplicaciones Next.js en producción.
- Adóptalo si tu aplicación usa ambos routers, RSC, Server Actions e ISR, y quieres desplegar en Workers o a través de Nitro.
- Espera si dependes en gran medida de Cache Components, PPR o de la semántica de
"use cache", como las etiquetas y los perfiles. - Considera OpenNext si necesitas una madurez en producción contrastada. El README de Vinext explica que OpenNext trabaja a partir de la salida de
next build, por lo que cubre una mayor parte de la API de Next.js, y cuenta con una trayectoria mucho más larga.
Conclusión
Con Vinext puedes dejar Vercel sin reescribir tu aplicación Next.js. A cambio, tienes que asumir carencias documentadas, principalmente en torno a los Cache Components. Para comprobar si encaja en tu caso, crea una rama, ejecuta npx vinext check, contrasta lo que señale con las carencias conocidas y, después, ejecuta npx vinext init y compara el comportamiento con next dev. Si además quieres migrar el resto de tu toolchain, lee Getting Started with Vite+ (el README indica vp exec vinext-cloudflare deploy para proyectos con Vite+). Para el flujo de trabajo con cloudflare.config.ts que configura init, consulta A Practical Guide to Cloudflare’s New cf CLI.
Preguntas frecuentes
¿Puedo conservar mi configuración personalizada de webpack o de next/jest al pasar a Vinext?
No. Vinext funciona sobre Vite, por lo que la configuración de Turbopack y de webpack no se aplica, y los loaders o plugins personalizados de webpack deben sustituirse por plugins de Vite. El README de Vinext indica que next/jest no está soportado y recomienda Vitest en su lugar. AMP tampoco está soportado, ya que useAmp() siempre devuelve false, y el antiguo comando next export se sustituye por el ajuste output: 'export' en la configuración de Next.js.
¿Qué versiones de React y Vite requiere Vinext?
Vinext declara como peer dependencies react ^19.3.1, react-dom ^19.3.1, react-server-dom-webpack ^19.3.1 y vite ^8.0.0, y tiene como objetivo Next.js 16.x. Los proyectos con App Router también deben tener instalado @vitejs/plugin-rsc. Vinext registra ese plugin automáticamente cuando detecta un directorio app, por lo que añadir tu propia llamada a rsc() hace que la compilación falle con un error de plugin duplicado, salvo que pases rsc: false a vinext().
¿Qué cambia vinext init en un proyecto Next.js existente?
vinext init añade 'type': 'module' a package.json y renombra los archivos de configuración CommonJS, como postcss.config.js a postcss.config.cjs, para evitar conflictos con ESM. También instala los paquetes de Vite y Vinext y añade los scripts dev:vinext, build:vinext y start:vinext junto a los scripts de Next.js existentes. Como los scripts originales se mantienen, next dev y el servidor de desarrollo de Vinext pueden ejecutarse desde el mismo código base para compararlos en paralelo.
¿Sirve revalidateTag páginas obsoletas mientras se regeneran en Vinext sobre Cloudflare?
Sí, a partir de las versiones 1.1 de octubre de 2026, cuando se pasa un perfil de caché como revalidateTag(tag, 'max'). Las versiones anteriores purgaban de Workers Cache las páginas coincidentes, por lo que la siguiente petición tenía que esperar a un renderizado completo. Ahora Workers Cache y el Response Store marcan esas entradas como obsoletas y siguen sirviendo la versión cacheada mientras se regenera en segundo plano, igual que hace Next.js. Llamar a revalidateTag solo con una etiqueta, o con expire: 0, sigue haciendo que las entradas caduquen de inmediato. Las entradas obsoletas de 'use cache' también se sirven mientras se regeneran.
Gain Debugging Superpowers
Unleash the power of session replay to reproduce bugs, track slowdowns and uncover frustrations in your app. Get complete visibility into your frontend with OpenReplay — the most advanced open-source session replay tool for developers.
Star on GitHub12k