Vercel là gì?

Vercel, người sáng tạo ra Next.js, là nền tảng đám mây tối ưu hóa cho Next.js, cho phép bạn triển khai ứng dụng nhanh chóng và dễ dàng với nhiều tính năng tích hợp như Serverless Functions, CDN, và tối ưu hóa hiệu suất. 

Vercel cho phép chúng ta lưu trữ các ứng dụng Next.js trực tiếp từ GitHub với tính năng triển khai tự động sau mỗi lần cập nhật, giúp việc đưa ứng dụng cục bộ hoạt động chỉ trong vài giây trở nên vô cùng dễ dàng.

Lợi ích của việc triển khai trên Vercel

Triển khai ứng dụng trên Vercel mang lại nhiều lợi ích nổi bật, đặc biệt là khi kết hợp với framework Next.js. Nhờ sự tích hợp sâu, Vercel hỗ trợ toàn diện các tính năng hiện đại như ISR (Incremental Static Regeneration), API Routes và Middleware, giúp quá trình phát triển và triển khai ứng dụng trở nên mượt mà, hiệu quả hơn.

Một điểm mạnh khác của Vercel là hệ thống CDN toàn cầu. Ứng dụng sẽ được phân phối từ các máy chủ gần với vị trí người dùng nhất, từ đó cải thiện tốc độ tải trang và mang lại trải nghiệm mượt mà cho người truy cập ở bất kỳ đâu.

Vercel cũng hỗ trợ Serverless Functions, cho phép xử lý các tác vụ backend mà không cần thiết lập hay vận hành máy chủ truyền thống. Điều này giúp lập trình viên tiết kiệm thời gian quản trị hạ tầng, đồng thời mở rộng dễ dàng theo nhu cầu sử dụng thực tế.

Cuối cùng, Vercel cung cấp quy trình CI/CD tự động. Mỗi khi mã nguồn được cập nhật, hệ thống sẽ tự động build và deploy ứng dụng, đảm bảo mọi thay đổi đều được đưa lên môi trường production một cách nhanh chóng và chính xác.

Các bước triển khai một ứng dụng Next.js lên Vercel

Chuẩn bị ứng dụng Next.js

Trước khi deploy, bạn cần đảm bảo ứng dụng Next.js của mình đã sẵn sàng. Nếu chưa có ứng dụng, bạn tham khảo bài viết trước để tạo.

Đẩy mã nguồn lên GitHub

Vercel yêu cầu mã nguồn của bạn được lưu trữ trên một nền tảng quản lý mã nguồn như GitHub, GitLab hoặc Bitbucket.

Bước 1: Tạo tài khoản GitHub

Nếu bạn chưa có tài khoản GitHub, bạn có thể truy cập trang web GitHub để tạo một tài khoản.

Bước 2: Tạo một kho lưu trữ mới

Nhập tên bất kỳ cho kho lưu trữ 

Sau đó nhấp vào nút “Create Repository”:

Sao chép toàn bộ đoạn mã bên dưới để đẩy ứng dụng lên GitHub trực tiếp từ dòng lệnh:

Bước 3: Đẩy mã nguồn lên kho lưu trữ GitHub

Chỉ cần dán lệnh bạn đã sao chép trước đó:

Sau đó nhấn Enter:

Tiếp theo bạn có thể quay lại kho lưu trữ GitHub và sẽ thấy toàn bộ mã nguồn của ứng dụng mà bạn đã đẩy lên Github:

Vậy là xong, bạn đã đẩy thành công ứng dụng Next.js của mình lên GitHub. Bây giờ là lúc triển khai nó trên Vercel.

Tạo tài khoản và kết nối Vercel

Bước 1: Truy cập trang web chính thức của Vercel

Nhấn vào nút “Start Deploying”:

Tiếp tục nhấn vào nút “Continue with Github”:

Sau khi kết nối thành công với GitHub, chọn “Import” để thêm dự án Next.js mà bạn vừa đưa lên GitHub:

Sau đó nhấn “Deploy”:

Ứng dụng của bạn sẽ được triển khai trong vòng vài giây:

Sau khi triển khai thành công, bạn sẽ thấy trang chúc mừng:

Cuối cùng, nhấn vào nút “Continue to Dashboard”, bạn sẽ thấy các tên miền mà Vercel cung cấp:

Nhấn vào tên miền, bạn sẽ thấy ứng dụng của mình:

Việc triển khai ứng dụng Next.js lên Vercel không chỉ đơn giản mà còn mang lại nhiều lợi ích về hiệu suất, tối ưu hóa và khả năng quản lý. Với các bước hướng dẫn chi tiết trong bài viết, bạn có thể triển khai dự án của mình một cách nhanh chóng, đồng thời tận dụng toàn bộ sức mạnh mà Next.js và Vercel mang lại.