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

Sau 7 tháng thử nghiệm kể từ khi ra mắt, Cloudflare đã chính thức công bố Vinext 1.0. Đây là cột mốc quan trọng trong nỗ lực giúp các ứng dụng Next.js trở nên linh hoạt hơn, cho phép nhà phát triển triển khai ứng dụng trên bất kỳ nền tảng web nào như Cloudflare Workers, Netlify hay AWS Lambda mà không bị phụ thuộc vào một hạ tầng duy nhất.

Bước tiến về độ tương thích

Vinext 1.0 tập trung mạnh mẽ vào sự ổn định và khả năng tương thích. Đội ngũ phát triển đã cải thiện đáng kể việc hỗ trợ cả App Router và Pages Router, với tỷ lệ tương thích kiểm thử đạt hơn 99%. Thay vì chỉ mô phỏng các hàm có cùng tên, Vinext tập trung tái hiện chính xác hành vi của Next.js, từ việc xử lý revalidatePath cho đến các cơ chế render phức tạp.

Để đảm bảo tính ổn định lâu dài, dự án hiện áp dụng quy trình kiểm thử nghiêm ngặt, chạy bộ test suite end-to-end của Next.js hàng đêm để phát hiện sớm các vấn đề phát sinh từ những thay đổi upstream.

Các tính năng nổi bật trong bản 1.0

• Hỗ trợ toàn diện: Tương thích với cả App Router và Pages Router, bao gồm React Server Components, Server Actions, API routes và middleware.
• Cơ chế Caching linh hoạt: Hỗ trợ bộ nhớ đệm chia sẻ giữa các router và tích hợp sâu với Cloudflare Workers Cache.
• Khả năng quan sát (Observability): Hỗ trợ tracing tương thích với Next.js, giúp các thiết lập OpenTelemetry và Sentry hiện có hoạt động trơn tru.
• Tối ưu hóa triển khai: Hỗ trợ runtime Cloudflare Workers với quyền truy cập trực tiếp vào các tính năng như tối ưu hóa hình ảnh.

Đột phá với tính năng Cache Warming

Một trong những điểm nhấn của Vinext 1.0 là Cache Warming. Thay vì ép buộc quá trình render diễn ra trong lúc build (gây lãng phí thời gian cho các ứng dụng lớn), Vinext cho phép chuyển việc render sang mạng lưới của Cloudflare. Hệ thống sẽ tự động nhận diện các trang có lưu lượng truy cập cao và làm nóng bộ nhớ đệm (warm cache) trước khi triển khai phiên bản mới, đảm bảo người dùng nhận được phản hồi tức thì ngay khi ứng dụng được đưa vào production.

Bắt đầu với Vinext

Việc chuyển đổi sang Vinext được thiết kế rất đơn giản. Đối với dự án mới, bạn có thể sử dụng lệnh npm create vinext-app@latest. Với các dự án Next.js hiện có, chỉ cần chạy npx vinext check và npx vinext init để kiểm tra tính tương thích và cấu hình Vite.

Dự án hiện là mã nguồn mở và được duy trì tích cực trên GitHub, với sự hỗ trợ từ các công cụ tự động hóa giúp đồng bộ hóa nhanh chóng với các thay đổi từ Next.js.

Nguồn tham khảo: Cloudflare Blog