Cách tái hiện Next.js bằng AI chỉ trong một tuần

• vinext là framework tương thích Next.js do AI và một kỹ sư tạo ra chỉ trong một tuần, xây dựng trên nền Vite và có thể triển khai lên Cloudflare Workers bằng một lệnh duy nhất
• Tốc độ build nhanh hơn tới 4,4 lần, kích thước bundle phía client nhỏ hơn 57%, đồng thời giữ nguyên cấu trúc thư mục và cấu hình như các dự án Next.js hiện có
• Được thiết kế cho Cloudflare Workers, hỗ trợ cache ISR dựa trên KV, Traffic-aware Pre-Rendering cùng các tính năng pre-render dựa trên lưu lượng truy cập
• Phần lớn toàn bộ mã nguồn được AI viết, với hơn 1.700 bài kiểm thử và quy trình review mã tự động để đảm bảo chất lượng
• Dự án này là một ví dụ cho thấy AI đã đạt đến mức có thể tái hiện các framework phức tạp, đồng thời gợi mở khả năng thay đổi cấu trúc phát triển phần mềm trong tương lai

---

Giới hạn triển khai của Next.js và nhận diện vấn đề

• Next.js là framework tiêu biểu dựa trên React, nhưng khi triển khai lên môi trường serverless cần quy trình chuyển đổi output build phức tạp
  • Để triển khai lên Cloudflare, Netlify, AWS Lambda..., cần tái cấu trúc kết quả build Turbopack của Next.js theo từng nền tảng
• OpenNext từng cố giải quyết vấn đề này, nhưng do giới hạn cấu trúc phải reverse engineer output build của Next.js, nên phát sinh sự bất ổn theo từng phiên bản
• API adapter của Next.js đang được phát triển, nhưng do cấu trúc dev server chỉ dành cho Node.js, vẫn tồn tại hạn chế khiến việc kiểm thử API theo từng nền tảng trở nên khó khăn

Cấu trúc và đặc điểm của vinext

• vinext là framework thay thế tái hiện trực tiếp API của Next.js trên Vite
  • Sau npm install vinext, chỉ cần thay lệnh next bằng vinext là có thể chạy nguyên dự án hiện có
  • Các lệnh vinext dev, vinext build, vinext deploy giúp thống nhất quy trình phát triển, build và triển khai
• Các tính năng chính của Next.js như routing, server rendering, React Server Components, server actions, caching, middleware được triển khai bằng plugin Vite
• Sử dụng Vite Environment API để tạo ra kết quả build độc lập với nền tảng

Benchmark hiệu năng

• So sánh với Next.js 16 trên cùng một ứng dụng có 33 route
  • Thời gian build: vinext (Vite 8/Rolldown) 1,67 giây → nhanh hơn 4,4 lần so với Next.js
  • Kích thước bundle phía client: 72,9KB → nhỏ hơn 57% so với Next.js
• Thử nghiệm được thực hiện trên GitHub CI và chỉ đo tốc độ biên dịch và bundling
• Rolldown, bộ bundler viết bằng Rust của Vite 8, góp phần cải thiện hiệu năng build

Triển khai lên Cloudflare Workers

• Lệnh vinext deploy thực hiện build và triển khai tự động
  • Hỗ trợ cả App Router lẫn Pages Router, bao gồm client hydration và quản lý state
• Cung cấp sẵn ISR (Incremental Static Regeneration) thông qua Cloudflare KV cache handler
  • Backend cache có thể thay thế, và có thể mở rộng sang R2 hoặc Cache API
• Đã công khai các ví dụ hoạt động thực tế như App Router Playground, bản sao Hacker News...

Traffic-aware Pre-Rendering (TPR)

• Cải thiện sự kém hiệu quả của pre-render tĩnh dựa trên generateStaticParams() trong Next.js hiện tại
• Tận dụng dữ liệu lưu lượng truy cập của Cloudflare để chỉ pre-render các trang có lượng truy cập cao trong 24 giờ gần nhất
  • Ví dụ: trong 100.000 trang, chỉ render trước 184 trang (chiếm 90% tổng lưu lượng) trong vòng 8,3 giây
• Các trang còn lại sẽ SSR khi có request rồi cache bằng ISR, và được tự động cập nhật theo mẫu lưu lượng ở mỗi lần triển khai

Quy trình phát triển dựa trên AI

• Phần lớn mã của dự án do AI viết, với tổng chi phí khoảng 1.100 USD
• Vượt qua 1.700 bài kiểm thử Vitest và 380 bài kiểm thử Playwright, đạt mức tương thích 94% với API của Next.js
• Quy trình phát triển
  • AI triển khai tính năng và viết test → chạy test → nếu thất bại thì nhận phản hồi lỗi và thử lại
  • Tác tử AI còn tự động review và sửa mã, còn con người chỉ quản lý định hướng và cấu trúc
• Thực hiện hơn 800 phiên trong OpenCode, sử dụng mô hình Claude

Những yếu tố AI đã làm được

• Nhờ tài liệu rõ ràng và bộ test đồ sộ của Next.js, AI có thể học và triển khai chính xác
• Cấu trúc build ổn định của Vite đóng vai trò nền tảng
• Các mô hình AI mới nhất đã đạt tới mức có thể duy trì tính nhất quán cấu trúc của codebase lớn và suy luận tương tác giữa các mô-đun

Hàm ý đối với phát triển phần mềm

• Cấu trúc framework nhiều lớp trước đây vốn là kết quả để bù đắp giới hạn nhận thức của con người
• AI có thể hiểu toàn bộ hệ thống trong ngữ cảnh và trực tiếp viết mã, nên nhu cầu về các lớp trừu tượng trung gian đang giảm đi
• vinext là một minh chứng cho thấy AI có thể hoàn thiện framework phức tạp chỉ với đặc tả và công cụ nền tảng

Mã nguồn mở và hợp tác

• Khoảng 95% của vinext là mã Vite không phụ thuộc Cloudflare, nên cũng có thể áp dụng trên các nền tảng hosting khác
  • Đã triển khai thành công PoC trên Vercel chỉ trong 30 phút
• Dự án được công bố dưới dạng mã nguồn mở và hoan nghênh PR từ các nền tảng khác cũng như việc bổ sung mục tiêu triển khai mới

Trạng thái thử nghiệm và ứng dụng thực tế

• vinext vẫn đang ở giai đoạn thử nghiệm, việc kiểm chứng với lưu lượng lớn vẫn chưa hoàn tất
• National Design Studio đang áp dụng thực tế cho website chính phủ CIO.gov, và đã xác nhận cải thiện thời gian build cùng kích thước bundle
• README có nêu rõ các tính năng chưa được hỗ trợ và những giới hạn đã biết

Cách sử dụng

• Hỗ trợ migrate tự động trong các công cụ AI (Claude Code, Cursor...) thông qua Agent Skill
  • npx skills add cloudflare/vinext → chuyển đổi bằng lệnh “migrate this project to vinext”
• Nếu làm thủ công, có thể dùng các lệnh npx vinext init, vinext dev, vinext deploy
• Mã nguồn được công khai trên GitHub tại cloudflare/vinext

Lời cảm ơn và công nghệ nền tảng

• Nhờ sự hỗ trợ của đội ngũ Vite và @vitejs/plugin-rsc, dự án có thể triển khai tính năng React Server Components
• Tài liệu và bộ test của nhóm Next.js là nền tảng cốt lõi cho thành công của dự án

[GN⁺]

Ý kiến trên Hacker News

• Mới một tháng trước thôi còn nghe câu “hãy cho tôi xem chỉ một ví dụ AI tạo ra phần mềm cấp độ thương mại”, vậy mà giờ Cloudflare đã công bố nhiều ví dụ, và hôm qua thì Ladybird đã được port sang Rust bằng AI
  Điểm chung của các trường hợp này là đều có test suite rất đầy đủ nên công việc trở nên đơn giản hơn
  Biết đâu nhờ AI mà phát triển hướng kiểm thử (TDD) sẽ sống lại

• Tôi thật sự rất thích Next nhưng cũng yêu Vite
  Nhưng tôi có cảm giác đội ngũ Next tập trung vào các tính năng cho 0,1% người dùng, còn 99,9% còn lại thì bị bỏ qua
  Bản fork lần này của Cloudflare có vẻ có thể giải quyết sự bất mãn đó. Cải thiện hiệu năng là điều cộng đồng Next đã mong muốn từ lâu, nhưng đội Next phớt lờ, còn Cloudflare thì đang cố giải quyết nó
  Tôi thích việc Vite cung cấp một lớp lõi tốt hơn Next rất nhiều nhưng vẫn giữ được các tính năng của Next
  Hy vọng bản fork này sẽ thành công để có thể dùng ở công ty

  • Next là framework tệ thứ hai mà tôi từng dùng, chỉ sau Rails. Với đa số ứng dụng thì nó là overhead không cần thiết
  • Tôi nghi ngờ liệu có thể kỳ vọng hỗ trợ lâu dài từ một dự án thử nghiệm do một kỹ sư làm trong thời gian rảnh hay không
  • Công ty chúng tôi có các ứng dụng Next.js hơn 7 năm tuổi, vẫn chạy tốt, nhưng đội Next cứ thay đổi cấu trúc không lý do và chúng tôi phải refactor lặp đi lặp lại vì hết hỗ trợ
  • Tôi tò mò bạn thích điểm gì ở Next. Nếu giá trị cốt lõi là tích hợp với Vercel, thì bỏ điều đó ra còn lý do gì để chọn Next nữa không?
  • Tôi ghét Next và yêu Vite. Ứng dụng production quy mô lớn của công ty dùng Next.js, và tốc độ biên dịch chậm đến mức chúng tôi phải nâng cấp lên M4 Pro. Đội Next lúc nào cũng né tránh kiểu “hãy đọc tài liệu”. Bản thân framework này quá chậm

• Trường hợp này cho thấy rất rõ động lực của mã nguồn mở trong thời đại AI
  Tài liệu càng tốt và hợp đồng càng được định nghĩa rõ ràng thì người khác càng dễ sao chép nó
  Nếu Cloudflare không tận dụng các bài test của Next thì kết quả này đã không thể có được
  Next đã phát triển dần dần và trở nên phức tạp, nhưng framework mới có thể đơn giản hóa server component ngay từ đầu
  Thật ngạc nhiên là nó đã được dùng cả trên trang web của chính phủ Mỹ

  • Khi một tổ chức thử nghiệm API và thiết lập best practice, tổ chức khác có thể lấy nguyên như vậy
    Vercel phần nào tự gây ra chuyện này, nhưng xu hướng như vậy có thể là mối đe dọa với các dự án mã nguồn mở nhỏ
  • Tôi không đồng ý với nhận định rằng Cloudflare sẽ không thể làm được nếu không có test của Next. Đã có rất nhiều trường hợp tái tạo hệ thống phức tạp bằng reverse engineering, và nếu xét đến tốc độ lặp của AI thì rào cản gia nhập gần như không còn
  • Nếu đi theo mô hình “open core + test riêng tư”, thì mã nguồn mở thực sự cuối cùng có thể chính là test hoặc spec

• Tôi nghi ngờ liệu có thể gọi là “đã tái triển khai” khi còn chưa chạy nổi cả “Hello world”
  Hơn nữa, nếu thừa hưởng nguyên test suite của bản gốc, và bản gốc lại nằm trong dữ liệu huấn luyện, thì khó mà gọi là “from scratch” được
  (Sau đó có trích dẫn một câu có bản quyền làm ví dụ nhưng đã lược bỏ)

• Điều thú vị là Cloudflare đã mua lại Astro từ một tháng trước
  Nếu có thể dễ dàng thay thế bằng AI, vậy tại sao lại phải mua Astro với giá cao?
  Có lẽ ở cấp độ tổ chức, họ vẫn cho rằng việc nắm giữ tầm nhìn và năng lực lãnh đạo của framework là điều quan trọng

  • Dự án này trông giống một thử nghiệm mang tính châm biếm đối thủ hơn là dành cho production nghiêm túc. Vài năm nữa nhìn lại sẽ biết
  • Astro là một paradigm khác với Next. Có vẻ Cloudflare muốn chiếm lĩnh thị trường site tĩnh thông qua Astro.
    Vì Next.js phụ thuộc vào Vercel, Cloudflare nhiều khả năng sẽ thúc đẩy khách hàng chuyển từ Next sang Astro một cách tự nhiên
  • Astro được tối ưu cho site tĩnh, còn Next thì cũng phù hợp với website động.
    Chúng tôi dùng Astro cho hệ thống tài liệu nội bộ, và nó thực sự rất tuyệt cho mục đích đó
  • Có vẻ Cloudflare chỉ muốn kéo lưu lượng truy cập về sản phẩm của họ. Dạo này tôi chuyển sang Svelte và khá hài lòng

• Next.js từng có lỗ hổng thực thi mã từ xa (RCE) trong quá khứ
  Vì vậy tôi sẽ tuyệt đối không dùng phiên bản do AI tạo ra trong một thời gian

  • Tôi cũng thấy phần đó là gây sốc nhất. Lý do tôi không dùng Next.js cho dự án cá nhân chính là vì lo ngại bảo mật đó.
    Khi AI sinh ra hàng nghìn dòng mã, những lỗi như vậy còn dễ ẩn nấp hơn
  • Nhưng đó không phải lỗ hổng của Next.js mà là lỗ hổng của React

• Đây là thí nghiệm AI thú vị nhất mà tôi từng thấy cho đến nay
  Nhìn vào codebase của Next.js thì khổng lồ, nhưng bản triển khai lần này chỉ bằng 1/100 lượng mã, điều đó thật đáng ngạc nhiên
  Tôi tự hỏi liệu nó có xử lý được mọi edge case hay chỉ đơn giản là vượt qua bài test
  Ví dụ, nếu so sánh phần triển khai form của Next với
  phần triển khai form của Vinext thì hoàn toàn khác nhau
  Dù vậy đây vẫn là một nỗ lực khá ấn tượng

  • (Phản hồi từ kỹ sư Cloudflare) Mục tiêu không phải là tương thích tính năng hoàn toàn.
    Đây vẫn là giai đoạn đầu nên có thể còn những vấn đề chưa nằm trong test
    Lý do lượng mã ít hơn nhiều là vì nó được xây dựng trên plugin Vite và React RSC
  • Có lẽ mã giảm đi vì Vite đã gánh phần lớn công việc nặng
  • Thành thật mà nói, cũng khá buồn cười vì trông như Cloudflare bực đội Next nên đáp lại kiểu “AI với thực tập sinh cũng làm được”

• Tôi vẫn hoài nghi với kiểu nói “tái triển khai X bằng AI và thấy quá dễ”
  Có thể đã bỏ qua chi tiết và lịch sử sửa lỗi
  Nếu nó vượt qua test một cách hoàn hảo thì tôi công nhận, còn nếu không thì khó tin lắm

  • Tôi cũng không hoàn toàn tin, nhưng theo bài viết thì họ đã lấy 2.000 unit test và 400 bài test E2E của Next và cho qua hết

• Tôi không đồng ý với câu “trừu tượng hóa trong phần mềm là thứ con người tạo ra để chịu đựng được sự phức tạp”
  Trừu tượng hóa là phương tiện để nắm bắt bản chất của thực tại và tăng khả năng tái sử dụng
  Ngoài ra, ‘abstraction’ và ‘layer’ là khác nhau. Layer gần với tách biệt mối quan tâm hơn, và có thể xem là một dạng của abstraction

• Điểm thú vị là “tổng chi phí chỉ khoảng 1.100 USD token”