AI की मदद से एक हफ्ते में Next.js को फिर से कैसे बनाया गया

• vinext एक Next.js-compatible framework है जिसे AI और एक इंजीनियर ने सिर्फ एक हफ्ते में बनाया, और यह Vite-आधारित है तथा एक लाइन के कमांड से Cloudflare Workers पर deploy किया जा सकता है
• build speed अधिकतम 4.4 गुना तेज है, और client bundle size 57% छोटी है, साथ ही मौजूदा Next.js प्रोजेक्ट की वही directory structure और settings ज्यों-की-त्यों इस्तेमाल होती हैं
• Cloudflare Workers के लिए डिज़ाइन किया गया होने से यह KV-आधारित ISR caching और Traffic-aware Pre-Rendering जैसी traffic-आधारित pre-rendering सुविधाएँ सपोर्ट करता है
• पूरे कोड का अधिकांश हिस्सा AI ने लिखा है, और 1,700 से अधिक tests तथा automated code review के जरिए गुणवत्ता सुनिश्चित की गई
• यह प्रोजेक्ट इस बात का उदाहरण है कि AI अब जटिल framework को फिर से implement कर सकता है, और आगे software development की संरचना बदलने की संभावना दिखाता है

---

Next.js की deployment सीमाएँ और समस्या की पहचान

• Next.js, React-आधारित एक प्रमुख framework है, लेकिन serverless environment में deploy करते समय build output conversion की जटिल प्रक्रिया की जरूरत होती है
  • Cloudflare, Netlify, AWS Lambda आदि पर deploy करने के लिए Next.js के Turbopack build result को हर platform के अनुसार फिर से बनाना पड़ता है
• OpenNext ने इसे हल करने की कोशिश की, लेकिन Next.js build output को reverse engineer करना पड़ने वाली संरचनात्मक सीमा के कारण version-दर-version instability पैदा हुई
• Next.js का adapter API development में है, लेकिन Node.js-only development server structure के कारण platform-specific API testing कठिन रहती है

vinext की संरचना और विशेषताएँ

• vinext, Next.js API का Vite पर सीधे re-implementation करने वाला alternative framework है
  • npm install vinext के बाद next कमांड को vinext से बदलने पर मौजूदा प्रोजेक्ट वैसे ही चल सकता है
  • vinext dev, vinext build, vinext deploy कमांड के जरिए development, build और deployment एकीकृत हो जाते हैं
• routing, server rendering, React Server Components, server actions, caching, middleware जैसी Next.js की प्रमुख सुविधाएँ Vite plugin के रूप में implement की गई हैं
• Vite Environment API का उपयोग करके platform-independent build result बनाया जाता है

performance benchmark

• 33 routes वाले उसी app की Next.js 16 से तुलना
  • build time: vinext(Vite 8/Rolldown) 1.67 सेकंड → Next.js की तुलना में 4.4 गुना तेज
  • client bundle size: 72.9KB → Next.js की तुलना में 57% छोटी
• testing GitHub CI पर की गई, और सिर्फ compilation और bundling speed को मापा गया
• Vite 8 का Rust-आधारित bundler Rolldown build performance बढ़ाने में सहायक रहा

Cloudflare Workers deployment

• vinext deploy कमांड से automatic build और deployment किया जाता है
  • App Router और Pages Router दोनों सपोर्ट होते हैं, और client hydration तथा state management भी शामिल हैं
• Cloudflare KV cache handler के जरिए ISR(Incremental Static Regeneration) default रूप से उपलब्ध है
  • cache backend बदला जा सकता है, और R2 या Cache API तक विस्तार संभव है
• वास्तविक उदाहरण के तौर पर App Router Playground, Hacker News clone आदि सार्वजनिक किए गए हैं

Traffic-aware Pre-Rendering (TPR)

• मौजूदा Next.js के generateStaticParams()-आधारित static pre-rendering की inefficiency को बेहतर बनाता है
• Cloudflare के traffic data का उपयोग करके पिछले 24 घंटों में अधिक visit वाले pages को ही pre-render किया जाता है
  • उदाहरण: 1 लाख pages में से 184 pages (कुल traffic का 90%) को सिर्फ 8.3 सेकंड में render
• बाकी pages को request के समय SSR के बाद ISR caching के साथ संभाला जाता है, और हर deployment पर traffic pattern के अनुसार अपने-आप update होते हैं

AI-आधारित development process

• प्रोजेक्ट का अधिकांश कोड AI ने लिखा, कुल लागत लगभग $1,100
• 1,700 Vitest और 380 Playwright tests पास करते हुए Next.js API की 94% compatibility हासिल की गई
• development प्रक्रिया
  • AI फीचर implement करता है और tests लिखता है → tests चलाए जाते हैं → failure होने पर error feedback देकर दोबारा कोशिश
  • AI agent code review और fixes भी अपने-आप करता है, जबकि इंसान सिर्फ दिशा और संरचना संभालता है
• OpenCode में 800 से अधिक sessions चलाए गए, और Claude model का उपयोग किया गया

AI को संभव बनाने वाले कारक

• Next.js की स्पष्ट documentation और विशाल test suite की वजह से AI सटीक तरीके से सीख सका
• Vite की स्थिर build structure ने आधार का काम किया
• नए AI models अब बड़े codebase में structural consistency बनाए रखने और modules के बीच interaction का अनुमान लगाने के स्तर तक पहुँच चुके हैं

software development पर संकेत

• मौजूदा बहु-स्तरीय framework structure, मानव की cognitive limitations को पूरा करने का परिणाम थी
• AI पूरे system को context में समझकर सीधे code लिख सकता है, इसलिए बीच की abstraction layers की जरूरत कम हो सकती है
• vinext इस बात का प्रमाण है कि AI सिर्फ specifications और base tools के सहारे जटिल framework पूरा कर सकता है

open source और collaboration

• vinext का लगभग 95% हिस्सा Cloudflare-निर्भर न होने वाले Vite code से बना है, इसलिए इसे अन्य hosting platforms पर भी लागू किया जा सकता है
  • Vercel पर 30 मिनट में PoC बनाकर सफल प्रदर्शन किया गया
• इसे open source के रूप में जारी किया गया है, और अन्य platforms के PRs तथा नए deployment targets जोड़ने का स्वागत है

experimental स्थिति और वास्तविक उपयोग

• vinext अभी भी experimental stage में है, और बड़े traffic पर validation अभी पूरा नहीं हुआ है
• National Design Studio इसे सरकारी वेबसाइट CIO.gov पर वास्तविक रूप से उपयोग कर रहा है, और build time तथा bundle size में सुधार की पुष्टि हुई है
• README में unsupported features और known limitations दर्ज हैं

उपयोग का तरीका

• Agent Skill के जरिए AI tools (Claude Code, Cursor आदि) में automatic migration सपोर्ट मिलता है
  • npx skills add cloudflare/vinext → “migrate this project to vinext” कमांड से conversion
• manually npx vinext init, vinext dev, vinext deploy कमांड से चलाया जा सकता है
• source code GitHub के cloudflare/vinext पर सार्वजनिक है

आभार और आधार तकनीक

• Vite team के समर्थन और @vitejs/plugin-rsc की वजह से React Server Components फीचर implement किया जा सका
• Next.js team की documentation और test suite ने प्रोजेक्ट की सफलता के लिए मुख्य आधार का काम किया

[GN⁺]

Hacker News की राय

• सिर्फ़ एक महीने पहले तक लोग कहते थे, “AI ने commercial-grade software बनाया हो, ऐसा बस एक उदाहरण दिखा दो,” लेकिन अब Cloudflare ने कई उदाहरण साझा किए हैं, और कल Ladybird को AI की मदद से Rust में port किया गया
  इन उदाहरणों में एक समान बात यह है कि test suite अच्छी तरह तैयार था, इसलिए काम आसान हो गया
  शायद AI की वजह से test-driven development (TDD) फिर से वापस आ जाए

• मुझे Next बहुत पसंद है, लेकिन Vite भी उतना ही पसंद है
  लेकिन ऐसा लगता है कि Next टीम कुल users के सिर्फ़ 0.1% के लिए features पर ध्यान देती है, और बाकी 99.9% को नज़रअंदाज़ करती है
  Cloudflare का यह fork शायद ऐसी निराशा को दूर कर सके। performance improvement ऐसी चीज़ थी जिसे Next community लंबे समय से चाहती थी, लेकिन Next टीम ने अनदेखा किया, और Cloudflare उसे हल करने की कोशिश कर रहा है
  मुझे यह पसंद है कि Vite, Next से कहीं बेहतर core layer देता है, जबकि Next की features भी बनाए रखता है
  उम्मीद है यह fork सफल होगा ताकि हम इसे कंपनी में भी इस्तेमाल कर सकें

  • Next उन frameworks में से सबसे खराब था जिन्हें मैंने इस्तेमाल किया है, Rails के बाद
    ज़्यादातर apps के लिए यह बेकार का overhead है
  • क्या किसी एक engineer के spare time में बने experimental project से long-term support की उम्मीद की जा सकती है, इस पर संदेह है
  • हमारी कंपनी में 7 साल से ज़्यादा पुराने Next.js apps हैं, जो अब भी ठीक चल रहे हैं, फिर भी Next टीम बिना वजह architecture बदलती रही, और end-of-support के कारण हमें बार-बार refactoring करनी पड़ी
  • मैं जानना चाहता हूँ कि आपको Next में क्या पसंद है। अगर Vercel integration ही इसकी मुख्य value है, तो उसके बिना Next चुनने की कोई वजह है क्या
  • मुझे Next से नफ़रत है और Vite से प्यार। हमारी कंपनी का बड़ा production app Next.js पर है, और compile speed इतनी धीमी थी कि हमें M4 Pro में upgrade करना पड़ा। Next टीम हमेशा “docs पढ़ो” कहकर बच निकलती है। framework खुद ही धीमा है

• यह मामला AI युग में open source incentives को अच्छी तरह दिखाता है
  जितनी अच्छी documentation होगी और जितने स्पष्ट contracts define होंगे, दूसरों के लिए उसे replicate करना उतना आसान होगा
  अगर Cloudflare ने Next के tests का उपयोग नहीं किया होता, तो ऐसा नतीजा संभव नहीं होता
  Next धीरे-धीरे बढ़ते हुए complex हुआ, लेकिन नया framework शुरू से ही server components को सरल बना सकता है
  यह देखकर हैरानी हुई कि इसे पहले से अमेरिकी सरकारी साइट पर भी इस्तेमाल किया जा रहा है

  • एक organization API experiments और best practices तय करती है, फिर दूसरी organization वही चीज़ उठा लेती है
    यह Vercel की खुद की बनाई हुई स्थिति है, लेकिन ऐसा रुझान छोटे open source projects के लिए ख़तरा बन सकता है
  • मैं इस दावे से सहमत नहीं हूँ कि Cloudflare के लिए Next के tests के बिना यह असंभव था। reverse engineering से complex systems को दोबारा बनाने के कई उदाहरण हैं, और AI की तेज़ iteration speed को देखते हुए entry barrier लगभग नहीं के बराबर है
  • अगर चीज़ें “open-core + private tests” model की तरफ़ जाती हैं, तो असली open source आख़िरकार tests या spec खुद बन सकता है

• मुझे संदेह है कि जिस चीज़ से “Hello world” भी ठीक से नहीं चलता, उसे ‘reimplementation’ कहा जा सकता है
  ऊपर से अगर original का test suite ज्यों का त्यों लिया गया हो, और original training data में भी शामिल रहा हो, तो उसे ‘from scratch’ कहना मुश्किल है
  (इसके बाद copyrighted sentence का उदाहरण दिया गया था, लेकिन यहाँ हटाया गया है)

• दिलचस्प बात यह है कि Cloudflare ने एक महीने पहले Astro को acquire किया था
  अगर AI से इसे आसानी से replace किया जा सकता है, तो फिर Astro को इतने महंगे दाम पर क्यों खरीदा गया?
  शायद organization level पर framework की vision और leadership हासिल करना अब भी अहम माना जाता है

  • यह project किसी serious production use से ज़्यादा competitor satire के करीब एक experiment लगता है। कुछ साल बाद नतीजा पता चलेगा
  • Astro, Next से अलग paradigm है। लगता है Cloudflare Astro के ज़रिए static site market हासिल करना चाहता है
    Next.js, Vercel पर dependent है, इसलिए Cloudflare शायद customers को Next से Astro की तरफ़ स्वाभाविक migration कराने की कोशिश करेगा
  • Astro static sites के लिए optimized है, जबकि Next dynamic websites के लिए भी उपयुक्त है
    हम अपने internal documentation system में Astro इस्तेमाल करते हैं, और उस काम के लिए यह वाकई शानदार है
  • लगता है Cloudflare बस अपने products की तरफ़ traffic drive करना चाहता है। मैं इन दिनों Svelte पर shift हुआ हूँ और काफ़ी संतुष्ट हूँ

• Next.js में पहले remote code execution (RCE) vulnerability रह चुकी है
  इसलिए अभी कुछ समय तक मैं AI से बने version का इस्तेमाल करने के बारे में सोच भी नहींूँगा

  • मुझे भी वही बात सबसे ज़्यादा चौंकाने वाली लगी। मैंने अपने personal projects में Next.js इस्तेमाल नहीं किया, और वजह वही security concern थी
    जब AI हज़ारों lines of code generate करता है, तो ऐसे bugs और आसानी से छिप सकते हैं
  • लेकिन वह Next.js की नहीं, बल्कि React की vulnerability थी

• यह project अब तक देखे गए AI experiments में सबसे दिलचस्प है
  Next.js codebase को देखें तो वह बहुत विशाल है, लेकिन इस implementation में code size 100वें हिस्से जितना है, यह चौंकाने वाला है
  क्या यह सच में सारे edge cases handle करता है, या सिर्फ़ tests pass करता है, यह जानने की जिज्ञासा है
  उदाहरण के लिए Next का form implementation और
  Vinext का form implementation की तुलना करें तो दोनों पूरी तरह अलग हैं
  फिर भी यह काफ़ी प्रभावशाली कोशिश है

  • (Cloudflare engineer का जवाब) पूरा feature parity हासिल करना लक्ष्य नहीं है
    यह अभी शुरुआती चरण में है, इसलिए tests में शामिल न हुई समस्याएँ हो सकती हैं
    code बहुत कम होने की वजह यह है कि इसे Vite और React RSC plugin के ऊपर बनाया गया है
  • शायद Vite बहुत सा heavy lifting खुद कर देता है, इसलिए code कम हो गया
  • सच कहूँ तो यह थोड़ा मज़ेदार है कि Cloudflare शायद Next टीम से नाराज़ होकर “इसे तो AI और interns से भी बनाया जा सकता है” जैसी प्रतिक्रिया दे रहा है

• “हमने AI से X को reimplement किया और यह बहुत आसान था” जैसी बातों पर मुझे संदेह है
  हो सकता है details और bug fixes का इतिहास इसमें गायब हो
  अगर यह tests पूरी तरह pass करता है तो मानूँगा, नहीं तो भरोसा करना मुश्किल है

  • मैं भी पूरी तरह आश्वस्त नहीं हूँ, लेकिन लेख के मुताबिक Next के 2,000 unit tests और 400 E2E tests लाकर सब pass कराए गए

• मैं इस बात से सहमत नहीं हूँ कि “software abstractions इंसानों ने complexity से निपटने के लिए बनाई हैं”
  abstractions, असलियत के सार को पकड़ने और reusability बढ़ाने का साधन हैं
  और ‘abstraction’ और ‘layer’ एक ही चीज़ नहीं हैं। layer ज़्यादा separation of concerns के करीब है, और abstraction का एक रूप मानी जा सकती है

• यह दिलचस्प है कि “कुल लागत लगभग $1,100 के tokens थी”