Vinext: Framework Baru Super Cepat dan Ramah Cloudflare, Saingan Next.js!

Minggu lalu, satu engineer dan satu AI berhasil reborn Next.js dalam waktu kurang dari seminggu! Proyek ini akhirnya jadi vinext (baca: "vee-next"), sebuah drop-in replacement untuk Next.js yang dibangun pake Vite dan bisa langsung dideploy ke Cloudflare Workers cuma dengan satu perintah. Dari hasil benchmark awal, vinext bisa build app production sampai 4x lebih cepat, dan ukuran client bundle-nya bisa 57% lebih kecil. Bahkan udah ada produk yang pake di production. Proses develop-nya? Hanya butuh token AI sekitar $1.100 aja!

Next.js, Vite, dan Masalah Deploy di Serverless

Buat yang belum familiar, Next.js jadi framework React paling populer saat ini. Meskipun experience developernya juara, deploy Next.js ke platform serverless kayak Cloudflare Workers, Netlify, atau AWS Lambda lumayan ribet karena harus adaptasi output build-nya ke platform masing-masing.

• OpenNext emang solusi buat masalah deploy ini, tapi tetap aja sifatnya ngotak-atik output Next.js (reverse engineering) yang sering berubah, akhirnya bikin fragile dan butuh effort besar tiap kali ada update.
• Belum lagi selama development, next dev eksklusif jalan di Node.js. Kalau butuh test kode yang pake API platform tertentu (misal Durable Objects, KV, AI bindings), harus pake workaround yang ribet.

Kenalan Sama vinext: Drop-in Replacement Next.js Berbasis Vite

Daripada nambel output Next.js, kita nemuin ide nakal: gimana kalau semua API surface Next.js di-reimplement langsung di Vite? Framework build satu ini emang power, udah diadopsi banyak ecosystem modern kayak Astro, SvelteKit, Nuxt, dan Remix.

• Install gampang: npm install vinext
• Ganti "next" di scripts kamu ke "vinext". Semua struktur app/, pages/, dan next.config.js bisa langsung dipake, ga perlu rewiring

vinext dev      # Development server dengan HMR
vinext build    # Build untuk production
vinext deploy   # Build sekaligus deploy ke Cloudflare Workers

vinext bukan sekadar wrapper. Semua fitur Next.js kayak routing, SSR, React Server Components, server actions, middleware, sampai caching, dibangun langsung sebagai plugin Vite. Output Vite juga udah siap jalan di berbagai platform berkat Vite Environment API.

Benchmark vinext vs Next.js

Test cepat membuktikan hasil yang keren. Kita compare vinext dan Next.js 16 pakai aplikasi dengan 33 routes yang sama, berikut hasilnya:

Production Build Time

• Next.js 16.1.6 (Turbopack): 7,38 detik (baseline)
• vinext (Vite 7/Rollup): 4,64 detik (1.6x lebih cepat)
• vinext (Vite 8/Rolldown): 1,67 detik (4.4x lebih cepat!)

Ukuran Client Bundle (gzipped)

• Next.js 16.1.6: 168.9 KB (baseline)
• vinext (Rollup): 74.0 KB (56% lebih kecil)
• vinext (Rolldown): 72.9 KB (57% lebih kecil!)

Hasil benchmark ini fokus ke speed compile dan bundle, bukan performa serving production. Jadi arah pengembangan jelas: Vite, apalagi dengan Rolldown (bundler Rust-based besutan Vite 8), secara struktural menang di urusan kecepatan build.

Deploy Super Mudah ke Cloudflare Workers

vinext didesain buat Cloudflare Workers sebagai target utama. Satu perintah doang buat deploy:

vinext deploy

Proses deploy full otomatis: build, generate konfigurasi Worker, sampai langsung jalan. App Router & Pages Router semua jalan mulus, termasuk client-side hydration, navigation, dan React state.

Built-in Cloudflare KV Cache (ISR Ready)

import { KVCacheHandler } from "vinext/cloudflare";
import { setCacheHandler } from "next/cache";

setCacheHandler(new KVCacheHandler(env.MY_KV_NAMESPACE));

Cache handler bisa diganti sesuai kebutuhan, misal mau pake R2 buat payload besar. Layer caching di vinext modular dan siap fleksibel!

Status & Kolaborasi Ecosystem

Target deploy utama sekarang memang Cloudflare Workers, tapi 95% codebase vinext murni Vite—ga Cloudflare-centric. Routing, module shims, SSR pipeline, sampe RSC support semuanya portable. Kita ngajak cloud provider lainnya buat join ekosistem open source ini. Bahkan proof-of-concept deploy ke Vercel cuma butuh 30 menit!

Framework kayak vinext butuh kolaborasi lintas provider biar sustain jangka panjang. PR dari platform mana aja welcome!

vinext: Masih Experimental, Tapi Confidence Tinggi

Dibilang siap tempur banget sih belum, karena baru seminggu, traffic beneran masih terbatas. Tapi test suite-nya udah lebih dari 1.700+ Vitest unit dan 380 Playwright E2E test, termasuk port dari Next.js dan OpenNext. Coverage API udah tembus 94% Next.js 16. Beberapa early adopter kayak National Design Studio udah pakai di produksi, hasilnya build lebih ngebut, bundle jadi ramping!

Pre-rendering & Traffic-aware Pre-Rendering (TPR)

vinext udah support Incremental Static Regeneration (ISR) secara default. Tapi fitur static pre-render di build time kayak Next.js (generateStaticParams()) belum tersedia—masih jadi roadmap. Buat website yang full static, framework kayak Astro bisa jadi opsi sementara.

Feature baru, Traffic-aware Pre-Rendering (TPR), jauh lebih efisien dari pre-render konvensional. Saat deploy, vinext cek analytic traffic dari Cloudflare. Yang di-pre-render cuma halaman yang benar-benar sering dikunjungi, sisanya jalan on-demand dan langsung ke-cache via ISR.

vinext deploy --experimental-tpr

Ini bikin build massive site jadi super cepat. Misal dari 100K halaman produk, biasanya 90% traffic cuma ke 50–200 page. Jadi ga perlu build ribuan route statis, deploy jauh lebih enteng!

Project Rebuild Next.js: Satu Engineer, Dibantu AI

Biasanya bikin framework next-level kayak ginian butuh tim develop bareng setahun lebih. Kali ini? Satu engineer, satu AI, beres kurang dari seminggu! Mayoritas codebase vinext hasil generate AI (Claude AI) dengan quality control kayak suite test, linting, sampai code review pakai AI agent.

• AI lebih jago karena Next.js documented dengan lengkap, API surface-nya udah banyak di training set, dan Vite jadi fondasi tooling yang siap pakai.
• Suite test Next.js dan OpenNext dipakai langsung sama AI buat validasi implementasi.
• Model AI modern TIL sekarang udah bisa handle codebase ribuan baris, referensi arsitektur, dan generate code lintas modul dengan konsisten.

Workflow-nya basically kayak pair programming: engineering manager kasih direction, AI generating simultan implementation plus test, iterasi error, lalu code review pake agent berbeda.

Apa Arti Ini Buat Masa Depan Software Engineering?

Framework dan abstraction layer dulu tuh buat ngatasin complex yang otak manusia gabisa sangga sekaligus. AI nggak punya limitasi itu—dia bisa rewrite API contract jadi code beneran dalam waktu singkat. Beberapa layer yang selama ini jadi "human crutch" kemungkinan bakal lenyap pelan-pelan karena AI lebih efisien nulis glue code dan implementasi langsung dari spesifikasi ke tooling.

Langsung Coba vinext di Project Kamu!

vinext punya fitur Agent Skill yang bisa migrate Next.js project secara otomatis (kompatibel dengan Claude Code, OpenCode, Cursor, dsb). Cukup install skill-nya, buka project Next.js kamu, lalu command ini:

npx skills add cloudflare/vinext

Atau, buat yang mau otodidak tanpa AI Agent:

npx vinext init   # Migrasi Next.js project
npx vinext dev    # Start dev server
npx vinext deploy # Deploy ke Cloudflare Workers

Sumber kodenya bisa dicek di github.com/cloudflare/vinext. Semua feedback, PR, dan ide improvement sangat diterima. Siap buat web masa depan yang lebih ringan dan scalable!