Cara mereimplementasikan Next.js dengan AI hanya dalam seminggu

• vinext adalah framework kompatibel Next.js yang dibuat oleh AI dan satu engineer dalam seminggu, berbasis Vite dan bisa dideploy ke Cloudflare Workers dengan satu baris perintah
• Kecepatan build hingga 4,4x lebih cepat, dan ukuran client bundle 57% lebih kecil, sambil tetap memakai struktur direktori dan konfigurasi yang sama seperti proyek Next.js yang sudah ada
• Dirancang untuk Cloudflare Workers dan mendukung ISR caching berbasis KV, Traffic-aware Pre-Rendering, serta fitur pre-rendering berbasis trafik lainnya
• Sebagian besar seluruh kode ditulis oleh AI, dengan kualitas yang dijaga melalui lebih dari 1.700 pengujian dan code review otomatis
• Proyek ini adalah contoh yang menunjukkan bahwa AI telah mencapai tingkat mampu mereimplementasikan framework kompleks, sekaligus memberi gambaran kemungkinan perubahan struktur pengembangan perangkat lunak di masa depan

---

Batasan deployment Next.js dan pengenalan masalah

• Next.js adalah framework utama berbasis React, tetapi deployment ke lingkungan serverless membutuhkan proses konversi output build yang kompleks
  • Untuk deploy ke Cloudflare, Netlify, AWS Lambda, dan lainnya, hasil build Turbopack dari Next.js harus disusun ulang agar sesuai dengan tiap platform
• OpenNext mencoba menyelesaikan hal ini, tetapi muncul ketidakstabilan antarversi karena keterbatasan struktural yang mengharuskan reverse engineering terhadap output build Next.js
• API adapter Next.js sedang dikembangkan, namun tetap ada keterbatasan karena struktur development server yang khusus Node.js membuat pengujian API spesifik platform menjadi sulit

Struktur dan karakteristik vinext

• vinext adalah framework alternatif yang mereimplementasikan langsung API Next.js di atas Vite
  • Setelah npm install vinext, proyek yang sudah ada bisa langsung dijalankan dengan mengganti perintah next menjadi vinext
  • Pengembangan, build, dan deployment disatukan melalui perintah vinext dev, vinext build, vinext deploy
• Fitur utama Next.js seperti routing, server rendering, React Server Components, server actions, caching, dan middleware diimplementasikan sebagai plugin Vite
• Menggunakan Vite Environment API untuk menghasilkan output build yang independen dari platform

Benchmark performa

• Dibandingkan dengan Next.js 16 menggunakan aplikasi yang sama dengan 33 route
  • Waktu build: vinext (Vite 8/Rolldown) 1,67 detik → 4,4x lebih cepat dibanding Next.js
  • Ukuran client bundle: 72,9KB → 57% lebih kecil dibanding Next.js
• Pengujian dilakukan di GitHub CI, dan hanya mengukur kecepatan kompilasi serta bundling
• Rolldown, bundler berbasis Rust di Vite 8, berkontribusi pada peningkatan performa build

Deployment ke Cloudflare Workers

• Perintah vinext deploy menjalankan build dan deployment otomatis
  • Mendukung App Router maupun Pages Router, termasuk client hydration dan state management
• Cloudflare KV cache handler menyediakan ISR (Incremental Static Regeneration) secara bawaan
  • Backend cache dapat diganti, dan bisa diperluas ke R2 atau Cache API
• Contoh implementasi nyata yang dipublikasikan mencakup App Router Playground dan klon Hacker News

Traffic-aware Pre-Rendering (TPR)

• Meningkatkan inefisiensi pre-rendering statis pada Next.js yang berbasis generateStaticParams()
• Memanfaatkan data trafik dari Cloudflare untuk hanya melakukan pre-render pada halaman yang paling banyak dikunjungi dalam 24 jam terakhir
  • Contoh: dari 100 ribu halaman, hanya 184 halaman (90% dari total trafik) yang dirender dalam 8,3 detik
• Halaman sisanya menggunakan SSR saat diminta lalu di-cache dengan ISR, dan diperbarui otomatis tiap deployment sesuai pola trafik

Proses pengembangan berbasis AI

• Sebagian besar kode proyek ditulis oleh AI, dengan total biaya sekitar $1.100
• Lulus 1.700 pengujian Vitest dan 380 pengujian Playwright, dengan kompatibilitas 94% terhadap API Next.js
• Prosedur pengembangan
  • AI mengimplementasikan fitur dan menulis pengujian → pengujian dijalankan → jika gagal, umpan balik error diberikan lalu dicoba ulang
  • AI agent juga melakukan code review dan perbaikan secara otomatis, sementara manusia hanya mengarahkan arah dan struktur
• Lebih dari 800 sesi dijalankan di OpenCode, menggunakan model Claude

Faktor yang memungkinkan AI melakukannya

• Dokumentasi Next.js yang jelas dan test suite yang sangat besar memungkinkan AI belajar dengan akurat
• Struktur build Vite yang stabil berperan sebagai fondasi
• Model AI terbaru telah mencapai tingkat yang memungkinkan menjaga konsistensi struktural dalam codebase besar serta menalar interaksi antarmodul

Implikasi bagi pengembangan perangkat lunak

• Struktur framework berlapis-lapis yang ada selama ini merupakan hasil untuk mengompensasi keterbatasan kognitif manusia
• AI dapat memahami keseluruhan sistem dalam konteks dan langsung menulis kode, sehingga kebutuhan akan lapisan abstraksi perantara berkurang
• vinext adalah bukti bahwa AI dapat menyelesaikan framework kompleks hanya dengan spesifikasi dan tool dasar

Open source dan kolaborasi

• Sekitar 95% vinext terdiri dari kode Vite yang tidak bergantung pada Cloudflare, sehingga bisa diterapkan di platform hosting lain
  • PoC di Vercel berhasil dibuat hanya dalam 30 menit
• Sudah dirilis sebagai open source, dan PR dari platform lain serta penambahan target deployment sangat disambut

Status eksperimental dan penerapan nyata

• vinext masih dalam tahap eksperimental, dan validasi untuk trafik skala besar belum selesai
• National Design Studio sedang menerapkannya pada situs pemerintah CIO.gov, dan telah mengonfirmasi peningkatan waktu build serta ukuran bundle
• README mencantumkan fitur yang belum didukung dan keterbatasan yang sudah diketahui

Cara penggunaan

• Melalui Agent Skill, tool AI seperti Claude Code dan Cursor dapat membantu migrasi otomatis
  • npx skills add cloudflare/vinext → konversi dengan perintah “migrate this project to vinext”
• Secara manual, bisa dijalankan dengan npx vinext init, vinext dev, vinext deploy
• Kode sumber tersedia di GitHub: cloudflare/vinext

Ucapan terima kasih dan teknologi dasar

• Dukungan dari tim Vite dan @vitejs/plugin-rsc memungkinkan implementasi fitur React Server Components
• Dokumentasi dan test suite tim Next.js menjadi fondasi penting keberhasilan proyek

[GN⁺]

Komentar Hacker News

• Baru sebulan lalu masih ada yang bilang, “coba tunjukkan satu saja contoh AI membuat software tingkat produksi,” tapi sekarang Cloudflare sudah mempublikasikan beberapa contoh, dan kemarin Ladybird juga di-port ke Rust dengan AI
  Kesamaan dari contoh-contoh ini adalah adanya test suite yang matang, sehingga pekerjaannya menjadi lebih sederhana
  Mungkin berkat AI, test-driven development (TDD) akan bangkit lagi

• Saya sangat suka Next, tapi juga suka Vite
  Namun tim Next terasa fokus pada fitur untuk 0,1% pengguna, dan mengabaikan 99,9% sisanya
  Fork dari Cloudflare ini sepertinya bisa menjawab keluhan seperti itu. Peningkatan performa adalah hal yang sudah lama diinginkan komunitas Next, tetapi diabaikan oleh tim Next, dan Cloudflare tampaknya mencoba menyelesaikannya
  Saya suka bahwa Vite menyediakan lapisan inti yang jauh lebih baik daripada Next sambil tetap mempertahankan fitur-fitur Next
  Saya berharap fork ini berhasil dan bisa dipakai juga di perusahaan

  • Next adalah framework terburuk kedua yang pernah saya pakai setelah Rails. Untuk sebagian besar aplikasi, ini hanyalah overhead yang tidak perlu
  • Saya ragu apakah kita bisa mengharapkan dukungan jangka panjang dari proyek eksperimental yang dibuat oleh satu engineer di waktu luangnya
  • Di perusahaan kami ada aplikasi Next.js yang sudah lebih dari 7 tahun, dan masih berjalan baik, tetapi tim Next terus mengubah strukturnya tanpa alasan jelas, sehingga kami harus berulang kali melakukan refactoring karena akhir masa dukungan
  • Saya penasaran apa yang Anda sukai dari Next. Jika nilai utamanya adalah integrasi dengan Vercel, selain itu saya jadi bertanya-tanya apa alasan memilih Next
  • Saya benci Next dan suka Vite. Aplikasi produksi skala besar di perusahaan kami memakai Next.js, dan kecepatan kompilasi-nya sangat lambat sampai kami harus upgrade ke M4 Pro. Tim Next selalu menghindar dengan jawaban seperti “lihat dokumentasinya.” Framework-nya sendiri memang lambat

• Kasus ini menunjukkan dengan baik insentif open source di era AI
  Semakin baik dokumentasinya dan semakin jelas kontraknya didefinisikan, semakin mudah bagi pihak lain untuk mereplikasi-nya
  Jika Cloudflare tidak memanfaatkan test milik Next, hasil seperti ini tidak akan mungkin tercapai
  Next tumbuh secara bertahap dan menjadi kompleks, tetapi framework baru bisa menyederhanakan server components sejak awal
  Cukup mengejutkan bahwa ini sudah dipakai bahkan di situs pemerintah AS

  • Ketika satu organisasi melakukan eksperimen API dan menetapkan best practice, organisasi lain tinggal mengambilnya begitu saja
    Ini memang akibat dari pilihan Vercel sendiri, tetapi arus seperti ini bisa menjadi ancaman bagi proyek open source kecil
  • Saya tidak setuju dengan klaim bahwa ini mustahil tanpa test milik Next dari Cloudflare. Ada banyak contoh sistem kompleks yang direproduksi lewat reverse engineering, dan dengan mempertimbangkan kecepatan iterasi AI, hambatan masuknya nyaris tidak ada
  • Jika arahnya menuju model “open-core + test tertutup”, mungkin open source yang sesungguhnya pada akhirnya justru adalah test atau spesifikasi itu sendiri

• Saya ragu apakah bisa disebut ‘diimplementasikan ulang’ jika bahkan “Hello world” pun belum jalan
  Lagi pula, jika test suite dari aslinya diwarisi begitu saja, dan sumber aslinya juga termasuk dalam data pelatihan, saya rasa sulit menyebutnya sebagai ‘from scratch’
  (Setelah ini ada kutipan contoh kalimat berhak cipta, tetapi dihilangkan)

• Yang menarik, Cloudflare sebulan lalu mengakuisisi Astro
  Jika sesuatu bisa digantikan dengan mudah oleh AI, kenapa harus membeli Astro dengan harga mahal?
  Mungkin di level organisasi mereka tetap menilai penting untuk mengamankan visi dan kepemimpinan sebuah framework

  • Proyek ini tampaknya lebih seperti eksperimen yang menyindir pesaing daripada sesuatu yang serius untuk produksi. Kita lihat saja hasilnya beberapa tahun lagi
  • Astro adalah paradigma yang berbeda dari Next. Cloudflare tampaknya ingin menguasai pasar situs statis melalui Astro.
    Karena Next.js sangat terikat pada Vercel, besar kemungkinan Cloudflare akan mendorong pelanggan berpindah secara alami dari Next ke Astro
  • Astro dioptimalkan untuk situs statis, sedangkan Next juga cocok untuk website dinamis.
    Kami memakai Astro untuk sistem dokumentasi internal, dan untuk kebutuhan itu memang sangat bagus
  • Cloudflare tampaknya hanya ingin mengalihkan trafik ke produknya sendiri. Saya belakangan pindah ke Svelte dan cukup puas

• Next.js pernah memiliki celah remote code execution (RCE) di masa lalu.
  Karena itu saya sama sekali tidak berniat memakai versi buatan AI untuk sementara waktu

  • Itu juga bagian yang paling mengejutkan bagi saya. Alasan saya tidak memakai Next.js untuk proyek pribadi memang karena kekhawatiran keamanan itu.
    Jika AI menghasilkan ribuan baris kode, bug seperti ini bisa lebih mudah tersembunyi
  • Tapi itu bukan celah di Next.js sendiri, melainkan kerentanan di React

• Proyek ini adalah eksperimen AI paling menarik yang pernah saya lihat sejauh ini
  Jika melihat codebase Next.js, ukurannya sangat besar, tetapi implementasi kali ini mengejutkan karena jumlah kodenya hanya sekitar 1/100
  Saya penasaran apakah semua edge case benar-benar ditangani, atau hanya sekadar lolos test
  Misalnya, jika membandingkan implementasi form di Next dan
  implementasi form di Vinext, keduanya benar-benar berbeda
  Meski begitu, ini tetap percobaan yang cukup mengesankan

  • (Jawaban dari engineer Cloudflare) Kecocokan fitur sepenuhnya bukanlah targetnya.
    Ini masih tahap awal, jadi bisa saja ada masalah yang belum tercakup dalam test
    Alasan kodenya jauh lebih sedikit adalah karena ini dibangun di atas plugin Vite dan React RSC
  • Mungkin jumlah kode berkurang karena Vite menangani banyak pekerjaan berat
  • Terus terang, lucu juga karena Cloudflare tampak kesal pada tim Next dan merespons dengan nada seperti, “bahkan AI dan intern pun bisa membuat ini”

• Saya skeptis terhadap pernyataan seperti, “kami mengimplementasikan ulang X dengan AI dan ternyata sangat mudah”
  Bisa jadi detail dan sejarah perbaikan bug-nya hilang
  Jika benar-benar lolos semua test saya akan mengakuinya, tetapi kalau tidak, sulit dipercaya

  • Saya juga tidak sepenuhnya percaya, tetapi menurut artikelnya mereka mengambil 2.000 unit test dan 400 test E2E milik Next lalu meloloskan semuanya

• Saya tidak setuju dengan pernyataan bahwa “abstraksi dalam software dibuat manusia untuk menanggung kompleksitas”
  Abstraksi adalah sarana untuk menangkap esensi realitas dan meningkatkan reusability
  Selain itu, ‘abstraksi’ dan ‘lapisan’ berbeda. Lapisan lebih dekat ke pemisahan concern, dan bisa dilihat sebagai salah satu bentuk abstraksi

• Menarik bahwa “total biayanya sekitar token senilai $1,100”