vi
new
0
Avatar
Nguyễn Đình Long @dinhlongit
2.3K 85 32
Đã đăng vào khoảng 17 giờ trước 13 phút đọc
57

vinext: Khi Cloudflare Rebuild Next.js Bằng AI Trong 1 Tuần — Và Thắng

Tản mạn: Câu chuyện về một "cá cược" $1,100

Có những hôm đang deploy Next.js app lên Cloudflare Workers, rồi gặp lỗi OpenNext không tương thích với Next.js version mới, mình tự hỏi:

"Sao phải vòng vo thế này? Next.js build ra output, rồi OpenNext phải reverse-engineer lại để chạy trên Workers... Có cách nào trực tiếp hơn không?"

Hoá ra không chỉ mình nghĩ vậy. Team Cloudflare cũng nghĩ thế. Và họ quyết định làm một thứ điên rồ:

Rebuild toàn bộ Next.js framework từ đầu, nhưng lần này build trên Vite, deploy native lên Workers, chỉ trong 1 tuần.

Nghe có vẻ không tưởng nhỉ? Một framework mà hàng chục engineers ở Vercel phát triển nhiều năm, giờ 1 engineer + AI sẽ rebuild trong 7 ngày?

Chi phí: $1,100 token OpenAI.

Kết quả: vinext — drop-in replacement cho Next.js, build nhanh hơn 4.4x, bundle nhỏ hơn 57%, và đã có khách hàng chạy production.

Bài này mình sẽ kể câu chuyện đó, và những bài học về AI-assisted development mà chúng ta cần biết.

image.png

Vấn đề gốc: Next.js có "deployment problem"

Next.js phổ biến, nhưng deployment... là chuyện khác

Next.js là React framework phổ biến nhất. Millions developers dùng nó. Developer experience tuyệt vời.

Nhưng có một vấn đề:

Khi deploy Next.js lên serverless platforms (Cloudflare, Netlify, AWS Lambda), anh em phải:

  1. Next.js build bằng Turbopack → ra output theo format riêng
  2. OpenNext đọc output đó → reverse-engineer → reshape lại
  3. Mới deploy được lên platform

Hãy tưởng tượng như thế này:

Bạn viết một bức thư bằng tiếng Việt (source code), Next.js dịch sang tiếng Pháp (build output), rồi OpenNext phải đọc tiếng Pháp để dịch ngược sang tiếng Anh (serverless format) để người nhận hiểu được.

Vòng vo, dễ sai, và tốn công maintain.

OpenNext: Giải pháp tạm thời, nhưng fragile

image.png OpenNext ra đời để giải quyết vấn đề này. Nó hoạt động, nhưng:

  • Reverse-engineering Next.js output → mỗi Next.js version mới ra là phải update lại
  • Không có API chính thức → dựa vào implementation details
  • Game of whack-a-mole → fix bug này, lại gặp bug khác

Cloudflare đã contribute rất nhiều vào OpenNext. Nhưng họ nhận ra:

"Building on top of Next.js output là foundation không bền. Cần một cách khác."

Next.js team cũng biết vấn đề này, đang làm adapters API. Nhưng:

  • Vẫn build trên Turbopack (bespoke toolchain)
  • next dev chỉ chạy trên Node.js
  • Không thể test platform-specific APIs (Durable Objects, KV...) trong dev

Đó là lúc câu hỏi điên rồ xuất hiện:

What if... reimplementing Next.js API trên Vite?

Ý tưởng: Không adapt output, mà reimplement API

Thay vì:

Next.js (Turbopack) → Build output → OpenNext reshape → Deploy

Làm thế này:

vinext (Vite) → Build output → Native deploy

Reimplement toàn bộ Next.js API surface:

  • Routing (App Router + Pages Router)
  • Server rendering (SSR)
  • React Server Components (RSC)
  • Server Actions
  • Middleware
  • Caching

Nhưng lần này build trực tiếp trên Vite.

Tại sao Vite?

Vite là build tool được dùng bởi hầu hết frontend ecosystem ngoài Next.js:

  • Astro
  • SvelteKit
  • Nuxt
  • Remix

Vite có:

  • Fast HMR (Hot Module Replacement)
  • Native ESM support
  • Plugin API clean
  • Vite Environment API → chạy trên bất kỳ platform nào

Quan trọng nhất: @vitejs/plugin-rsc đã có sẵn React Server Components support.

Vậy chỉ cần viết Vite plugin implement Next.js API. Done!

image.png

vinext: Kết quả sau 1 tuần làm việc với AI

Performance benchmarks

Cloudflare test với một app 33 routes (App Router), so sánh Next.js 16.1.6 vs vinext:

Production build time:

Framework Build Time vs Next.js
Next.js 16.1.6 (Turbopack) 7.38s baseline
vinext (Vite 7 / Rollup) 4.64s 1.6x faster
vinext (Vite 8 / Rolldown) 1.67s 4.4x faster

Client bundle size (gzipped):

Framework Gzipped vs Next.js
Next.js 16.1.6 168.9 KB baseline
vinext (Rollup) 74.0 KB 56% smaller
vinext (Rolldown) 72.9 KB 57% smaller

Giải thích:

  • Vite/Rollup architecture có structural advantages
  • Rolldown (Rust-based bundler trong Vite 8) cực kỳ nhanh
  • Tree-shaking tốt hơn → bundle nhỏ hơn

Compatibility: 94% Next.js API surface

vinext support:

  • App Router
  • Pages Router
  • Server Components (RSC)
  • Server Actions
  • Middleware
  • Dynamic routes
  • API routes
  • ISR (Incremental Static Regeneration)

Test coverage:

  • 1,700+ Vitest tests
  • 380 Playwright E2E tests
  • Tests ported từ Next.js test suite
  • 94% API coverage

Chưa support:

  • Static pre-rendering at build time (generateStaticParams)
  • Một số edge cases

Nhưng đủ để chạy production.

Deploy lên Cloudflare Workers: Một command

npm install vinext
vinext deploy

Đúng, chỉ một command.

vinext được thiết kế với Cloudflare Workers làm first-class deployment target:

# Development với HMR
vinext dev

# Build production
vinext build

# Deploy to Workers
vinext deploy

Điều đặc biệt:

vinext dev chạy trong workerd runtime (Cloudflare Workers runtime), không phải Node.js.

Điều này có nghĩa:

  • Test được Durable Objects, KV, AI bindings ngay trong dev
  • Không cần getPlatformProxy() workarounds
  • Dev environment giống production environment
// Sử dụng Cloudflare KV trong dev và production
import { KVCacheHandler } from "vinext/cloudflare";
import { setCacheHandler } from "next/cache";

setCacheHandler(new KVCacheHandler(env.MY_KV_NAMESPACE));

Caching strategy linh hoạt:

  • Default: Cloudflare KV (cho ISR)
  • Có thể swap: R2, Cache API, hoặc custom backend

image.png

Traffic-aware Pre-Rendering: Innovation mới

Vấn đề với static pre-rendering truyền thống

Next.js hỗ trợ pre-render static pages at build time:

// Next.js approach
export async function generateStaticParams() {
  return [
    { id: '1' }, { id: '2' }, ... , { id: '10000' }
  ];
}

Vấn đề:

  • Site có 10,000 product pages → phải render 10,000 pages lúc build
  • Build time tăng tuyến tính với số pages
  • Large sites có build 30 phút, thậm chí 1 tiếng
  • 99% pages không bao giờ được visit

vinext giải pháp: Traffic-aware Pre-Rendering (TPR)

Ý tưởng đơn giản nhưng brilliant:

Cloudflare đã là reverse proxy của site bạn rồi. Họ có traffic data. Tại sao không dùng data đó để quyết định page nào cần pre-render?

vinext deploy --experimental-tpr

  Building...
  Build complete (4.2s)

  TPR: Analyzing traffic for my-store.com (last 24h)
  TPR: 12,847 unique paths — 184 pages cover 90% of traffic
  TPR: Pre-rendering 184 pages...
  TPR: Pre-rendered 184 pages in 8.3s → KV cache

  Deploying to Cloudflare Workers...

Workflow:

  1. Analyze traffic của site (24h gần nhất)
  2. Tìm pages chiếm 90% traffic (thường chỉ 50-200 pages)
  3. Pre-render chỉ những pages đó
  4. Pages còn lại → on-demand SSR + ISR cache

Ưu điểm:

  • Build time nhanh (seconds thay vì minutes)
  • Không cần generateStaticParams()
  • Không cần coupling với production database
  • Pages viral tự động được pick up ở deploy tiếp theo

Đây là một innovation thật sự trong static generation approach.

Làm thế nào họ rebuild Next.js với AI?

Context: Đây là project "impossible" với human team

Rebuild Next.js không phải chuyện đùa:

  • 2 routing systems (App Router + Pages Router)
  • 33+ module shims (next/navigation, next/headers, next/cache...)
  • Server rendering pipeline
  • RSC streaming
  • Middleware
  • Caching layer
  • Static export

Nhiều team đã thử, không ai thành công.

Cloudflare cũng đã thử một lần, failed.

Lần này khác: AI đã đủ tốt.

Tại sao project này "made for AI"?

Không phải project nào cũng suitable cho AI. vinext khác vì:

1. Next.js được document cực kỳ tốt

  • Official docs đầy đủ
  • Millions tutorials, Stack Overflow answers
  • API surface rõ ràng
  • LLM đã được train trên data này

2. Next.js có elaborate test suite

  • Thousands E2E tests trong repo
  • vinext port tests trực tiếp từ Next.js repo
  • Tests = living specification

3. Vite là excellent foundation

  • Không phải build bundler từ đầu
  • HMR, production bundling đã có sẵn
  • @vitejs/plugin-rsc cho RSC support

4. Model đủ tốt (cuối 2025)

  • Claude Opus 4.5, GPT-4.5 có thể sustain coherence across large codebase
  • Reasoning capabilities đủ để understand architecture
  • Có thể dive vào Next.js, Vite, React internals khi cần

Tất cả factors trên phải align cùng lúc.

Workflow: Human steers, AI executes

Setup ban đầu (2 hours):

  • Define architecture với Claude in OpenCode
  • Quyết định abstractions nào cần dùng
  • Plan implementation order

Implementation loop:

1. Define task
   "Implement next/navigation shim with usePathname, useSearchParams"

2. AI writes implementation + tests

3. Run test suite

4. If pass → merge
   If fail → give AI error output, let it iterate

5. Repeat

Quality gates (tự động):

  • 1,700+ Vitest tests
  • 380 Playwright E2E tests
  • TypeScript type checking (tsgo)
  • Linting (oxlint)
  • CI runs tất cả mỗi PR

AI agents review code:

  • PR opened → agent reviews
  • Review comments → another agent addresses
  • Feedback loop mostly automated

Human role:

  • Architecture decisions
  • Prioritization
  • Course correction khi AI đi sai hướng
  • Final review

Metrics của project

  • Timeline: Feb 13-20, 2026 (7 days)
  • Contributors: 1 engineer + AI
  • OpenCode sessions: 800+
  • Cost: ~$1,100 in API tokens
  • Test coverage: 1,700 unit tests + 380 E2E tests
  • API coverage: 94% Next.js surface

First commit: Feb 13, evening

  • Basic SSR working cho cả App Router và Pages Router
  • Middleware, Server Actions, streaming

Day 2: App Router Playground rendering 10/11 routes

Day 3: vinext deploy shipping apps to Workers

Days 4-7: Hardening, edge cases, test coverage

BÀI HỌC KINH NGHIỆM: AI-assisted development năm 2026

Lesson 1: AI đã sẵn sàng cho "reimplementation" tasks

Reimplementation khác với innovation:

  • Spec rõ ràng (Next.js API là spec)
  • Test suite comprehensive (Next.js tests)
  • Foundation đã có (Vite)

→ Perfect sweet spot cho AI

Khi nào nên dùng AI cho big projects:

  • Well-specified API surface
  • Comprehensive test suite
  • Good documentation
  • Solid foundation libraries

Khi nào chưa nên:

  • Vague requirements
  • No tests
  • Build everything from scratch
  • Poorly documented domain

Lesson 2: Quality gates quan trọng hơn "AI viết code đẹp"

AI viết code, nhưng phải pass qua gates:

  • Tests (unit + E2E)
  • Type checking
  • Linting
  • CI

Không có gates → AI code sẽ drift và accumulate bugs.

"Every line passes the same quality gates you'd expect from human code."

Lesson 3: Cost của software development đã thay đổi

Trước đây:

  • Team 5-10 engineers
  • Timeline 6-12 tháng
  • Cost: salaries, infrastructure, overhead

Bây giờ:

  • 1 engineer + AI
  • Timeline 1 tuần
  • Cost: $1,100 tokens

Software cost giảm 100x cho certain types of projects.

Lesson 4: Abstractions exist vì human limitations

Câu hỏi sâu sắc mà Cloudflare engineer đặt ra:

"Tại sao chúng ta có nhiều layers trong stack?"

Trả lời: Vì con người cần help.

  • Không thể hold toàn bộ system trong đầu
  • Cần abstractions để manage complexity
  • Mỗi layer giúp người tiếp theo dễ dàng hơn

AI khác:

  • Có thể hold whole system in context
  • Không cần intermediate abstraction
  • Chỉ cần spec + foundation

Tương lai:

"Nhiều abstractions chúng ta build sẽ không còn cần thiết. Chúng chỉ là crutches cho human cognition."

vinext là data point: AI viết code trực tiếp từ API contract + build tool, không cần intermediate framework.

Lesson 5: Human vẫn critical cho decisions

AI viết code rất tốt. Nhưng:

  • Architecture decisions → Human
  • Prioritization → Human
  • Product decisions (Traffic-aware Pre-Rendering idea) → Human
  • Course correction → Human

"AI is a tool that makes 1 engineer 10x more productive, not a replacement for engineers."

Tương lai: Frameworks là "team sport"

vinext không chỉ cho Cloudflare

95% vinext code là pure Vite, không specific cho Cloudflare.

Cloudflare đang làm việc với other hosting providers để adopt vinext cho customers của họ:

  • Netlify
  • AWS Lambda
  • Vercel (ironic, nhưng có thể)

Proof: Cloudflare chạy vinext trên Vercel trong < 30 phút.

Lý do:

  • Vite Environment API → platform-agnostic
  • Adapting vinext cho platform mới rất đơn giản
  • Open source project, PRs welcome

Vision:

Một toolchain duy nhất, deploy lên bất kỳ platform nào.

Ecosystem đang hình thành

Live examples:

Agent Skill cho migration:

npx skills add cloudflare/vinext

Mở project Next.js, nói với AI:

"migrate this project to vinext"

Skill tự động:

  • Check compatibility
  • Install dependencies
  • Generate config
  • Start dev server

Manual migration:

npx vinext init    # Migrate existing Next.js project
npx vinext dev     # Start dev server
npx vinext deploy  # Deploy to Cloudflare Workers

Ý nghĩa với software development

2026: Năm AI chuyển từ "coding assistant" sang "implementation partner"

vinext không phải chỉ là một framework mới.

Nó là proof point rằng:

1. AI có thể build production software

  • Không chỉ fix bugs, viết helper functions
  • Mà build entire systems với thousands lines of code
  • Với quality đủ tốt cho production

2. Speed của software development thay đổi fundamental

  • Việc mất 6 tháng giờ mất 1 tuần
  • Việc cần team 10 người giờ cần 1 người

3. Focus sẽ shift từ "writing code" sang "designing systems"

  • Engineers sẽ focus vào:
    • Architecture decisions
    • Product requirements
    • Quality gates
    • User experience
  • AI handle implementation details

4. Open source sẽ bùng nổ

  • Cost để build library, framework giảm drastically
  • More experiments
  • More innovation
  • Faster iteration

Không phải mọi thứ sẽ được AI build

AI tốt cho:

  • Reimplementation với clear spec
  • Porting code between languages/frameworks
  • Build tools, libraries với comprehensive tests
  • Boilerplate, scaffolding

AI chưa tốt cho:

  • Novel research (no training data)
  • Vague, changing requirements
  • High creativity, design-heavy projects
  • Debugging production issues (need real-world context)

Human + AI complementary, không phải replacement.

Kết luận: Rebuild, Rethink, Reimagine

vinext không chỉ giải quyết Next.js deployment problem.

Nó cho chúng ta thấy:

1. Technical: Có thể build framework-level software với AI assistance

2. Economic: Cost của software development đã fundamentally thay đổi

3. Philosophical: Nhiều abstractions chúng ta dùng chỉ tồn tại vì human limitations

Câu hỏi cho anh em:

Nếu 1 engineer + AI có thể rebuild Next.js trong 1 tuần với $1,100...

Thì cái project bạn đang làm, có thể làm nhanh hơn bao nhiêu?

Năm 2026, AI không chỉ là copilot nữa. Nó là teammate thực sự.

Hãy tận dụng nó đúng cách. Và nhớ rằng: Human vẫn là người quyết định chiến lược, AI chỉ là người thực thi tốc độ cao.

Hy vọng bài viết này giúp bạn hiểu rõ hơn về vinext và tương lai của AI-assisted development. Nếu quan tâm, hãy thử vinext cho side project của bạn xem nhé!

Nguồn:

FB: https://www.facebook.com/nguyendinhlong1998

AI Agent nextjs

All rights reserved

Mục lục


Viblo
Hãy đăng ký một tài khoản Viblo để nhận được nhiều bài viết thú vị hơn.
Đăng kí