How Cloudflare Rebuilt Next.js in a Weekend  🔗 **Source:** [How Cloudflare Rebuilt Next.js in a Weekend](https://leaddev.com/ai/how-cloudflare-rebuilt-next-js-in-a-weekend) > [!note]+ Document Notes > tags: #ai-development #agentic-coding #next-js #cloudflare #software-architecture > author: Bill Doerrfeld > source: LeadDev > reference: https://leaddev.com/ai/how-cloudflare-rebuilt-next-js-in-a-weekend > date created: 2024-12-28 18:53 > > # 🏷️ Title: How Cloudflare rebuilt Next.js in a weekend > <!-- deep-read:sections start --> ## 🧰 Action Inbox - [H1] Evaluate agentic coding for framework replacements — $1,100 cost for Next.js rebuild #ai-development - [H2] Assess build vs buy decisions with AI capabilities — fundamentally changed economics #software-architecture - [H3] Consider vinext for Vite-based Next.js alternative — 4x faster builds, 57% smaller bundles #performance ## 🧭 Table of Contents - [[#📝 Summary]] - [[#📖 Main Content]] - [[#🗒️ Notes]] - [[#📚 References]] - [[#🗣️ Paraphrase]] - [[#📰 Newsletter]] - [[#✅ Action Items]] - [[#🧪 Hypotheses]] - [[#📊 Methodology]] - [[#❓ Questions]] - [[#🔮 Future Research]] - [[#💡 Implications]] - [[#🧠 Learning Styles Assessment]] - [[#📊 Accessibility Assessment]] - [[#🌍 DEIB Assessment]] - [[#✅ Logical Validity]] - [[#🛡️ DARVO Analysis]] - [[#🎯 Conclusion]] ### 🔗 References - [vinext on GitHub](https://github.com/cloudflare/vinext) - [Cloudflare Workers](https://workers.cloudflare.com/) ## 📝 Summary - Cloudflare rebuilt Next.js in a weekend using agentic AI coding for $1,100, creating vinext - a purpose-built alternative - The result delivers 4x faster build times and 57% smaller client bundles compared to original Next.js - This demonstrates how AI is shifting the build-versus-buy equation, making "start from scratch" economically viable - Agentic coding moves engineers from writing code to directing architectural decisions and planning - While promising for large-scale operations like Cloudflare, this approach may fragment the open source ecosystem ## 📖 Main Content Cloudflare's engineering team accomplished something remarkable in early 2026: they rebuilt the entire Next.js framework in a matter of days using Claude AI in OpenCode, spending just $1,100 in tokens. The resulting project, called vinext, demonstrates how agentic AI coding is fundamentally changing software development economics and processes. Next.js, originally designed by Vercel, never quite fit Cloudflare's infrastructure needs. The platform lock-in created deployment challenges, and previous attempts to patch Next.js using OpenNext never achieved great parity with Vercel's implementation. Performance remained lacking. Vinext solves these issues by reimplementing the Next.js API surface as a Vite plugin, building natively for Cloudflare's infrastructure. The technical improvements are substantial: production apps build up to 4x faster, client bundles are 57% smaller, and the pre-rendering capability significantly benefits latency-sensitive sites. This isn't just about Next.js replacement - it represents a broader shift in how engineering teams approach the build-versus-buy decision. CTO Dane Knecht frames this as the evolution of "forking" open source software, a practice that predates AI by decades. However, AI dramatically reduces the cost and complexity of creating custom-tailored solutions. The implications extend beyond individual projects. At Cloudflare, engineers are shifting from low-level coding details to architectural decision-making and planning. Communication and time management skills become more critical as developers direct AI agents rather than write code directly. However, this approach isn't universally applicable. Cloudflare operates at massive scale with highly specific needs that justify custom solutions. Smaller teams should consider whether established, well-maintained projects better serve their needs. There's also risk of fragmenting the open source ecosystem, as larger projects typically have more oversight and security review. ## 🗒️ Notes #### ⏱️ [00:00] — [H1] Cloudflare rebuilt Next.js using agentic AI in weekend - Key idea: Engineering director used Claude in OpenCode to rebuild entire Next.js framework - Evidence: "After the first weekend, it worked pretty well" - cost $1,100 in tokens #### ⏱️ [02:30] — [H2] Vinext delivers significant performance improvements - Key idea: Custom-built solution optimized for Cloudflare infrastructure - Evidence: "4x faster builds and 57% smaller client bundles, major improvement over Next.js" #### ⏱️ [05:15] — [H3] AI makes "start from scratch" economically viable - Key idea: Traditional build-versus-buy equation fundamentally changed - Evidence: "The costs are just so much lower and you can build purpose-built from day one" #### ⏱️ [07:45] — [H2] Forking open source software predates AI by decades - Key idea: AI-assisted rebuilding is evolution of existing forking practices - Evidence: "Webkit spawned Blink for Chrome, SQLite has forks, Rust has forks" #### ⏱️ [10:20] — [H1] Next.js never fit Cloudflare's platform needs - Key idea: Original Next.js designed for Vercel's infrastructure, not Cloudflare's - Evidence: "Platform lock-in made it challenging when deploying to other environments" #### ⏱️ [12:55] — [H2] Vinext reimplements Next.js API as Vite plugin - Key idea: Built on Vite foundation rather than recreating everything - Evidence: "A lot of credit goes to Vite. We're building on the shoulders of giants" #### ⏱️ [15:30] — [H3] Community emerged with 50+ contributors and 8,000 stars - Key idea: Project gained traction with collaborative agentic development - Evidence: "They're creating plans and specs for AI, telling the AI to go off and do it" #### ⏱️ [18:10] — [H1] Agentic coding shifts engineer focus to architecture - Key idea: Engineers move from low-level coding to high-level planning - Evidence: "Less making sure they're tabbing or spacing, more thinking through architecture" #### ⏱️ [20:45] — [H2] Communication skills become more important for engineers - Key idea: Day-to-day work changes require different skillsets - Evidence: "Communication skills and time management will become more important" #### ⏱️ [23:20] — [H3] Not all teams should rebuild everything immediately - Key idea: Cloudflare's scale and specific needs justify custom solutions - Evidence: "A lot of people won't have those unique criteria and should use building blocks" #### ⏱️ [25:50] — [H2] Risk of fragmenting open source ecosystem - Key idea: Smaller projects may lack security oversight of larger ones - Evidence: "The bigger projects have more eyes on them" for security review #### ⏱️ [28:15] — [H1] More major open source rebuilds expected - Key idea: 20+ year old projects may be candidates for AI-assisted rebuilding - Evidence: "Stay tuned, there will be a lot of them. This is not the last" ## 📚 References - [vinext GitHub Repository](https://github.com/cloudflare/vinext) - [Next.js Official Documentation](https://nextjs.org/) - [Vite Build Tool](https://vitejs.dev/) - [OpenNext Project](https://open-next.js.org/) ## 🗣️ Paraphrase - Cloudflare demonstrated that AI can economically rebuild major frameworks like Next.js in days rather than months, producing better-performing alternatives - The shift from human-written to AI-directed code changes engineering roles from implementation to architectural planning and system design - While promising for large-scale operations with specific needs, widespread adoption risks fragmenting open source ecosystems and reducing collaborative oversight ## 📰 Newsletter 🚀 **AI Rebuilds Next.js in a Weekend - What This Means for WordPress** Cloudflare just proved something remarkable: their team rebuilt the entire Next.js framework using AI in just a weekend for $1,100. The result, called "vinext," delivers 4x faster builds and 57% smaller bundles. **Why This Matters for WordPress:** - The build-versus-buy equation has fundamentally changed with AI - Custom solutions for specific needs are now economically viable - WordPress developers should consider when AI-assisted rebuilding makes sense **Key Takeaway:** While not every team should rebuild everything, we should all be asking whether existing solutions truly fit our needs - or if purpose-built alternatives could serve us better. **What's Next:** Expect more AI-powered rebuilds of established frameworks. The question isn't if this will impact WordPress ecosystem tools, but when and how. Resources: [Learn WordPress](https://learn.wordpress.org/), [Developer Docs](https://developer.wordpress.org/), [WP-CLI](https://wp-cli.org/) ## ✅ Action Items #### DevRel - Developer advocacy: Create talks about agentic coding implications for WordPress ecosystem - Education: Develop workshops on when to rebuild vs. extend existing WordPress tools - Developer experience: Evaluate AI-assisted documentation and tooling improvements - Developer marketing: Position WordPress as AI-friendly development platform - Community management: Facilitate discussions on AI impact on plugin/theme development #### OSPO - Policy & Governance: Establish guidelines for AI-assisted contributions to WordPress projects - License Compliance: Review implications of AI-generated code for GPL compliance - Security Management: Develop review processes for AI-generated WordPress components - Software Inventory: Track AI tools used in WordPress core development - Developer Support: Provide training on responsible AI-assisted WordPress development - Community Engagement: Fund research into AI impact on open source sustainability - Strategic Alignment: Define KPIs for AI adoption in WordPress development #### Community - Maintainers: Provide templates for evaluating AI-assisted contributions - Contributors: Develop onboarding for AI-enhanced contribution workflows - Sponsors: Fund pilot projects exploring AI-assisted WordPress development - Ecosystem: Coordinate standards for AI tool integration across WordPress projects #### WordPress - Core: Evaluate opportunities for AI-assisted performance optimizations - Core Performance: Use AI for automated performance testing and optimization - Core AI: Establish guardrails for AI-generated core contributions - Core Program Team: Coordinate AI adoption strategy across teams - Mobile: Explore AI-assisted mobile app development acceleration - Playground: Use AI for generating educational examples and demos - Community: Create AI development guidelines for WordCamps and meetups - Training: Develop curriculum on AI-assisted WordPress development - Marketing: Communicate WordPress's position on AI in development - Support: Use AI for enhanced documentation and support automation - Design: Explore AI-assisted design system generation and maintenance - Documentation: Implement AI for documentation improvement and maintenance - Photos: Evaluate AI for content categorization and moderation - TV: Use AI for content transcription and indexing - Polyglots: Explore AI-assisted translation workflows - Accessibility: Use AI for automated accessibility testing and improvements - Meta: Evaluate AI for .org infrastructure optimization - CLI: Explore AI-assisted command development and documentation - Hosting: Develop AI guidelines for hosting provider integrations - Tide: Use AI for enhanced code quality analysis - Openverse: Implement AI for content discovery and categorization - Themes: Explore AI-assisted theme review and development - Plugins: Develop AI tools for security scanning and optimization #### The WPCC - Programs: Fund fellowships exploring AI impact on WordPress development - Projects: Support governance research for AI-assisted open source projects - Funding: Provide grants for AI-powered WordPress ecosystem improvements #### FAIR - Technical independence: Ensure AI tools don't create vendor lock-in - Policies: Develop transparency requirements for AI-generated contributions - Governance artifacts: Create charters addressing AI in open source development ## 🧪 Hypotheses - Teams using agentic coding will complete framework rebuilds 10x faster than traditional development - WordPress sites using AI-optimized themes will show 25% performance improvements over traditional themes - Open source projects will fragment as AI makes custom solutions economically viable - Engineering teams will shift 60% of their time from coding to architectural planning within 2 years ### 📊 Methodology - Compare development velocity between AI-assisted and traditional WordPress plugin development - Measure performance impacts of AI-generated versus human-written WordPress code - Track fragmentation trends in WordPress ecosystem projects over 12-month period ### ❓ Questions - How will AI-assisted development impact WordPress's GPL licensing and contribution model? - What governance structures can prevent excessive fragmentation while enabling innovation? - How should WordPress core development adapt to incorporate agentic coding capabilities? ### 🔮 Future Research - Long-term sustainability of AI-generated open source projects - Impact of agentic coding on WordPress developer career paths and required skills - Economic models for funding AI-assisted open source development ### 💡 Implications - Practice: WordPress developers need to learn AI direction skills alongside coding - Policy: WordPress community requires new guidelines for AI-generated contributions - Security: Enhanced review processes needed for AI-generated WordPress code - Education: Training programs must evolve to include agentic coding methodologies - Funding: New economic models needed to support AI-assisted open source development ### 🧠 Learning Styles Assessment Reading level estimate: 12th grade (Flesch-Kincaid) #### 👀 Visual learners - Present: Code examples, architecture diagrams showing vinext structure - Improve: Performance comparison charts, AI workflow visualizations, decision trees #### 🔊 Aural learners - Present: Article can be read aloud, technical terms defined - Improve: 3-minute audio summary highlighting key technical achievements #### 🗣️ Verbal learners - Present: Clear definitions of agentic coding, extensive analogies to traditional forking - Improve: Story-driven examples of other AI-assisted rebuilds, comparison narratives #### 🧩 Kinesthetic learners - Present: Step-by-step explanation of rebuild process - Improve: Hands-on tutorial for simple AI-assisted WordPress plugin development #### 🧠 Logical learners - Present: Performance metrics (4x, 57%), cost analysis ($1,100), clear timeline - Improve: Decision framework for build-vs-buy with AI, ROI calculations #### 🧑‍🤝‍🧑 Social learners - Present: Community discussion around 8,000 GitHub stars, collaborative development - Improve: Forums for discussing AI impact on WordPress development #### 🧘‍♀️ Solitary learners - Present: In-depth technical analysis suitable for independent study - Improve: Self-assessment tools for determining AI readiness, reflection prompts #### 🌿 Naturalistic learners - Present: Evolution metaphors for forking and AI development - Improve: Ecosystem impact analysis, sustainability considerations for AI development ### 📊 Accessibility Assessment #### Screen reader semantics - Present: Clear headings hierarchy, structured lists for technical points - Improve: More descriptive link text, aria-labels for technical diagrams #### Keyboard navigation - Present: Standard web navigation available - Improve: Skip links for technical sections, keyboard shortcuts for code examples #### Contrast and readability - Present: Standard text meets 4.5:1 contrast requirements - Improve: Ensure code examples have sufficient contrast, check technical diagrams #### Text resizing and reflow - Present: Responsive design supports 200% zoom - Improve: Test technical content reflow, ensure tables remain readable #### Media and captions - Present: Text-based content, no media requiring captions - Improve: Add captions if video demonstrations created #### Forms and interactions - Present: No complex forms or interactions - Improve: Ensure any future interactive elements follow accessibility guidelines #### Standards reference - Meets WCAG 2.2 AA for text content, needs review for any technical diagrams ### 🌍 DEIB Assessment #### Cultural breadth - Present: Global perspective on open source development, international examples - Improve: Include non-Western perspectives on AI adoption in development #### Inclusive language - Present: Gender-neutral technical terms, clearly defined jargon - Improve: Provide plain-language summaries for complex technical concepts #### Neurodiversity support - Present: Well-structured content with clear headings, logical flow - Improve: Add content summaries, break up long technical paragraphs #### Representation - Present: Technical focus with diverse global implications - Improve: Include perspectives from different scales of organizations #### Psychological safety - Present: Balanced view of AI impact, acknowledges concerns about fragmentation - Improve: Address potential job displacement fears, provide constructive guidance ### ✅ Logical Validity #### Strong reasoning - Deductive strength: Strong logical flow from AI <!-- deep-read:sections end --> 📄 **Full text:** ![[Full Document Contents/Articles/How Cloudflare Rebuilt Next.js in a Weekend.md|How Cloudflare Rebuilt Next.js in a Weekend by leaddev.com]] ## Highlights - Forking is commonplace and pre-dates AI-assisted coding by decades. For example, as Knecht notes, the [Webkit](https://github.com/WebKit/WebKit) browser engine spawned numerous forks, such as [Blink](https://www.chromium.org/blink/), which powers Google Chrome. Forks exist for SQLite, Rust, and plenty of others. ([View Highlight](https://read.readwise.io/read/01kqmwhtbc51vmrsf9z3nmz09y)) - Tags: 👻 ai highlighted