Conheça o Vinext, a alternativa ao Next.js construída sobre o Vite
Veja como o Vinext leva apps Next.js ao Vite, quais APIs e destinos de implantação são compatíveis, suas limitações e como testar um projeto existente.
O Vinext é um plugin open source do Vite, criado pela Cloudflare, que reimplementa a API do Next.js. Assim, uma base de código existente com App Router ou Pages Router pode ser compilada e servida pelo Vite, em vez do toolchain do Next.js. A Cloudflare anunciou a versão 1.0 em 28 de setembro de 2026.
Muitas equipes gostam do Next.js, mas não da hospedagem para a qual ele as empurra, e migrar uma aplicação grande para outro framework só para trocar de host é difícil de justificar. O Vinext oferece outro caminho. Este artigo aborda o que o Vinext suporta, onde ele pode ser implantado, os comandos exatos para testá-lo na sua própria aplicação e as lacunas que a própria Cloudflare documenta.
Principais conclusões
- O Vinext mantém seus arquivos
app/,pages/enext.confige substitui apenas a camada que os compila e serve, o que o torna uma troca de plataforma, e não uma reescrita. - A Cloudflare divulga dois números de compatibilidade: o anúncio da versão 1.0 informa mais de 99% de compatibilidade nos testes das funcionalidades mais solicitadas, excluindo os Cache Components, e o README afirma que cerca de 94% da superfície da API do Next.js 16 tem suporte total ou parcial.
npx vinext checkanalisa um projeto Next.js em busca de incompatibilidades conhecidas, enpx vinext initconfigura o projeto para o Vinext sem quebrar onext dev.- O Cloudflare Workers é o principal destino de deploy. Outros hosts, como Netlify e AWS, são atendidos por meio do plugin Nitro para Vite.
- O suporte a Cache Components é parcial, e o README do Vinext aponta o OpenNext como a opção mais madura para aplicações que precisam de comportamento comprovado em produção.
O que é o Vinext e como ele se diferencia de outras alternativas ao Next.js?
O Vinext é o Next.js reimplementado sobre o Vite pela Cloudflare. O projeto começou em fevereiro de 2026 como um experimento de uma semana conduzido com IA e chegou à versão 1.0 sete meses depois. O README deixa claro que não se trata de um fork: o núcleo foi escrito do zero para corresponder à API pública do Next.js.
Por isso, o Vinext é um tipo de opção diferente das alternativas ao Next.js mais comuns. Migrar para React Router, Astro ou SvelteKit significa reescrever rotas, carregamento de dados e componentes. O Vinext não mexe nesse código e altera apenas o que o compila e serve. Seu projeto continua com cara de projeto Next.js. O Vite faz o trabalho por baixo.
O que o Vinext suporta?
O Vinext cobre os dois routers e os principais recursos de servidor do Next.js moderno. O anúncio da versão 1.0 e o README listam suporte a:
- App Router, Pages Router e aplicações híbridas que usam ambos
- React Server Components e Server Actions
- Middleware, API routes e route handlers
- Revalidação ISR
- Pré-renderização em tempo de build por meio de
generateStaticParams()egetStaticPaths() - Exportação estática com
output: "export"
O README tem como alvo o Next.js 16.x e lista vite ^8.0.0 como peer dependency.
A Cloudflare informa a compatibilidade do Vinext com o Next.js de duas formas diferentes, e os dois números não medem a mesma coisa. O post da versão 1.0 informa mais de 99% de compatibilidade nos testes, mas apenas para as funcionalidades mais solicitadas pelos clientes e deixando os Cache Components de fora. O README afirma que “~94% da superfície da API do Next.js 16 tem suporte total ou parcial”. Ambos os números vêm da Cloudflare. Nenhum deles substitui rodar a sua própria aplicação.
Onde o Vinext pode ser implantado?
O Vinext faz deploy nativo no Cloudflare Workers, e o post da versão 1.0 afirma que ele roda no plano gratuito do Workers. O mesmo post cita Netlify e AWS Lambda como destinos de deploy. O README explica o mecanismo: o Workers é atendido diretamente pelo @vinext/cloudflare, enquanto Vercel, Netlify, AWS e Deno Deploy são alcançados com a adição do plugin Nitro para Vite. Não há nenhum adaptador nativo para Netlify ou Lambda envolvido.
Uma configuração mínima adiciona um único plugin:
// vite.config.ts
import { defineConfig } from "vite";
import vinext from "vinext";
export default defineConfig({
plugins: [vinext()],
});
Para usar um host que não seja da Cloudflare, instale o nitro e adicione o plugin dele:
// 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
Como experimentar o Vinext em uma aplicação Next.js existente
Testar o Vinext em uma aplicação existente exige dois comandos, e nenhum deles interrompe o seu fluxo de trabalho atual com o Next.js. Execute-os em uma branch:
npx vinext check
npx vinext init
O vinext check analisa o projeto e informa incompatibilidades conhecidas antes que você altere qualquer coisa. O vinext init não é destrutivo, então o next dev continua funcionando ao lado da nova configuração. Ele pergunta qual é o destino de deploy e usa a Cloudflare como padrão. Desde a versão 1.0, as configurações para a Cloudflare usam por padrão a cf CLI com um cloudflare.config.ts tipado. Para manter a configuração antiga com o Wrangler, passe --legacy-wrangler-cloudflare-init.
Criando uma nova aplicação Vinext
Para um projeto do zero, gere a estrutura da aplicação, execute-a, faça o build e, em seguida, o deploy:
npm create vinext-app@latest my-app
npx vite dev
npx vite build
npx @vinext/cloudflare deploy
A versão 1.0 adiciona a flag --warm-cache ao comando de deploy. Ela faz o upload da nova versão com 0% do tráfego, requisita as páginas cacheáveis por meio dela para preencher os caches e só então a promove.
Quais são as limitações e lacunas conhecidas do Vinext?
A seção Known gaps do README lista quatro áreas em que o Vinext ainda não equivale ao Next.js: Cache Components, otimização de imagens e fontes em tempo de build, módulos nativos no desenvolvimento com App Router e algumas configurações de rota específicas de plataforma. A Cloudflare afirma que ainda está trabalhando nas quatro, então nenhuma delas é uma limitação permanente.
- Cache Components e PPR:
"use cache"funciona em parte, mas o modelo completo decacheComponentsnão está pronto. Perfis de cache, tags, shells parciais, retomada (resuming), prefetching e parte do cache em dev e build ainda podem se comportar de forma diferente do Next.js. - Imagens e fontes: Na Cloudflare, as imagens podem ser otimizadas no momento em que são requisitadas. O Vinext ainda não reproduz o pipeline completo de imagens que o Next.js executa em tempo de build, e as fontes são carregadas em tempo de execução, em vez de processadas durante o build.
- Módulos nativos: Pacotes como sharp, resvg, satori, lightningcss e @napi-rs/canvas podem quebrar no ambiente de desenvolvimento RSC do Vite. Os builds de produção lidam com mais deles do que o modo dev.
- Configuração de rotas: O Vinext ignora as configurações de rota
runtimeepreferredRegion.
O README também afirma que o Vinext ainda não é um substituto direto (drop-in replacement) para todas as aplicações.
Quem deve adotar o Vinext e quem deve esperar
O Vinext é indicado para equipes que querem continuar escrevendo Next.js sem ficar presas a um único host. As fontes não concordam totalmente quanto à prontidão para produção. O anúncio da Cloudflare chama a versão 1.0 de pronta para produção, enquanto o README responde “Você pode, com cautela” e ressalta que o Vinext ainda tem lacunas de compatibilidade e ainda não foi comprovado em todos os tipos de aplicação Next.js em produção.
- Adote se a sua aplicação usa os dois routers, RSC, Server Actions e ISR, e você quer fazer deploy no Workers ou por meio do Nitro.
- Espere se você depende fortemente de Cache Components, PPR ou da semântica de
"use cache", como tags e perfis. - Considere o OpenNext se você precisa de maturidade comprovada em produção. O README do Vinext explica que o OpenNext trabalha a partir da saída do
next build, por isso cobre uma parte maior da API do Next.js, além de ter um histórico bem mais longo.
Conclusão
Com o Vinext, você pode sair da Vercel sem reescrever sua aplicação Next.js. Em troca, precisa aceitar lacunas documentadas, principalmente em relação aos Cache Components. Para ver se ele atende ao seu caso, crie uma branch, execute npx vinext check, compare o que for apontado com as lacunas conhecidas e, em seguida, execute npx vinext init e compare o comportamento com o next dev. Se você também quiser migrar o restante do seu toolchain, leia Getting Started with Vite+ (o README lista vp exec vinext-cloudflare deploy para projetos Vite+). Para o fluxo de trabalho com cloudflare.config.ts que o init configura, consulte A Practical Guide to Cloudflare’s New cf CLI.
Perguntas frequentes
Posso manter minha configuração personalizada do webpack ou do next/jest ao migrar para o Vinext?
Não. O Vinext roda sobre o Vite, então as configurações do Turbopack e do webpack não se aplicam, e loaders ou plugins personalizados do webpack precisam ser substituídos por plugins do Vite. O README do Vinext lista o next/jest como não suportado e recomenda o Vitest no lugar. O AMP também não é suportado, com useAmp() sempre retornando false, e o comando legado next export é substituído pela definição de output: 'export' na configuração do Next.js.
Quais versões do React e do Vite o Vinext exige?
O Vinext declara peer dependencies em react ^19.3.1, react-dom ^19.3.1, react-server-dom-webpack ^19.3.1 e vite ^8.0.0, e tem como alvo o Next.js 16.x. Projetos com App Router também precisam ter o @vitejs/plugin-rsc instalado. O Vinext registra esse plugin automaticamente quando detecta um diretório app, então adicionar sua própria chamada rsc() faz o build falhar com um erro de plugin duplicado, a menos que você passe rsc: false para vinext().
O que o vinext init altera em um projeto Next.js existente?
O vinext init adiciona 'type': 'module' ao package.json e renomeia arquivos de configuração CommonJS, como postcss.config.js para postcss.config.cjs, para evitar conflitos com ESM. Ele também instala os pacotes do Vite e do Vinext e adiciona os scripts dev:vinext, build:vinext e start:vinext junto aos scripts existentes do Next.js. Como os scripts originais permanecem, o next dev e o servidor de desenvolvimento do Vinext podem rodar a partir da mesma base de código para uma comparação lado a lado.
O revalidateTag serve páginas desatualizadas enquanto elas são regeneradas no Vinext na Cloudflare?
Sim, a partir das versões 1.1, de outubro de 2026, quando você passa um perfil de cache, como em revalidateTag(tag, 'max'). Versões anteriores removiam as páginas correspondentes do Workers Cache, então a requisição seguinte precisava esperar uma renderização completa. Agora, o Workers Cache e o Response Store marcam essas entradas como desatualizadas (stale) e continuam servindo a versão em cache enquanto ela é regenerada em segundo plano, como faz o Next.js. Chamar revalidateTag apenas com uma tag, ou com expire: 0, ainda expira as entradas imediatamente. Entradas 'use cache' desatualizadas também são servidas enquanto são regeneradas.
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