Cách chúng tôi tái xây dựng Next.js với AI trong một tuần

Ngày phát hành

2026-02-24

Giới thiệu vinext

Bài viết này được cập nhật lúc 12:35 chiều PT để sửa một lỗi đánh máy trong các thử nghiệm thời gian build.

Tuần trước, một kỹ sư và một mô hình AI đã tái xây dựng framework front-end phổ biến nhất từ đầu. Kết quả là vinext, một thay thế hoàn toàn cho Next.js, xây dựng trên Vite, và triển khai lên Cloudflare Workers chỉ với một lệnh duy nhất.

Vấn đề triển khai Next.js

Next.js là framework React phổ biến nhất. Tuy nhiên, Next.js gặp vấn đề khi triển khai trong hệ sinh thái serverless rộng hơn.

Các công cụ hiện tại như Turbopack phải thích ứng với nhiều nền tảng khác nhau như Cloudflare, Netlify, hay AWS Lambda. Điều này tạo ra những khó khăn trong việc điều chỉnh và tối ưu hóa cho từng nền tảng.

Giới thiệu vinext

Thay vì thích nghi với kết quả build của Next.js, chúng tôi đã triển khai lại API của Next.js trực tiếp trên Vite.

npm install vinext
vinext dev   # Server phát triển với HMR
vinext build # Build sản phẩm
vinext deploy # Triển khai lên Cloudflare Workers

Các con số đo lường

Thời gian build sản phẩm:

Kích thước gói khách hàng (gzipped):

Triển khai lên Cloudflare Workers

vinext được xây dựng với Cloudflare Workers làm mục tiêu triển khai đầu tiên.

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

setCacheHandler(new KVCacheHandler(env.MY_KV_NAMESPACE));

Các ví dụ đang chạy:

• App Router Playground

Tình trạng: Thử nghiệm

vinext hiện là giải pháp thử nghiệm và chưa được thử nghiệm hoàn toàn với lượng truy cập lớn.

Giới thiệu Traffic-aware Pre-Rendering

Chúng tôi phát triển Traffic-aware Pre-Rendering (TPR), sử dụng dữ liệu traffic để chỉ tiền render các trang quan trọng.

vinext deploy --experimental-tpr

Thách thức Next.js bằng AI

Một dự án như thế này thường sẽ mất nhiều tháng, nhưng chúng tôi đã làm được chỉ trong một tuần với sự hỗ trợ của AI.

Tóm tắt quy trình xây dựng

Vinext được xây dựng chủ yếu bằng AI, với quy trình nghiêm ngặt và nhiều thử nghiệm tự động để đảm bảo chất lượng mã.

Kết luận

AI đã giúp rút ngắn thời gian phát triển và giảm các tầng lớp không cần thiết trong phần mềm. Vinext là một ví dụ về cách AI có thể làm thay đổi cục diện phát triển phần mềm.

Thử nghiệm ngay

Vinext đi kèm Agent Skill hỗ trợ di chuyển. Cài đặt và bảo AI di chuyển:

npx skills add cloudflare/vinext

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

npx vinext init    # Chuyển đổi dự án Nex.js
npx vinext dev     # Khởi động server phát triển
npx vinext deploy  # Triển khai lên Cloudflare Workers

Nguồn tại github.com/cloudflare/vinext.