How we rebuilt Next.js with AI in one week

Cloudflare · 2026 · 4. Điều chỉnh · Độ khó: Trung bình — bài gốc

Bài của nhà cung cấp, giới thiệu một dự án thử nghiệm chưa qua traffic lớn và dẫn khách về Cloudflare Workers; benchmark là của chính họ trên một app 33 route. Mọi nhận định là theo Cloudflare.

Bối cảnh

• Next.js dùng toolchain riêng (Turbopack); muốn chạy trên nền tảng serverless khác (Cloudflare, Netlify, Lambda) phải nắn lại output build. OpenNext làm việc đó bằng cách dịch ngược output của Next.js, nên vỡ không đoán trước giữa các phiên bản ("trò đập chuột"). API adapter của Next.js mới chỉ phủ build và deploy; next dev chỉ chạy trong Node, nên code dùng API riêng của nền tảng (Durable Objects, KV) không test được lúc dev.

Thay đổi chính

• Viết lại bề mặt API của Next.js trên Vite (vinext), không bọc output của Next.js: routing, SSR, React Server Components, server actions, cache, middleware, dạng một plugin Vite. Khoảng 95% là Vite thuần, không đặc thù Cloudflare; chạy được ở dev và deploy trong cùng runtime (workerd).
• Làm trong chưa tới một tuần bởi một người điều khiển AI: vài giờ thống nhất kiến trúc với Claude (OpenCode) thành kế hoạch; vòng lặp "giao task → AI viết code và test → chạy test → qua thì merge, không thì đưa lỗi cho AI"; agent review PR và agent khác sửa theo review. Hơn 800 phiên, khoảng 1.100 USD token. Người vẫn quyết kiến trúc, ưu tiên, và nhận ra khi AI đi vào ngõ cụt hoặc tự tin làm sai hành vi của Next.js.
• Test suite là đặc tả: chuyển thẳng test từ repo Next.js và bộ conformance của OpenNext; hơn 1.700 test Vitest, 380 test Playwright E2E, type check, lint chạy trên mỗi PR; kiểm hành vi trình duyệt bằng agent điều khiển trình duyệt. Phủ khoảng 94% API của Next.js 16.
• Traffic-aware Pre-Rendering (thử nghiệm): Next.js render trước mọi trang trong generateStaticParams() nên build tăng tuyến tính theo số trang (site lớn build 30 phút). vinext hỏi analytics của Cloudflare lúc deploy và chỉ render trước các trang chiếm 90% traffic (ví dụ 184 trên 12.847 đường dẫn), phần còn lại SSR theo yêu cầu rồi cache (ISR trên KV).

Vì sao

• Benchmark (app 33 route, so với Next.js 16.1.6, chỉ đo build và bundle): build nhanh 1,6 lần với Vite 7/Rollup, 4,4 lần với Vite 8/Rolldown; bundle client gzip nhỏ hơn khoảng 57%. Một site chính phủ (CIO.gov) đã chạy ở production.
• Theo Cloudflare, việc này khả thi vì bốn điều cùng đúng: API mục tiêu được tài liệu hoá kỹ, có test suite lớn để kiểm chứng máy móc, nền tảng build tốt (Vite), và model đủ sức giữ cả kiến trúc trong ngữ cảnh. Họ cho rằng nhiều lớp trừu tượng tồn tại chỉ để giúp con người quản lý độ phức tạp, và một số sẽ không còn cần thiết; đây là nhận định của Cloudflare.

Bài học cho SWE

• Viết lại một hệ có bề mặt API lớn khả thi hơn khi có test suite của bản gốc làm đặc tả; test là thứ biến "AI viết code" thành "AI viết code đã kiểm chứng".
• Build tĩnh theo traffic thật (luật lũy thừa) thay vì theo danh sách đầy đủ: chi phí build theo phần được dùng, không theo tổng số trang.
• Bọc output của một hệ đóng (adapter, dịch ngược) mong manh hơn cài lại interface công khai của nó.

Liên quan

• Coding agent trong engineering (migrate, viết lại, chạy song song, quyền hạn)
• Railway 2026 · Inngest 2026 (hai đội khác cũng rời Next.js năm 2026) · Yelp 2026 · Allegro 2026 (coding agent theo quy trình có cổng kiểm)
• Kiến trúc frontend