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 ने प्रोजेक्ट की सफलता के लिए मुख्य आधार का काम किया