# Vinext 1.0 ra mắt: Đưa ứng dụng Next.js chạy trên nền tảng Vite

- Nguồn: Cloudflare Blog
- Thời gian phát hành: 2026-09-28 21:51 (giờ Việt Nam)
- Điểm AI: 85/100
- Link AIHOT.vn: https://aihot.vn/items/c6994a057efa43e4
- Link gốc: https://blog.cloudflare.com/vinext-nextjs-on-vite

## Tóm tắt AI

Vinext 1.0 chính thức thoát khỏi giai đoạn thử nghiệm, cho phép các nhà phát triển vận hành ứng dụng Next.js trên Vite với hiệu suất cao, hỗ trợ cache warming và quy trình kiểm thử tự động.

## Thân bài

![Next.js applications, powered by Vite: introducing Vinext 1.0](https://blog.cloudflare.com/_emdash/api/media/file/01M3AZQWQVW65CPGYDSMNZRHCT.01M3AZQXJKMQ8M8YY7SMMVGJ8X.png)

Khi chúng tôi [ra mắt Vinext](https://blog.cloudflare.com/vinext/) vào tháng 2, đó là kết quả của một thử nghiệm táo bạo kéo dài một tuần dựa trên AI để xem một kỹ sư và một lượng token có thể tiến xa đến đâu trong việc tái tạo framework Next.js được hỗ trợ bởi Vite.

Trong bảy tháng kể từ thử nghiệm đó, Vinext đã phát triển thành một framework mà khách hàng của chúng tôi tin tưởng và vận hành trong môi trường production cho các ứng dụng động, có lưu lượng truy cập cao.

Hôm nay, chúng tôi công bố phát hành Vinext 1.0, bước tiến mới nhất trong hành trình giúp việc triển khai các ứng dụng Next.js trở nên khả thi ở mọi nơi. Vinext cho phép bạn lấy bất kỳ ứng dụng Next.js nào, dù được xây dựng cho Pages Router hay App Router, và làm cho nó có tính di động để triển khai lên bất kỳ nền tảng web nào, bao gồm gói miễn phí của Cloudflare Workers, Netlify hoặc AWS Lambda.

Vinext 1.0 mang đến những cải tiến sâu rộng về khả năng tương thích, tính ổn định và cơ chế bộ nhớ đệm, đồng thời thiết lập nền tảng lâu dài cho dự án. Chưa bao giờ là thời điểm tốt hơn để chuyển đổi dự án Next.js của bạn sang Vinext; chỉ cần chạy npx vinext check và npx vinext init.

### Tiến lên phiên bản 1.0

Khi mới ra mắt, Vinext rất hứa hẹn nhưng vẫn chưa hoàn thiện. Kể từ đó, chúng tôi đã dành nhiều thời gian để cải thiện khả năng tương thích với App Router và mở rộng sang các ứng dụng Pages Router — vốn là những ứng dụng mà nhiều khách hàng của chúng tôi đã gắn bó từ lâu, với các dự án lớn rất phức tạp để di chuyển. Chúng tôi không muốn Vinext chỉ là một công cụ dành riêng cho những người sử dụng các tính năng mới nhất của App Router.

Trọng tâm của chúng tôi là áp dụng cả hai bộ định tuyến này và theo dõi sát sao khả năng tương thích trong các bài kiểm tra, hiện đã vượt mức 99% đối với hầu hết các tính năng quan trọng mà khách hàng yêu cầu.

![Our test compatibility has risen to more than 99%, excluding cache components.](https://blog.cloudflare.com/_image?href=https%3A%2F%2Fblog.cloudflare.com%2F_emdash%2Fapi%2Fmedia%2Ffile%2F01M3AZQWQD0T4TN11W4NFV4CC9.01M3AZQYNYHM04YM1R5679P2PW.png&w=715&h=515&f=webp&fit=cover&position=center)

Sự cải thiện này được thúc đẩy bởi cộng đồng xung quanh [dự án GitHub](https://github.com/cloudflare/vinext) của chúng tôi. Ngay khi Vinext ra mắt, cộng đồng đã thử nghiệm nó trên nhiều loại ứng dụng khác nhau để tìm ra những lỗ hổng. Với sự giám sát của họ, chúng tôi đã tìm thấy những thách thức không hiển nhiên ngay trong phạm vi kiểm thử. Vinext cần phải hoạt động chính xác như cách Next.js vận hành. Việc bắt chước các hàm có cùng tên là chưa đủ. Xây dựng một hàm import { revalidatePath } thay thế thì khá đơn giản; khó khăn nằm ở việc đảm bảo nó tác động chính xác đến các trang đã render, mục bộ nhớ đệm và các yêu cầu trong tương lai.

Việc truy vết các yêu cầu xuyên suốt ứng dụng để đảm bảo Vinext phản hồi đúng như mong đợi — và tái tạo không chỉ API mà còn cả hành vi của hệ thống này — cho đến nay là khía cạnh thách thức nhất.

Sau khi đã vá các lỗi và đưa ra các tính năng mới, điều quan trọng là chúng tôi không để xảy ra tình trạng thoái lui (regression), đặc biệt là nếu Next.js có thay đổi. Đó là lý do tại sao chúng tôi đã xây dựng bộ kiểm thử của riêng mình: hàng ngàn bài kiểm tra tập trung bao phủ hành vi cốt lõi của framework trên cả hai bộ định tuyến, server phát triển và production, cũng như các mục tiêu triển khai là Nodejs và Cloudflare Workers. Chúng tôi cũng chạy bộ kiểm thử end-to-end của Next.js đối với Vinext hàng đêm, giúp chúng tôi có cái nhìn liên tục về khả năng tương thích và đảm bảo chúng tôi nhận biết ngay lập tức các lỗi phát sinh từ những thay đổi đã hợp nhất. Bên cạnh việc kiểm thử tự động, chúng tôi đã làm việc trực tiếp với các khách hàng lớn đang sử dụng Vinext trong môi trường production để đảm bảo họ không gặp phải vấn đề gì.

### Có gì trong phiên bản 1.0

Thông điệp rõ ràng nhất mà chúng tôi nhận được từ khách hàng sử dụng Vinext là một số tính năng của Next.js đóng vai trò chủ chốt, và Vinext thực sự không cần phải làm mọi thứ mà Next.js đã ra mắt trong các phiên bản gần đây để trở nên hữu ích với họ. Vì vậy, chúng tôi tập trung vào việc hỗ trợ tốt hơn ở những nơi bạn cần:

- App Router, Pages Router và các ứng dụng Hybrid: Chúng tôi nhận thấy từ khách hàng rằng Pages Router vẫn rất quan trọng và việc di chuyển không phải là một quá trình một bước. Do đó, Vinext hỗ trợ cả hai đường dẫn định tuyến, bao gồm React Server Components, Server Actions, API routes, route handlers, middleware và điều hướng phía client.
- Vòng đời trang hoàn chỉnh: Các trang có thể được render theo nhiều cách khác nhau: trên server, render trước trong quá trình build, xuất dưới dạng tài sản tĩnh hoặc lưu vào bộ nhớ đệm với Incremental Static Regeneration (ISR) ở cấp độ trang. Chúng tôi đã đảm bảo rằng việc revalidation trong nền và theo yêu cầu hoạt động với mọi đầu ra.
- Bộ nhớ đệm (Caching): Vinext có một bộ các hàm bộ nhớ đệm dùng chung cho cả App Router và Pages Router cũng như các runtime được hỗ trợ. Chúng tôi có thêm hỗ trợ cho việc sử dụng [Workers Cache](https://developers.cloudflare.com/workers/cache) của Cloudflare.
- Khả năng quan sát (Observability): Vinext cung cấp tính năng truy vết tương thích với Next.js trên cả hai bộ định tuyến, vì vậy các thiết lập OpenTelemetry và Sentry hiện có vẫn tiếp tục hoạt động. Trên Cloudflare Workers, các vết (traces) cũng tích hợp với tính năng quan sát gốc của Workers.
- Khả năng tương thích với hệ sinh thái Next.js: Vinext triển khai bề mặt next/* công khai và hỗ trợ các mô hình Next phổ biến để sử dụng xác thực, MDX, tối ưu hóa hình ảnh, phông chữ, metadata, biến môi trường và hơn thế nữa.
- Hỗ trợ runtime hạng nhất cho Workers: Mặc dù Vinext có thể chạy ở bất cứ đâu, mã server có thể chạy trong runtime Cloudflare workerd trong quá trình phát triển và production, với quyền truy cập trực tiếp vào các liên kết (bindings) như tối ưu hóa hình ảnh và hyperdrive.

Chúng tôi cũng đã biến việc di chuyển thành một phần của framework: chỉ cần hai lệnh để xác minh rằng bản cài đặt Next.js và bất kỳ sửa đổi nào bạn đã thực hiện đều tương thích, đồng thời thiết lập cấu hình Vite và triển khai trong khi vẫn giữ nguyên cấu trúc dự án Next.js cũ của bạn.

Khi chúng tôi trao đổi với các đội ngũ về những tính năng quan trọng đối với họ, có một điều nổi bật. Next.js 16 đưa ra quan điểm rằng Cache Components là một phần quan trọng trong tương lai của framework, tuy nhiên hầu hết các đội ngũ mà chúng tôi nói chuyện đều không sử dụng chúng và không coi đó là điều kiện tiên quyết để chuyển đổi. Do đó, Vinext hiện có hỗ trợ hạn chế cho chỉ thị “use cache” vốn điều khiển Cache Components, và mặc dù chúng tôi sẽ tiếp tục cải thiện khả năng tương thích ở đó, chúng tôi tập trung nhiều hơn vào các ưu tiên cốt lõi nêu trên.

### Render trước và làm ấm bộ nhớ đệm (Cache warming)

Khi chúng tôi công bố Vinext lần đầu, nó hỗ trợ Incremental Static Regeneration (ISR) sau yêu cầu đầu tiên, nhưng chưa render các trang trong quá trình build. Các ứng dụng sử dụng generateStaticParams và getStaticPaths để xác định các trang cần được render khi build, và họ mong đợi ISR cấp độ trang sẽ kết nối các phản hồi ban đầu đó với việc revalidation trong nền và theo yêu cầu.

Vinext 1.0 hỗ trợ vòng đời đó cho cả hai bộ định tuyến. Nó có thể render trước các route của App Router và Pages Router trong quá trình build, phục vụ các phản hồi đó thông qua ISR cấp độ trang và vô hiệu hóa chúng theo đường dẫn hoặc thẻ. Nó cũng hỗ trợ output: "export" khi kết quả bạn muốn là một trang web hoàn toàn tĩnh.

Nhưng điều này khiến chúng tôi đặt câu hỏi: Tại sao việc render này lại phải diễn ra trong quá trình build?

Một trang web với hàng chục hoặc hàng trăm ngàn URL có thể mất rất nhiều thời gian để render các trang ít có lưu lượng truy cập. Quá trình build không thể đánh giá được phần đuôi dài (long tail) của lưu lượng truy cập mà hầu hết các trang web gặp phải, do đó không thể tập trung tài nguyên tính toán vào số lượng nhỏ các trang quan trọng hơn. Thay vào đó, bạn lãng phí hàng giờ chờ đợi các bản build tuần tự xử lý hàng ngàn trang, rất lâu sau khi các route quan trọng nhất đã hoàn tất.

Cache warming là giải pháp của chúng tôi cho vấn đề này, chuyển việc prerendering trang từ máy build sang mạng lưới của Cloudflare. Các nhà phát triển có thể tiếp tục sử dụng các primitive của Next.js để xác định các trang cần prerender, và Vinext có thể bổ sung việc xác định các trang có lưu lượng truy cập cao để thêm vào danh sách này. Quá trình này diễn ra ở chế độ nền trước khi trang web của bạn được triển khai lên production, nhờ đó ngay khi triển khai, trang web đã sẵn sàng phản hồi nhanh chóng từ bộ nhớ đệm Cloudflare.

Trong quy trình triển khai, cơ chế này hoạt động bằng cách tải lên một phiên bản Worker mới và triển khai nó tới 0% lưu lượng truy cập production, trước khi gửi yêu cầu đến các trang cụ thể từ phiên bản đó. Điều này cho phép pipeline rendering hoạt động trước khi bất kỳ người dùng thực tế nào truy cập vào bản triển khai mới. Sau khi các bộ nhớ đệm đã được làm đầy, bản triển khai có thể được đưa vào sử dụng một cách an toàn.

### Những bước tiếp theo của chúng tôi

Nếu thử nghiệm ban đầu tạo ra "one-off slopfork", thì phần quan trọng hơn chính là cách chúng tôi duy trì quá trình tự cải thiện đó một cách vô thời hạn.

Dự án hiện đang tập trung vào việc cập nhật framework theo mọi thay đổi từ upstream. Next.js canary nhận các commit mới mỗi ngày. Mỗi buổi sáng, một tác nhân (agent) sẽ xem xét các thay đổi, lấy các diff và mở các tracking issue cho bất kỳ nội dung nào có thể ảnh hưởng đến Vinext. Mỗi đêm, ma trận tương thích được tạo lại khi chúng tôi chạy bộ test suite của Next.js trên Vinext.

Khi một trong những bài kiểm tra hoặc vấn đề này cho thấy sự thiếu hụt, các tác nhân hiện có khả năng xác định thay đổi trên cả hai codebase, xây dựng bản tái hiện (reproduction), chuyển đổi các bài kiểm tra liên quan và đề xuất bản sửa lỗi.

Quá trình đánh giá này đã giúp phát hiện các trường hợp bị bỏ sót, các hành vi caching không an toàn và sự khác biệt giữa server phát triển và server production.

Tự động hóa đã giúp chúng tôi thu hẹp luồng hoạt động thành một tập hợp các thay đổi trọng tâm cần được chú ý, cho phép những người duy trì dự án chỉ tập trung vào các vấn đề cần hiểu rõ cách một quy trình nên được ánh xạ từ triển khai Next.js sang Vite.

Chúng tôi đang xây dựng một "nhà máy phần mềm" cho mã nguồn mở tại Cloudflare, và bạn có thể xem những gì chúng tôi đang thực hiện trên [GitHub](http://github.com/cloudflare/vinext).

### Trải nghiệm ngay

Vinext hiện đã khả dụng cho các ứng dụng mới và các dự án Next.js hiện có.

Bắt đầu một ứng dụng mới ngay hôm nay:

```
npm create vinext-app@latest my-app
```

Hoặc chuyển đổi một ứng dụng hiện có:

```
npx vinext check && npx vinext init
```

Sau đó triển khai lên Cloudflare Workers với tính năng cache warming của chúng tôi:

```
npx @vinext/cloudflare deploy --warm-cache
```

Truy cập [vinext.dev](http://vinext.dev/) để xem tài liệu, ví dụ và ma trận tương thích hiện tại. Vinext là mã nguồn mở tại [github.com/cloudflare/vinext](http://github.com/cloudflare/vinext). Chúng tôi hoan nghênh các báo cáo lỗi (issues), pull request, bản tái hiện ứng dụng và phản hồi từ các bạn.