Deploy Web NextJS Lên Vercel Miễn Phí: Hướng Dẫn 3 Bước
Rất nhiều bạn đã tự tạo được một ứng dụng web NextJS bằng Claude Code, nhưng sản phẩm vẫn chỉ chạy trên máy tính cá nhân. Muốn gửi cho khách hàng xem thử, muốn sếp duyệt, hay đơn giản là muốn có một đường link để chia sẻ thì lại bí. Trong bài này mình sẽ hướng dẫn các bạn cách deploy web NextJS lên Vercel miễn phí chỉ với 3 bước, dùng chính Claude Code để đẩy mã nguồn lên GitHub.
Toàn bộ quy trình này mình làm hoàn toàn trên máy tính, không cần thuê server, không cần biết DevOps, và không tốn chi phí hạ tầng nào cho giai đoạn thử nghiệm.
Vì sao nên chọn Vercel để triển khai ứng dụng NextJS
Trước khi đi vào các bước cụ thể, mình muốn các bạn hiểu lý do chọn Vercel thay vì một nền tảng khác. Vercel là công ty phát triển ra chính NextJS, nên việc triển khai gần như không cần cấu hình gì. Bạn kết nối kho mã nguồn, bấm deploy, và Vercel tự nhận diện framework, tự cài thư viện, tự build.
- Không cần cấu hình phức tạp: Vercel tự phát hiện dự án NextJS và chạy đúng lệnh build.
- Tự động cập nhật: mỗi lần bạn push mã nguồn mới lên GitHub, Vercel tự build lại và cập nhật website.
- Có HTTPS sẵn: chứng chỉ bảo mật được cấp tự động, không phải thao tác gì thêm.
- Tốc độ tốt: nội dung được phân phối qua mạng lưới máy chủ toàn cầu.
Chuẩn bị trước khi bắt đầu
Các bạn cần chuẩn bị sẵn ba thứ sau. Cả ba đều miễn phí và mất khoảng 5 phút để đăng ký.
- Một dự án NextJS đã chạy được trên máy, tạo bằng Claude Code hoặc tự viết đều được.
- Tài khoản GitHub miễn phí, dùng để lưu trữ mã nguồn.
- Tài khoản Vercel miễn phí, nên đăng ký bằng chính tài khoản GitHub để hai bên tự kết nối với nhau.
Bước 1: Đẩy mã nguồn lên GitHub
Đây là bước khiến nhiều bạn không chuyên về lập trình thấy ngại nhất, vì phải làm việc với Git. Nhưng nếu các bạn đang dùng Claude Code thì phần này nhẹ nhàng hơn nhiều, bạn chỉ cần mô tả bằng lời và để công cụ thực hiện các lệnh giúp mình.
Trình tự cơ bản như sau. Đầu tiên các bạn tạo một repository mới trên GitHub, đặt tên trùng với tên dự án cho dễ quản lý. Nếu đây là sản phẩm thử nghiệm hoặc có chứa thông tin nhạy cảm, hãy để ở chế độ private.
Tiếp theo, tại thư mục dự án trên máy, các bạn khởi tạo Git, tạo commit đầu tiên, kết nối với repository vừa tạo rồi đẩy mã nguồn lên. Claude Code có thể chạy toàn bộ chuỗi thao tác này giúp bạn.
Có một điểm rất quan trọng mà mình muốn nhấn mạnh. Trước khi push, các bạn phải kiểm tra file cấu hình loại trừ để chắc chắn rằng thư mục thư viện và các file chứa biến môi trường không bị đẩy lên. Đây là lỗi phổ biến khiến khóa API bị lộ công khai. Dự án NextJS tạo mới thường đã có sẵn cấu hình này, nhưng bạn vẫn nên tự kiểm tra một lần cho chắc.
Sau khi hoàn tất, các bạn tải lại trang GitHub và thấy toàn bộ mã nguồn đã nằm trên đó là bước một đã xong.
Bước 2: Triển khai ứng dụng trên Vercel
Bước này nhanh và gần như không có gì để sai. Các bạn đăng nhập Vercel, chọn tạo dự án mới, cho phép Vercel truy cập vào tài khoản GitHub, rồi chọn đúng repository vừa đẩy lên ở bước một.
Vercel sẽ tự nhận diện đây là dự án NextJS và điền sẵn các thiết lập build. Trong đa số trường hợp các bạn không cần sửa gì cả, chỉ bấm Deploy và chờ vài phút.
Nếu dự án của bạn có sử dụng khóa API hoặc chuỗi kết nối cơ sở dữ liệu, hãy khai báo chúng trong phần biến môi trường của Vercel trước khi deploy. Đây là nguyên nhân phổ biến nhất khiến ứng dụng chạy tốt trên máy nhưng lỗi khi lên mạng.
Khi quá trình build hoàn tất, Vercel cấp cho bạn một đường link dạng tenduan.vercel.app. Đây đã là một website chạy thật trên Internet, ai có link đều truy cập được. Từ thời điểm này trở đi, mỗi lần bạn push mã nguồn mới lên GitHub, Vercel sẽ tự động build và cập nhật website mà bạn không cần làm thêm thao tác nào.
Bước 3: Trỏ tên miền riêng về ứng dụng
Đường link mặc định của Vercel dùng để thử nghiệm thì rất ổn, nhưng nếu muốn gửi cho khách hàng hoặc dùng cho một chiến dịch thật, các bạn nên gắn tên miền riêng.
Cách làm là vào phần cài đặt tên miền của dự án trên Vercel, thêm tên miền của bạn vào, sau đó Vercel sẽ hiển thị các bản ghi DNS cần khai báo. Bạn mang các bản ghi đó về khai báo tại nơi đang quản lý tên miền. Sau khi DNS cập nhật xong, thường trong vòng vài phút đến vài giờ, website sẽ chạy trên tên miền riêng và được cấp chứng chỉ bảo mật tự động.
Nói rõ về chữ miễn phí
Mình muốn nói thẳng phần này để các bạn không bị hụt hẫng khi bắt tay vào làm.
- Phần hosting là miễn phí thật. Gói Hobby của Vercel không yêu cầu thẻ tín dụng và bạn dùng được lâu dài với subdomain vercel.app.
- Tên miền riêng thì không miễn phí. Bạn vẫn phải mua tên miền, thường khoảng 10 đô một năm. Việc trỏ tên miền về Vercel là miễn phí, nhưng bản thân tên miền thì không.
- Gói miễn phí giới hạn cho mục đích cá nhân. Theo điều khoản của Vercel, gói Hobby dành cho dự án cá nhân và phi thương mại. Khi website tạo ra doanh thu hoặc phục vụ khách hàng trả tiền, bạn cần nâng lên gói trả phí. Với mục đích học tập, làm sản phẩm thử nghiệm hoặc dựng bản demo thì gói miễn phí hoàn toàn đủ dùng.
Cách áp dụng vào công việc kinh doanh
Nhìn qua thì đây có vẻ là một bài kỹ thuật thuần túy, nhưng giá trị thực tế nằm ở tốc độ thử nghiệm. Với các bạn làm Marketing, Sales hay E-commerce, quy trình ba bước này cho phép dựng một landing page hoặc một công cụ nhỏ để kiểm chứng ý tưởng ngay trong ngày, với chi phí hạ tầng bằng không.
Trước đây để có một trang thử nghiệm, doanh nghiệp thường phải chờ đội kỹ thuật xếp lịch, chờ cấp server, chờ cấu hình. Bây giờ một người có thể tự làm trong vài giờ. Khi ý tưởng không hiệu quả thì bỏ đi, chi phí thiệt hại gần như không đáng kể. Khi ý tưởng chạy tốt thì nâng cấp hạ tầng sau cũng chưa muộn.
Đây chính là tinh thần của bước Thử nghiệm trong framework 4 bước AI hoá doanh nghiệp mà mình vẫn chia sẻ. Triển khai một phiên bản nhỏ, đo lường kết quả thật, rồi mới quyết định có mở rộng hay không.
Những lỗi thường gặp khi deploy lần đầu
- Build lỗi vì thiếu biến môi trường. Ứng dụng chạy tốt trên máy nhưng lỗi trên Vercel, nguyên nhân hầu hết là do chưa khai báo biến môi trường trên nền tảng.
- Đẩy nhầm file nhạy cảm lên GitHub. Kiểm tra kỹ file cấu hình loại trừ trước khi push lần đầu.
- Tên miền chưa chạy ngay. DNS cần thời gian cập nhật, các bạn kiên nhẫn chờ thay vì sửa đi sửa lại bản ghi.
- Đẩy nhầm nhánh mã nguồn. Kiểm tra xem Vercel đang theo dõi đúng nhánh mà bạn làm việc hay không.
Video hướng dẫn chi tiết
Toàn bộ ba bước trên mình đã quay lại thành video hướng dẫn đầy đủ, có thao tác thực tế trên màn hình để các bạn vừa xem vừa làm theo trên máy tính của mình.
Kết luận
Khoảng cách từ một dự án nằm trên máy tính đến một website chạy thật trên Internet ngắn hơn nhiều so với các bạn nghĩ. Đẩy mã nguồn lên GitHub, kết nối Vercel và deploy, sau đó trỏ tên miền. Ba bước, không tốn chi phí hạ tầng, và làm được ngay trong buổi chiều.
Nếu các bạn muốn mình hướng dẫn triển khai trên những nền tảng phổ biến khác như Amazon Web Services, Google Cloud hay các dịch vụ hosting truyền thống, hãy để lại bình luận bên dưới video. Nền tảng nào được nhiều bạn quan tâm nhất mình sẽ làm trước.
Còn nếu doanh nghiệp của bạn đang cần một giải pháp AI Automation triển khai bài bản và đo lường được, các bạn có thể liên hệ với mình để trao đổi cụ thể hơn.