Làm lại Nextjs với AI trong vòng 1 tuần

Tuần trước, với một engineer manager tại cloudflare đã tự xây dựng lại 1 frontend framework phổ biến nhất từ đầu bằng AI. Kết quả, vinext (phát âm là "vee-next"), là một giải pháp thay thế tùy ý cho Next.js, được xây dựng trên Vite, triển khai cho Cloudflare Workers chỉ bằng một lệnh duy nhất. Trong các điểm chuẩn ban đầu, nó xây dựng các ứng dụng sản xuất nhanh hơn gấp 4 lần và tạo ra các gói ứng dụng khách nhỏ hơn tới 57%. Và chúng tôi đã có khách hàng vận hành nó trong sản xuất.

Không biết thánh này nổ như nào nhưng theo các thử nghiệm hiệu năng (benchmark) sớm, vinext giúp:

• Tốc độ build ứng dụng production nhanh gấp 4 lần.
• Kích thước client bundle nhỏ hơn đến 57%.
• Chi phí token AI chỉ khoảng 1.100 USD.

Theo cloudflare công bố, hiện tại đã có những khách hàng đầu tiên vận hành vinext trên môi trường production.

Vấn Đề Triển Khai Của Next.js

Next.js là framework React phổ biến nhất hiện nay, nhưng nó gặp một trở ngại lớn khi sử dụng trong hệ sinh thái serverless rộng lớn. Công cụ của Next.js (như Turbopack) mang tính "đóng khung": nếu bạn muốn triển khai lên Cloudflare, Netlify hoặc AWS Lambda, bạn phải tìm cách biến đổi kết quả build đó thành thứ mà các nền tảng này có thể hiểu được.

Dù các dự án như OpenNext đã cố gắng giải quyết điều này bằng cách đảo ngược kỹ thuật (reverse-engineer) đầu ra của Next.js, nhưng phương pháp này rất mỏng manh và dễ lỗi mỗi khi Next.js cập nhật phiên bản mới.

Ngay cả khi Next.js đang phát triển API adapters, nó vẫn bị giới hạn:

1. Chỉ hỗ trợ Build và Deploy: Không giải quyết được môi trường phát triển (development).
2. Hạn chế Runtime: next dev chạy độc quyền trên Node.js, khiến việc kiểm thử các API đặc thù của nền tảng (như Durable Objects hay KV của Cloudflare) trở nên khó khăn.

Giới Thiệu vinext: Giải Pháp Thay Thế Hoàn Hảo Cho Next.js

Thay vì cố gắng "thích nghi" với đầu ra của Next.js, 1 câu hỏi được đặt ra: Điều gì sẽ xảy ra nếu chúng ta tái hiện lại toàn bộ bề mặt API của Next.js trực tiếp trên Vite? Vite là công cụ build chuẩn cho hầu hết hệ sinh thái front-end hiện nay (Astro, SvelteKit, Remix).

Cài đặt và sử dụng

Bạn chỉ cần thay thế next bằng vinext trong các file script. Mọi cấu trúc app/, pages/, và next.config.js hiện tại của bạn vẫn giữ nguyên:

npm install vinext

vinext dev          # Server phát triển với HMR siêu tốc
vinext build        # Build cho môi trường production
vinext deploy       # Build và triển khai trực tiếp lên Cloudflare Workers

Những Con Số Ấn Tượng

CloudFlare đã thực hiện so sánh vinext với Next.js 16 trên một ứng dụng App Router gồm 33 route.

Production build time:

Client bundle size (gzipped):

Triển Khai Lên Cloudflare Workers Chỉ Trong 1 Giây

vinext được thiết kế với Cloudflare Workers là mục tiêu triển khai ưu tiên. Cả App Router và Pages Router đều hoạt động hoàn hảo trên Workers với đầy đủ tính năng: hydration phía client, server actions, middleware...

Đặc biệt, vinext hỗ trợ Incremental Static Regeneration (ISR) ngay khi xuất xưởng thông qua Cloudflare KV:

import { KVCacheHandler } from "vinext/cloudflare";
import { setCacheHandler } from "next/cache";

setCacheHandler(new KVCacheHandler(env.MY_KV_NAMESPACE));

Việc chạy toàn bộ ứng dụng trong môi trường workerd (cả lúc dev lẫn deploy) giúp bạn sử dụng các dịch vụ như Durable Objects hay AI bindings mà không cần bất kỳ thủ thuật workaround nào.

Traffic-aware Pre-Rendering (TPR): Tương Lai Của Pre-rendering

Các site Next.js lớn thường mất 30 phút để build vì phải pre-render hàng ngàn trang tĩnh. Chúng tôi đã xây dựng Traffic-aware Pre-Rendering (TPR) để giải quyết vấn đề này.

Dựa trên dữ liệu traffic thực tế từ Cloudflare, vinext chỉ pre-render những trang thực sự có người truy cập:

• Phân tích: Truy vấn dữ liệu traffic trong 24h qua.
• Tối ưu: Ví dụ, với 100.000 trang sản phẩm, TPR chỉ pre-render ~200 trang chiếm 90% traffic.
• Hiệu quả: Thời gian build giảm từ hàng chục phút xuống còn vài giây.

vinext deploy --experimental-tpr
# TPR: Pre-rendering 184 pages cover 90% of traffic... Done in 8.3s

Sức Mạnh Của AI: Xây Dựng Framework Trong 7 Ngày

Dự án này thường tiêu tốn hàng tháng trời của một đội ngũ kỹ sư lớn. Nhưng Cloudflare đã hoàn thành trong chưa đầy một tuần nhờ sự kết hợp giữa một kỹ sư điều phối và mô hình AI (Claude).

Tại sao AI lại làm tốt việc này?

• Next.js đã có đặc tả rõ ràng: Dữ liệu đào tạo của AI chứa đầy tài liệu, câu hỏi Stack Overflow và mã nguồn của Next.js.
• Hệ thống Test Case đồ sộ: Chúng tôi đã chuyển đổi hơn 1.700 bài kiểm tra Vitest từ chính repo của Next.js để làm "kim chỉ nam" cho AI.
• Vite là nền tảng vững chắc: Chúng tôi không cần xây dựng bundler, chỉ cần dạy AI cách kết nối Vite với Next.js.

Hơn 800 phiên làm việc trên OpenCode với tổng chi phí 1.100 USD token đã tạo nên một framework có độ bao phủ 94% API của Next.js 16.

Lời Kết: Thử Nghiệm Ngay vinext

Dù vẫn đang ở giai đoạn thực nghiệm (Experimental), vinext đã đạt tỷ lệ bao phủ API ấn tượng và được sử dụng bởi các đơn vị như National Design Studio. Và đây cũng là 1 trong những thành quả ấn tượng mà AI từng đạt được khi rebuild 1 framework lớn chỉ trong 1 thời gian ngắn Nếu bạn muốn trải nghiệm tốc độ của Vite trên cấu trúc Next.js, hãy thử ngay:

# Migrate dự án Next.js hiện có sang vinext bằng AI Skill
npx skills add cloudflare/vinext
migrate this project to vinext

Hoặc thực hiện thủ công:

• Mã nguồn: github.com/cloudflare/vinext
• Khởi tạo: npx vinext init

Nguồn tham khảo:

https://blog.cloudflare.com/vinext/?fbclid=IwY2xjawQN3rlleHRuA2FlbQIxMABicmlkETJRejZGaXdOaUJYMFB1S3gyc3J0YwZhcHBfaWQQMjIyMDM5MTc4ODIwMDg5MgABHhjyrdBeabcUyEkzXt5J3yFl2GTxa3BvWbtrtGjAD92mmNZwJw2isRBA6_ze_aem_Q2nEp70mujpcPbKBoLZUMA/