Next.js'in AI ile bir haftada nasıl yeniden uygulandığı

• vinext, yapay zeka ve tek bir mühendisin bir haftada geliştirdiği, Next.js uyumlu bir framework; Vite tabanlı ve tek satırlık komutla Cloudflare Workers'a dağıtılabiliyor
• Derleme hızı 4,4 kata kadar daha yüksek, istemci bundle boyutu %57 daha küçük; mevcut Next.js projeleriyle aynı dizin yapısını ve yapılandırmayı aynen kullanıyor
• Cloudflare Workers için tasarlandığından KV tabanlı ISR önbellekleme, Traffic-aware Pre-Rendering gibi trafik tabanlı önceden render etme özelliklerini destekliyor
• Tüm kodun büyük kısmı AI tarafından yazıldı; kalite ise 1.700'den fazla test ve otomatik kod incelemesiyle güvence altına alındı
• Bu proje, AI'ın karmaşık framework'leri yeniden uygulayabilecek seviyeye ulaştığını gösteren bir örnek olarak, gelecekte yazılım geliştirme yapısının değişebileceğine işaret ediyor

---

Next.js'in dağıtım sınırları ve sorunun fark edilmesi

• Next.js, React tabanlı önde gelen framework'lerden biri; ancak serverless ortamlara dağıtımda karmaşık bir build çıktısı dönüştürme süreci gerektiriyor
  • Cloudflare, Netlify, AWS Lambda gibi ortamlara dağıtmak için Next.js'in Turbopack build çıktısının her platforma uygun biçimde yeniden düzenlenmesi gerekiyor
• OpenNext bunu çözmeye çalıştı; ancak Next.js build çıktısını tersine mühendislikle çözümleme zorunluluğu nedeniyle sürümler arasında yapısal kararsızlık ortaya çıktı
• Next.js'in adapter API'si geliştiriliyor olsa da, Node.js'e özel geliştirme sunucusu yapısı yüzünden platforma özgü API'leri test etmek zor kalıyor

vinext'in yapısı ve özellikleri

• vinext, Next.js API'sinin Vite üzerinde doğrudan yeniden uygulanmış alternatif bir framework'ü
  • npm install vinext sonrasında next komutunu vinext ile değiştirerek mevcut projeler olduğu gibi çalıştırılabiliyor
  • vinext dev, vinext build, vinext deploy komutlarıyla geliştirme, derleme ve dağıtım tek akışta toplanıyor
• Yönlendirme, sunucu tarafı render, React Server Components, server actions, önbellekleme, middleware gibi Next.js'in temel özellikleri Vite eklentileriyle uygulanmış durumda
• Vite Environment API kullanılarak platformdan bağımsız build çıktıları üretiliyor

Performans kıyaslamaları

• 33 route içeren aynı uygulama üzerinde Next.js 16 ile karşılaştırma yapılmış
  • Build süresi: vinext(Vite 8/Rolldown) 1,67 saniye → Next.js'e göre 4,4 kat daha hızlı
  • İstemci bundle boyutu: 72,9KB → Next.js'e göre %57 daha küçük
• Testler GitHub CI üzerinde çalıştırıldı ve yalnızca derleme ile bundle alma hızı ölçüldü
• Vite 8'in Rust tabanlı bundle aracı Rolldown, build performansındaki artışa katkı sağladı

Cloudflare Workers dağıtımı

• vinext deploy komutuyla otomatik build ve dağıtım gerçekleştiriliyor
  • Hem App Router hem de Pages Router destekleniyor; istemci hydration ve durum yönetimi de buna dahil
• Cloudflare KV cache handler ile ISR (Incremental Static Regeneration) varsayılan olarak sunuluyor
  • Önbellek arka ucu değiştirilebiliyor; R2 veya Cache API ile genişletilebiliyor
• Gerçek çalışma örnekleri olarak App Router Playground ve Hacker News klonu paylaşılmış

Traffic-aware Pre-Rendering (TPR)

• Mevcut Next.js'in generateStaticParams() tabanlı statik önceden render etme verimsizliğini iyileştiriyor
• Cloudflare'ın trafik verisi kullanılarak son 24 saatte en çok ziyaret edilen sayfalar önceden render ediliyor
  • Örnek: 100 bin sayfanın yalnızca 184'ü (toplam trafiğin %90'ı) 8,3 saniye içinde render ediliyor
• Kalan sayfalar ise istek geldiğinde SSR ile oluşturulup ardından ISR önbelleğine alınıyor; her dağıtımda trafik desenine göre otomatik güncelleniyor

AI tabanlı geliştirme süreci

• Projedeki kodun büyük kısmı AI tarafından yazıldı; toplam maliyet yaklaşık $1.100
• 1.700 Vitest ve 380 Playwright testini geçerek Next.js API ile %94 uyumluluk sağlandı
• Geliştirme süreci
  • AI özellik uyguluyor ve test yazıyor → testler çalıştırılıyor → başarısız olursa hata geri bildirimiyle yeniden deneniyor
  • AI ajanı kod incelemesini ve düzeltmeleri de otomatik yapıyor; insan ise yalnızca yön ve mimariyi yönetiyor
• OpenCode üzerinde 800'den fazla oturum yürütüldü; Claude modeli kullanıldı

AI'ı mümkün kılan etkenler

• Next.js'in net dokümantasyonu ve kapsamlı test paketi, AI'ın doğru öğrenmesini sağladı
• Vite'ın kararlı build yapısı temel oluşturdu
• Güncel AI modelleri, büyük kod tabanlarında yapısal tutarlılığı koruma ve modüller arası etkileşimi çıkarımlama seviyesine ulaşmış durumda

Yazılım geliştirme açısından çıkarımlar

• Mevcut çok katmanlı framework yapıları, aslında insanın bilişsel sınırlarını telafi etmek için ortaya çıkmıştı
• AI tüm sistemi bağlam içinde anlayıp doğrudan kod yazabildiği için, ara soyutlama katmanlarına olan ihtiyaç azalıyor
• vinext, AI'ın yalnızca spesifikasyon ve temel araçlarla karmaşık bir framework'ü tamamlayabildiğini gösteren bir kanıt niteliğinde

Açık kaynak ve iş birliği

• vinext'in yaklaşık %95'i Cloudflare'a bağımlı olmayan Vite kodundan oluşuyor; bu nedenle başka hosting platformlarında da kullanılabiliyor
  • Vercel üzerinde 30 dakikada bir PoC hazırlanabildiği belirtiliyor
• Proje açık kaynak olarak yayımlandı; başka platformlar için PR'lar ve yeni dağıtım hedefleri memnuniyetle karşılanıyor

Deneysel durum ve gerçek kullanım

• vinext henüz deneysel aşamada ve büyük ölçekli trafik altında doğrulama tamamlanmış değil
• National Design Studio, devlet sitesi CIO.gov üzerinde bunu gerçek kullanımda değerlendiriyor; build süresi ve bundle boyutunda iyileşme gözlemlendi
• README'de desteklenmeyen özellikler ve bilinen kısıtlar açıkça belirtiliyor

Kullanım şekli

• Agent Skill aracılığıyla AI araçlarında (Claude Code, Cursor vb.) otomatik geçiş desteği sunuluyor
  • npx skills add cloudflare/vinext → “migrate this project to vinext” komutuyla dönüşüm yapılabiliyor
• Manuel olarak ise npx vinext init, vinext dev, vinext deploy komutlarıyla kullanılabiliyor
• Kaynak kod GitHub'da cloudflare/vinext adresinde açık

Teşekkürler ve temel teknolojiler

• Vite ekibinin desteği ve @vitejs/plugin-rsc sayesinde React Server Components özelliği uygulanabildi
• Next.js ekibinin dokümantasyonu ve test paketi, projenin başarısındaki temel dayanak oldu

[GN⁺]

Hacker News yorumları

• Daha bir ay önce bile “AI’ın ticari düzeyde yazılım ürettiğine dair tek bir örnek göster” deniyordu; şimdi ise Cloudflare birden fazla örnek paylaştı ve dün de Ladybird, AI ile Rust’a port edildi
  Bu örneklerin ortak noktası, işi basitleştiren sağlam bir test paketine sahip olmaları
  Belki de AI sayesinde test odaklı geliştirme (TDD) yeniden canlanır

• Ben Next’i gerçekten seviyorum ama Vite’ı da seviyorum
  Ancak Next ekibi, sanki tüm kullanıcıların yalnızca %0,1’i için özelliklere odaklanıp kalan %99,9’u görmezden geliyor gibi hissettiriyor
  Cloudflare’ın bu fork’u böyle bir memnuniyetsizliği giderebilir gibi görünüyor. Performans iyileştirmeleri, Next topluluğunun uzun süredir istediği bir şeydi ama Next ekibi bunu görmezden geldi; Cloudflare ise bunu çözmeye çalışıyor
  Vite’ın, Next’in özelliklerini korurken Next’ten çok daha iyi bir çekirdek katman sunmasını beğeniyorum
  Umarım bu fork başarılı olur ve şirkette de kullanabiliriz

  • Next, kullandığım framework’ler arasında Rails’ten sonra en kötü olanıydı. Çoğu uygulama için gereksiz bir ek yük
  • Bir mühendisin boş zamanında yaptığı deneysel bir projeden uzun vadeli destek beklenip beklenemeyeceği konusunda şüpheliyim
  • Şirketimizde 7 yıldan eski Next.js uygulamaları var ve hâlâ iyi çalışıyorlar; buna rağmen Next ekibi durduk yere yapıyı değiştiriyor ve destek sonu nedeniyle tekrar tekrar refactor yapmak zorunda kalıyoruz
  • Next’te tam olarak neyi sevdiğini merak ediyorum. Eğer asıl değer Vercel entegrasyonuysa, onu çıkarınca Next’i seçmek için bir sebep kalıyor mu diye düşünüyorum
  • Next’ten nefret ediyor, Vite’ı seviyorum. Şirketin büyük ölçekli production uygulaması Next.js üzerinde ve derleme hızı o kadar yavaş ki M4 Pro’ya yükseltmek zorunda kaldık. Next ekibi ise sürekli “dokümanlara bakın” diye geçiştiriyor. Framework’ün kendisi yavaş

• Bu örnek, AI çağındaki açık kaynak teşviklerini iyi gösteriyor
  Dokümantasyonu ne kadar iyi hazırlayıp sözleşmeleri ne kadar net tanımlarsanız, başkalarının onu kopyalaması da o kadar kolay olur
  Cloudflare, Next’in testlerini kullanmasaydı bu sonuç mümkün olmazdı
  Next zaman içinde kademeli olarak büyüyüp karmaşıklaştı ama yeni framework, server component’leri en baştan daha basit hale getirebilir
  Zaten ABD hükümeti sitesinde de kullanılıyor olması şaşırtıcı

  • Bir organizasyon API deneyleri yapıp best practice’leri oluşturuyor, başka bir organizasyon da bunu doğrudan alıyor
    Vercel biraz kendi hazırladığı sonuca yakalanmış olsa da, bu akış küçük açık kaynak projeleri için tehdit olabilir
  • Cloudflare’ın bunun Next’in testleri olmadan yapamayacağı iddiasına katılmıyorum. Karmaşık sistemlerin tersine mühendislik ile yeniden üretildiği pek çok örnek var; AI’ın hızlı yineleme temposu düşünülünce giriş bariyeri neredeyse yok
  • Eğer “open core + kapalı testler” modeline gidilirse, gerçek açık kaynak sonunda testlerin ya da spesifikasyonların kendisi haline gelebilir

• “Hello world” bile çalışmayan bir şey için buna ‘yeniden uygulandı’ denebilir mi, emin değilim
  Üstelik orijinalin test paketini aynen devralmışken ve orijinal öğrenme verisine dahilse, buna ‘from scratch’ demek de zor geliyor
  (Sonrasında telif hakkı olan bir cümleden alıntı örneği verilmiş ama burada atlandı)

• İlginç olan, Cloudflare’ın bir ay önce Astro’yu satın almış olması
  Eğer AI ile bu kadar kolay ikame edilebiliyorsa, neden Astro’ya yüksek bir bedel ödendi?
  Muhtemelen kurumsal düzeyde hâlâ framework’ün vizyonunu ve liderliğini elde tutmanın önemli olduğu düşünülüyor

  • Bu proje, ciddi bir production kullanımından çok rakip taşlamasına yakın bir deney gibi görünüyor. Sonucu birkaç yıl sonra görürüz
  • Astro, Next’ten farklı bir paradigma. Cloudflare sanki Astro üzerinden statik site pazarını almak istiyor.
    Next.js, Vercel’e bağımlı olduğu için Cloudflare’ın müşterileri Next’ten Astro’ya doğal şekilde geçirmeye çalışması muhtemel
  • Astro statik siteler için optimize edilmiş, Next ise dinamik web siteleri için de uygun.
    Biz Astro’yu dahili dokümantasyon sistemimizde kullanıyoruz ve bu iş için gerçekten harika
  • Cloudflare sanki sadece kendi ürünlerine trafik çekmeye çalışıyor. Ben bu aralar Svelte’e geçtim ve oldukça memnunum

• Next.js’in geçmişte uzaktan kod çalıştırma (RCE) zafiyeti vardı.
  Bu yüzden AI tarafından üretilmiş sürümünü bir süre kesinlikle kullanmayı düşünmüyorum

  • Benim için de en çarpıcı nokta buydu. Next.js’i kişisel projelerde kullanmamamın sebebi tam olarak o güvenlik kaygısıydı.
    AI binlerce satır kod ürettiğinde, böyle hataların araya saklanması daha da kolay olabilir
  • Ama bu Next.js’in değil, React’in zafiyetiydi

• Bu proje, şimdiye kadar gördüğüm AI deneyleri içinde en ilginç olanı
  Next.js kod tabanına bakınca devasa görünüyor ama bu uygulamanın kod miktarının 100’de 1’i kadar olması şaşırtıcı
  Acaba gerçekten tüm uç durumları ele alıyor mu, yoksa sadece testleri mi geçiyor merak ediyorum
  Örneğin Next’in form implementasyonu ile
  Vinext’in form implementasyonu karşılaştırıldığında tamamen farklılar
  Yine de oldukça etkileyici bir deneme

  • (Cloudflare mühendisi yanıtı) Tam özellik eşleşmesi hedef değil.
    Henüz erken aşamada olduğu için testlere dahil olmayan sorunlar olabilir
    Kodun çok daha az olmasının nedeni, bunun Vite ve React RSC eklentisi üzerine inşa edilmiş olması
  • Muhtemelen Vite birçok ağır işi kendi üstlendiği için kod azalmış
  • Açıkçası, Cloudflare’ın Next ekibine kızıp “bunu AI ve stajyerle bile yapabiliriz” diye karşılık vermiş gibi görünmesi biraz komik

• “AI ile X’i yeniden yaptık ve çok kolaydı” söylemine şüpheyle yaklaşıyorum
  Büyük ihtimalle ayrıntılar ve bug düzeltme geçmişi eksik
  Testleri eksiksiz geçiyorsa kabul ederim ama aksi halde inanmak zor

  • Ben de tamamen ikna olmuş değilim ama yazıya göre Next’in 2.000 birim testi ve 400 E2E testi alınmış ve hepsi geçirilmiş

• “Yazılımdaki soyutlamalar, insanların karmaşıklığı yönetebilmesi için yaratıldı” sözüne katılmıyorum
  Soyutlama, gerçeğin özünü yakalamak ve yeniden kullanılabilirliği artırmak için kullanılan bir araçtır
  Ayrıca ‘soyutlama’ ile ‘katman’ aynı şey değil. Katmanlar daha çok ilgi alanlarının ayrılması ile ilgilidir ve soyutlamanın bir biçimi olarak görülebilir

• Toplam maliyetin yaklaşık $1.100’lık token olması ilginç