Introducción a Vinext

¿Qué es Vinext?

Vinext es un plugin de Vite que reimplementa la superficie de API de Next.js. En lugar de usar el toolchain de compilación de Next.js, Vinext permite ejecutar aplicaciones Next.js sobre Vite, con soporte nativo para desplegar en Cloudflare Workers.

El proyecto cubre aproximadamente el 94% de la API pública de Next.js 16.x, incluyendo ambos routers (Pages y App), React Server Components, Server Actions, Metadata API y más.

¿Por qué existe Vinext?

Next.js está fuertemente acoplado al ecosistema de Vercel. Si quieres desplegar en Cloudflare Workers, AWS Lambda u otra plataforma, enfrentas limitaciones. Vinext resuelve esto reimplementando la API de Next.js sobre herramientas estándar:

Aspecto	Next.js	Vinext
Build tool	Turbopack/webpack	Vite
RSC	Implementación propia	@vitejs/plugin-rsc
Deploy principal	Vercel	Cloudflare Workers
Imagen	Build-time optimization	@unpic/react + CDN
Testing	next/jest	Vitest

Ecosistema Vite + Cloudflare Workers

Vinext se apoya en tres pilares:

Vite como build tool

Vite proporciona HMR instantáneo, soporte nativo de ESM y un ecosistema de plugins extenso. Vinext funciona como un plugin de Vite, integrándose naturalmente con el resto del toolchain.

@vitejs/plugin-rsc

El plugin oficial de Vite para React Server Components maneja las transformaciones de las directivas "use client" y "use server", la serialización del RSC stream, y los builds multi-ambiente.

Cloudflare Workers

El target principal de despliegue. Workers ejecuta JavaScript en el edge de Cloudflare con latencia mínima. Vinext genera un worker listo para desplegar con vinext deploy.

¿Qué cubre Vinext?

Routing completo

• Pages Router: pages/, rutas dinámicas, getServerSideProps, getStaticProps, getStaticPaths
• App Router: app/, layouts anidados, loading.tsx, error.tsx, route groups, parallel routes, intercepting routes

Renderizado

• SSR con streaming para ambos routers
• React Server Components via plugin RSC
• Server Actions con "use server"
• Generación estática con ISR (Incremental Static Regeneration)

Módulos reimplementados

Vinext reimplementa 33+ módulos de next/*:

• next/link, next/image, next/navigation, next/server
• next/headers, next/cache, next/dynamic
• next/script, next/font/google, next/font/local
• next/form, next/og y más

Despliegue

• Comando vinext deploy que genera configuración automática
• KV Cache Handler para ISR en Workers
• Traffic-aware Pre-Rendering (experimental)

Limitaciones conocidas

Es importante entender qué no cubre Vinext:

• Sin optimización de imagen en build time — usa CDN en runtime
• Fonts sin subsetting — Google Fonts se cargan desde CDN
• Módulos nativos (sharp, satori) no funcionan en dev — se auto-stubean en producción
• Features de Vercel excluidos — Analytics, KV, Blob, @vercel/og edge runtime
• No es paridad bug-por-bug — enfoque pragmático al 95% de casos reales

Rendimiento

Las métricas iniciales son prometedoras:

Métrica	Next.js 16	Vinext (Vite 7)	Vinext (Vite 8/Rolldown)
Build (33 rutas)	7.38s	4.64s (1.6x)	1.67s (4.4x)
Bundle cliente (gzip)	168.9 KB	74.0 KB (-56%)	72.9 KB (-57%)

Siguiente paso

En el siguiente capítulo crearemos nuestro primer proyecto con Vinext y exploraremos la estructura de archivos.