Beberapa minggu yang lalu, Cloudflare mengumumkan vinext, sebuah implementasi ulang eksperimental dari permukaan API Next.js di atas Vite. Bagian yang menarik perhatian sudah jelas: satu insinyur, satu minggu, dan alur kerja yang dibantu AI. Namun cerita yang lebih besar bukanlah speedrun. Ini adalah apa yang dikatakan vinext tentang portabilitas kerangka kerja, seberapa banyak Next.js dapat diperlakukan sebagai kontrak API, dan di mana AI benar-benar menambahkan pengaruh dalam pengembangan modern.

Dalam artikel ini, kita akan melihat apa itu vinext, mengapa Cloudflare membuatnya, bagaimana Anda dapat mencobanya sekarang, dan di mana kelebihannya paling jelas terlihat. Kita juga akan melihat bagaimana proyek ini dibangun dan apa yang sebenarnya disarankan dari pengembangan perangkat lunak berbantuan AI, di luar apa yang sedang booming.

Apa itu vinext?

vinext bukan merupakan cabang dari Next.js. Ini adalah implementasi alternatif dari permukaan API Next.js publik yang dibangun di atas Vite. Dalam istilah praktis, itu berarti Anda dapat mempertahankan konvensi yang sudah dikenal app/, pages/Dan next.config.jssambil menukar rantai alat yang mendasarinya.

Perbedaan itu penting. Jika Anda hanya ingin menjalankan Next.js di tempat lain selain Vercel, Anda sudah memiliki opsi nyata saat ini, termasuk hosting mandiri, OpenNext, dan API Adaptor Next.js stabil yang baru. vinext lebih ambisius dari itu. Alih-alih mengadaptasi keluaran Next.js untuk platform lain, ia mengimplementasikan kembali perilaku publik kerangka kerja tersebut di atas Vite itu sendiri.

Tujuannya bukan untuk menciptakan kerangka kerja React full-stack yang baru. Tujuannya adalah untuk melihat seberapa banyak pengalaman pengembang Next.js yang dapat diciptakan kembali pada compiler dan landasan runtime yang berbeda. Jika Anda ingin lebih banyak latar belakang tentang sisi portabilitas dari masalah ini, LogRocket sudah memiliki informasi berguna tentang apakah OpenNext benar-benar merupakan kunci portabilitas Next.js.

Mengapa Cloudflare membangun kembali Next.js di Vite

Next.js sudah lama merasa canggung untuk diterapkan di luar jalur defaultnya. Jika Anda ingin menjalankan aplikasi Next.js pada platform seperti Cloudflare Workers, AWS Lambda, atau Netlify, Anda sering kali mengandalkan adaptor, alat khusus platform, atau langkah-langkah build tambahan untuk mengatasi perbedaan dalam perilaku runtime. Proyek seperti OpenNext telah membuatnya lebih bisa diterapkan, dan Next.js sendiri baru-baru ini bergerak lebih jauh ke arah tersebut dengan API Adaptor yang sekarang stabil. Namun vinext mengambil pendekatan yang lebih radikal. Alih-alih mengadaptasi keluaran Next.js, Cloudflare mengimplementasikan kembali permukaan API Next.js langsung di atas Vite. Itu berarti menjaga konvensi yang sudah diketahui pengembang saat menukar mesin lain di bawahnya.

Argumen inti Cloudflare bukan hanya karena Vite lebih cepat. Implementasi berbasis Vite dapat mempertahankan bagian-bagian yang benar-benar diperhatikan oleh pengembang Next.js sambil menghilangkan beberapa asumsi platform dan membangun batasan yang menyertai rantai alat asli. Hal ini menjadikan vinext bukan sekedar patch portabilitas sederhana dan lebih merupakan alternatif arsitektural dibandingkan Next.js standar. Jika Anda menginginkan jalur yang lebih tradisional untuk menjalankan Next.js di Workers, panduan LogRocket untuk menerapkan Next.js ke Cloudflare Workers adalah referensi yang lebih baik.

keuntungan terbesar Vinext

Kasus awal Cloudflare untuk vinext memiliki tiga manfaat utama.

• Membangun kinerja: Dalam tolok ukur Cloudflare sendiri pada aplikasi App Router 33-rute, vinext dibuat lebih cepat daripada Next.js 16.1.6, dengan peningkatan terbesar muncul saat dipasangkan dengan Vite 8 dan Rolldown.
• Ukuran bundel klien: Tim vinext melaporkan pengurangan yang berarti dalam JavaScript klien yang dikirimkan dibandingkan dengan build standar Next.js.
• Ergonomi penempatan: Hal ini terutama berlaku untuk Cloudflare Workers, di mana vinext dirancang sebagai target kelas satu dan bukan sebagai lapisan kompatibilitas.

Meski begitu, cerita benchmark memerlukan satu peringatan penting. Vinext README secara eksplisit mencatat bahwa pengujian ini mengukur kecepatan kompilasi dan bundling, bukan kinerja penayangan pengguna akhir. Ia juga mencatat bahwa Next.js dan vinext saat ini membuat trade-off default yang berbeda: Next.js melakukan pra-render lebih banyak konten statis pada waktu pembuatan, sementara vinext saat ini lebih mengandalkan rendering waktu permintaan ditambah caching. Angka-angka tersebut memang menarik, namun angka-angka tersebut bukanlah angka yang tepat untuk mengukur kinerja produksi.

Cara menggunakan vinext

Alur pengaturan Cloudflare sengaja dibuat sederhana. Jika Anda sudah memiliki aplikasi Next.js, Anda dapat menginisialisasi vinext di dalam proyek dan terus menggunakan struktur direktori yang sama dan sebagian besar konvensi kerangka kerja yang sama:

npx create-next-app my-app
cd my-app
npx vinext init

Dari sana, vinext menggantikan next dengan vinext dalam skrip Anda dan menggunakan Vite di bawah tenda. Jalur migrasi tersebut adalah bagian dari daya tariknya: Anda tetap mempertahankan model aplikasi yang sudah diketahui tim Anda sambil mengganti mesin di bawahnya.

Jika tujuan Anda bukan vinext secara spesifik, namun evaluasi kerangka kerja yang lebih luas, mungkin ada baiknya juga membandingkan arah ini dengan opsi React full-stack lainnya. Perbandingan TanStack Start vs. Next.js dari LogRocket berguna di sini karena menyoroti seberapa banyak perdebatan framework React saat ini bermuara pada filosofi toolchain, bukan hanya fitur.

Kelemahan dan keterbatasan saat ini

vinext tidak sempurna. Beberapa alasan untuk bersikap ringan:

• Ini masih eksperimental: Di sinilah kehati-hatian yang paling kuat harus dilakukan. vinext masih bersifat eksperimental secara eksplisit. Cloudflare mengatakan hal ini dalam pengumumannya, dan repo GitHub bahkan lebih blak-blakan: sebagian besar kode, pengujian, dan dokumentasi ditulis oleh AI, kode tersebut belum ditinjau baris demi baris oleh manusia, dan akan ada bug. Hal ini saja sudah membuat sebagian besar tim produksi tetap berhati-hati.
• Ada batasan platform yang konkret: vinext tidak melakukan pengoptimalan gambar waktu pembuatan seperti yang dilakukan Next.js secara tradisional. Google Font dimuat dari CDN alih-alih dihosting sendiri dengan perilaku pengoptimalan yang sama seperti yang diharapkan oleh pengembang next/font. Konfigurasi Webpack dan Turbopack berada di luar cakupan karena vinext berjalan di Vite.
• Kekurangan server produksi : TServer produksi Node.js juga digambarkan kurang lengkap dibandingkan jalur Cloudflare Workers, yang memperjelas di mana prioritas proyek saat ini berada.

Ini juga alasan mengapa OpenNext tetap menjadi rekomendasi yang lebih aman bagi banyak tim saat ini. Bahkan README vinext mengatakan hal yang sama. Jika saat ini Anda memerlukan cara paling matang dan teruji untuk menjalankan Next.js di luar Vercel, OpenNext atau jalur resmi berbasis adaptor adalah pilihan yang lebih konservatif. vinext lebih menarik sebagai eksperimen dalam arsitektur dibandingkan sebagai rekomendasi produksi default.

Bagaimana vinext dibangun

Bagian yang paling mencolok dari kisah vinext bukanlah AI yang menulis banyak kode. Cloudflare memperlakukan proyek tersebut seperti sistem rekayasa, bukan aksi cepat.

Menurut Cloudflare, alur kerja dimulai dengan perencanaan arsitektur, kemudian berpindah ke siklus yang ketat: menentukan tugas, membuat model menghasilkan implementasi dan pengujian, menjalankan rangkaian pengujian, dan mengulangi kegagalan. Mereka juga menghubungkan agen ke dalam peninjauan kode dan menggunakan pengujian tingkat browser untuk menangkap masalah yang mungkin terlewatkan oleh pengujian unit. Hasilnya bukanlah “AI membangun kerangka kerja secara ajaib.” Itu adalah “implementasi AI yang dipercepat dalam lingkungan yang sangat terbatas dan didorong oleh pengujian.” Itu adalah pelajaran yang lebih bermanfaat.

Pagar pembatasnya sangat besar. Cloudflare mengatakan vinext memiliki lebih dari 1.700 pengujian Vitest, 380 pengujian end-to-end Playwright, cakupan terhadap Next.js App Router Playground, dan sekitar 94 persen cakupan permukaan API Next.js 16. Mereka juga melaporkan lebih dari 800 sesi OpenCode dan biaya token Claude API sekitar $1.100. Detail tersebut penting karena menjelaskan mengapa proyek ini berhasil: kerangka target telah ditentukan dengan baik, permukaan pengujiannya besar, dan operator manusia masih menangani arsitektur, penentuan prioritas, dan koreksi jalur saat model menyimpang.

Jika Anda ingin menghubungkannya dengan pola alur kerja AI yang lebih luas, LogRocket menjelaskan mengapa alat pengkodean AI mengalihkan hambatan sebenarnya dalam peninjauan dan rekayasa konteks untuk IDE dengan AGENTS.md dan keterampilan relevan. vinext memperkuat poin yang sama yang disampaikan kedua artikel dengan cara yang berbeda: pembuatan menjadi lebih cepat, namun tinjauan, batasan, dan penilaian tingkat sistem lebih penting, bukan kurang.

Artinya bagi masa depan pembangunan

vinext mudah disalahartikan sebagai bukti bahwa satu orang dengan AI dapat menggantikan seluruh tim teknik. Itu adalah penafsiran yang paling tidak berguna.

Interpretasi yang lebih baik adalah bahwa AI secara tajam mempersingkat waktu implementasi ketika empat kondisi sudah ada: sistem target terdokumentasi dengan baik, perilaku yang diharapkan dapat diuji, operator manusia dapat mengenali keluaran yang buruk, dan alur kerja di sekitarnya menerapkan gerbang kualitas. Tulisan Cloudflare sendiri menegaskan hal tersebut. Proyek ini berhasil karena Next.js memiliki spesifikasi yang matang, Vite memberikan fondasi yang kuat, dan manusia yang mengarahkan model mengetahui kapan keluarannya masuk akal tetapi salah.

Itulah sebabnya vinext lebih terasa seperti argumen yang mendukung dasar-dasar teknik daripada menentangnya. Hal ini tidak menunjukkan bahwa arsitektur kurang penting. Hal ini menunjukkan bahwa arsitektur, verifikasi, dan penilaian teknis menjadi lebih berharga ketika pembuatan kode menjadi lebih murah.

Menyelesaikan

vinext layak untuk ditonton, meskipun Anda belum siap untuk mengadopsinya. Sebagai sebuah produk, ini masih bersifat eksperimental dan jelas kurang matang dibandingkan jalur penerapan Next.js yang umum. Namun sebagai sebuah sinyal, hal ini sulit untuk diabaikan. Hal ini menunjukkan bahwa kerangka kerja yang besar semakin dapat diperlakukan sebagai kontrak API publik yang dapat diimplementasikan kembali di atas rantai alat yang berbeda, terutama ketika perilaku target didokumentasikan dengan baik dan diuji secara ketat.

Bagi tim yang mengambil keputusan saat ini, kesimpulan praktisnya sangatlah jelas. Jika Anda memerlukan cara teraman untuk menjalankan Next.js di luar Vercel, mulailah dengan hosting mandiri, OpenNext, atau jalur adaptor resmi. Jika Anda ingin menjelajahi apa yang bisa dibuka oleh implementasi ulang Next.js berbasis Vite, vinext adalah salah satu eksperimen paling menarik di ekosistem React saat ini. Dan jika Anda berfokus pada sudut pandang AI, pelajaran yang dapat diambil bukanlah bahwa AI menggantikan insinyur. Para insinyur dengan penilaian arsitektural yang kuat, pengujian yang ketat, dan putaran peninjauan yang ketat kini dapat mengirimkan lebih banyak hal daripada sebelumnya.