← Vibe coding với Next.js

Bài 1 · Cơ bản · 18 phút

Vibe coding là gì & ai làm được

Biên soạn bởi Nguyễn Anh Tuấn

"Vibe coding" (thuật ngữ Andrej Karpathy nêu đầu 2025) và làn sóng dùng AI agent để xây sản phẩm mà không cần là lập trình viên: làm được gì một mình và đâu là giới hạn. Định hướng cả khoá: dựng bằng Next.js + PostgreSQL rồi TỰ CHỦ deploy lên VPS riêng kèm tên miền riêng (không phụ thuộc nền tảng nào). Ghi công Anthropic, cài Claude Code và mở phiên đầu tiên.

Hình dung mèo con muốn có một căn nhà. Trước đây, không biết xây thì chỉ có hai cửa: tự học cầm bay trộn vữa (học code), hoặc thuê hẳn một đội thợ (thuê lập trình viên). Giờ có cửa thứ ba: một người thợ AI cực giỏi, bạn chỉ cần mô tả "tôi muốn nhà hai phòng, hướng nam, có cửa sổ lớn" - và nó dựng, bạn xem rồi chỉnh.

Với phần mềm, "người thợ AI" đó là một AI coding agent như Claude Code. Bạn không gõ từng dòng code; bạn nói thứ mình muốn bằng ngôn ngữ thường, nó viết và chạy giúp. Đây chính là điều khiến cả người không phải lập trình viên - founder, product owner, người vận hành - giờ có thể tự biến ý tưởng thành một sản phẩm chạy được.

  • Cách làm phần mềm vừa đổi: từ "gõ từng dòng" sang "mô tả cho AI dựng".
  • Người không code giờ tự xây được sản phẩm - nếu biết mô tả rõ và kiểm chứng.
  • Khoá này dạy đúng kỹ năng đó: nghĩ, mô tả, và làm chủ sản phẩm của mình.

Cái tên cho làn sóng này là "vibe coding". Ngày 2 tháng 2 năm 2025, Andrej Karpathy (một nhà nghiên cứu AI có tiếng) viết một dòng ngắn trên mạng xã hội, đại ý: "cứ thuận theo cảm hứng, và quên đi rằng code có tồn tại". Câu nói lan như cháy rừng; cuối năm 2025, từ điển Collins còn chọn "vibe coding" là từ của năm.

Trung thực

Nghĩa gốc của Karpathy mang tính vui và hơi cực đoan - "quên code đi, phó mặc cho AI". Cách đó ổn khi nghịch cho biết hoặc làm bản nháp. Nhưng làm sản phẩm có người dùng thì phó mặc là nguy hiểm. Khoá này mượn năng lượng "mô tả là chính" của vibe coding, nhưng giữ kỷ luật của Mèo: luôn kiểm chứng.

Công cụ ta dùng suốt khoá là Claude Code - một AI coding agent của công ty Anthropic. Nó ra mắt dạng thử nghiệm (research preview) đầu năm 2025 và phát hành chính thức (bản 1.0) vào tháng 5 năm 2025. Khác với việc hỏi một chatbot rồi tự chép code, Claude Code hành động thẳng trong dự án: tự đọc, sửa file, chạy lệnh, kiểm tra kết quả - nhưng vẫn xin phép bạn trước những việc quan trọng.

  • "Vibe coding": thuật ngữ Andrej Karpathy nêu đầu 2025, mô tả việc xây phần mềm bằng cách mô tả cho AI.
  • Claude Code là AI coding agent của Anthropic (ra mắt 2025) - công cụ chính của khoá.
  • Agent khác chatbot: nó tự đọc/sửa/chạy trong dự án, không chỉ trả lời bằng chữ.

Bạn không cần là lập trình viên để bắt đầu. Thứ bạn cần là khả năng nghĩ rõ ràng và mô tả cụ thể - vốn là nghề của người làm sản phẩm. Với AI làm trợ thủ, một mình bạn có thể dựng được kha khá:

  • Web giới thiệu, landing page cho sản phẩm/dịch vụ.
  • Công cụ nội bộ cho team: form thu thông tin, bảng quản lý, dashboard nhỏ.
  • MVP - bản đầu tiên của một ý tưởng để đem cho người dùng thử.
  • Tự động hoá việc lặp: nối dữ liệu, soạn báo cáo định kỳ.

Trung thực

AI không phải đũa thần. Với hệ thống lớn, nhiều người dùng, hoặc đụng tới tiền và dữ liệu nhạy cảm, vẫn có lúc bạn cần tới một kỹ sư chuyên nghiệp. Khoá sẽ chỉ rõ dấu hiệu đó ở bài cuối - nói thẳng còn hơn để bạn ngã ở chỗ đáng lẽ tránh được.

Dựng xong sản phẩm thì phải đưa nó lên mạng cho người khác dùng. Có hai lối. Lối "quản lý hộ" (các dịch vụ SaaS/PaaS): bạn đẩy sản phẩm lên, họ lo máy chủ - nhanh và nhàn. Lối tự chủ: bạn thuê một VPS (máy chủ ảo riêng) và tự đặt sản phẩm lên đó.

🏢 Quản lý hộ(SaaS / PaaS)Nhanh, không lo máy chủĐắt dần khi đông ngườiPhụ thuộc nhà cung cấp🔑 Tự chủ(VPS riêng)Làm chủ hạ tầngRẻ hơn khi đông ngườiMang đi được, không khoáBạn lo vận hànhKhoá chọn
Quản lý hộ tiện lúc đầu; tự chủ trên VPS riêng làm chủ hạ tầng và rẻ hơn khi đông người - khoá này chọn tự chủ.

Quản lý hộ rất tiện lúc khởi đầu, không thể phủ nhận. Nhưng khi sản phẩm đông người dùng, hoá đơn tăng nhanh và bạn bị khoá vào nhà cung cấp đó - muốn đi cũng khó. Khoá này chọn tự chủ trên VPS riêng: rẻ hơn hẳn khi lớn, làm chủ trọn hạ tầng, và mang sản phẩm đi đâu cũng được. Đổi lại bạn nhận phần vận hành - nhưng đừng lo, ta sẽ tự động hoá gần hết bằng một lệnh cài đặt duy nhất.

  • Stack cả khoá: dựng bằng Next.js, lưu dữ liệu PostgreSQL, rồi deploy lên VPS riêng + tên miền riêng.
  • Tự chủ = làm chủ hạ tầng, rẻ khi đông người, không bị khoá nhà cung cấp.
  • Phần vận hành VPS sẽ được tự động hoá bằng script - người không-code vẫn theo được.

Trước khi cài, mèo con cần một tài khoản Claude và một gói trả phí - đây là điều kiện bắt buộc để theo khoá, vì vibe coding ngốn nhiều lượt gọi AI. Vào claude.ai đăng ký, rồi chọn một trong hai gói:

  • Claude Pro - 20$/tháng: đủ để bắt đầu và đi phần lớn khoá.
  • Claude Max 5x - 100$/tháng: gấp khoảng 5 lần hạn mức Pro, thoải mái khi vibe nhiều hoặc dựng các tính năng nặng cuối khoá.
  • Claude Code dùng CHUNG hạn mức của gói (không có gói Claude Code riêng); hết hạn mức thì chờ cửa sổ mới.

Bắt buộc

Phải có Claude Pro (20$) hoặc Max 5x (100$) mới theo được khoá này. Người mới nên bắt đầu bằng Pro cho nhẹ ví; nếu hay chạm hạn mức (màn hình báo hết lượt, phải chờ) thì nâng lên Max 5x. Tổng chi phí cả khoá sẽ được bóc tách ở bài "Trung thực: chi phí & khi nào cần thuê người".

Có tài khoản và gói rồi thì cài Claude Code. Cách khuyến nghị là trình cài đặt gốc - chỉ một dòng lệnh, tự cập nhật về sau. Mở Terminal (trên Windows dùng PowerShell) và chạy:

cài đặt Claude Code & kiểm tra (chạy trong Terminal/PowerShell)

# macOS / Linux / WSL
curl -fsSL https://claude.ai/install.sh | bash

# Windows (PowerShell)
irm https://claude.ai/install.ps1 | iex

# Kiem tra cai dat
claude --version

Lần đầu chạy, Claude Code sẽ yêu cầu đăng nhập bằng chính tài khoản Claude (gói Pro/Max) mèo con vừa mua. Sau đó, vào thư mục dự án và gõ claude để mở một phiên:

mở phiên đầu tiên trong một thư mục

mkdir san-pham-dau-tien
cd san-pham-dau-tien
claude

Khoá kỹ thuật nếu muốn đào sâu

Bài này cố tình gọn để bạn bắt đầu nhanh. Nếu muốn hiểu sâu Claude Code (chế độ quyền, công cụ, cách hoạt động bên trong), có hẳn một khoá riêng: Lập trình với Claude Code. Khoá này thì tập trung vào việc dựng và ship sản phẩm.

Trước khi qua bài sau, ghi nhớ hai chân của khoá này. Chân thứ nhất: kết quả AI cho ra tốt tới đâu tuỳ bạn mô tả rõ tới đâu. Chân thứ hai: bạn là người chịu trách nhiệm cuối, nên luôn xem lại và kiểm chứng - đừng nhắm mắt bấm ship. Vibe coding cho bạn tốc độ; kỷ luật kiểm chứng giữ cho sản phẩm không sụp.

Bước tiếp theo

Vậy "mô tả rõ" là mô tả thế nào cho AI hiểu đúng ý? Đó là kỹ năng quan trọng nhất của cả khoá - và là nội dung bài kế: Nghĩ như người làm sản phẩm.

Câu hỏi thường gặp

Nghĩa gốc Karpathy nêu vui đúng là vậy - "quên là code có tồn tại" - hợp khi làm thử cho vui, làm prototype. Nhưng khi sản phẩm có người dùng, có giao dịch tiền và dữ liệu cá nhân thì phó mặc là nguy hiểm. Khoá này mượn NĂNG LƯỢNG của vibe coding (mô tả là chính, AI gõ hộ) nhưng giữ kỷ luật của Mèo: luôn kiểm chứng. Mô tả thoải mái, nhưng đừng nhắm mắt bấm ship.

Được. Bạn không cần biết gõ code; thứ bạn cần là biết NGHĨ và MÔ TẢ rõ thứ mình muốn - kỹ năng của người làm sản phẩm, không phải của thợ code. Khoá cầm tay từ ý tưởng tới lúc sản phẩm chạy trên tên miền riêng của bạn. Các đoạn kỹ thuật (VPS, database) đều có script và hướng dẫn từng bước.

Dịch vụ "quản lý hộ" (SaaS/PaaS) rất tiện - bấm vài cái là chạy. Nhưng cái giá là tiền tăng nhanh khi đông người dùng, và bạn bị phụ thuộc/khoá vào nhà cung cấp đó. Tự chủ trên VPS riêng thì bạn làm chủ hạ tầng, rẻ hơn hẳn khi sản phẩm lớn, và mang đi đâu cũng được. Khoá đặt cược vào sự tự chủ - và nhờ AI + script tự động, người không-code vẫn làm được.

Có, và có một khoản BẮT BUỘC: gói Claude trả phí - Pro 20$/tháng (đủ để bắt đầu) hoặc Max 5x 100$/tháng (nhiều hạn mức hơn, hợp khi vibe nhiều). Claude Code dùng chung hạn mức của gói này. Ngoài ra một VPS phổ thông và một tên miền tốn phí khiêm tốn hàng tháng/năm. Bài "Trung thực: chi phí & khi nào cần thuê người" sẽ bóc tách từng khoản chi phí để bạn không bị bất ngờ.

Không, và đó không phải mục tiêu. Nó biến bạn thành người LÀM SẢN PHẨM tự chủ: tự dựng, tự deploy, tự làm chủ hạ tầng với AI làm trợ thủ. Có những lúc nên thuê một kỹ sư chuyên nghiệp - khoá sẽ chỉ rõ dấu hiệu đó ở bài cuối thay vì giả vờ AI lo được tất.

Có thể. Claude Code phát triển rất nhanh nên tên lệnh/giao diện đôi khi đổi. Cách nghĩ trong khoá thì bền; còn lệnh cụ thể, hãy đối chiếu bằng tài liệu chính thức của Anthropic và lệnh /help ngay trong Claude Code.

Tick những điều em tự tin làm được. Càng lên cao, em càng hiểu sâu.

Tick những điều em tự tin làm được sau khi học bài này. 0/6

Trả lời vài câu để chắc rằng em đã nắm bài.

Câu 1/3 Điểm: 0

Ai là người nêu ra thuật ngữ "vibe coding"?

Bài tập về nhà

  1. 1

    Đăng ký, mua gói & cài đặt

    Đăng ký tài khoản tại claude.ai, mua gói Pro (20$) hoặc Max 5x (100$), rồi cài Claude Code và chạy claude --version.

    ✅ Hoàn thành khi: Có gói Pro/Max đang hoạt động và lệnh claude --version in ra một số phiên bản (không báo "command not found"). Chụp/lưu lại kết quả.

  2. 2

    Mở phiên đầu tiên

    Tạo thư mục mới (vd shop-cua-toi), mở Claude Code trong đó và chào nó một câu.

    ✅ Hoàn thành khi: Claude trả lời ngay trong phiên - bạn đã mở được một phiên làm việc với nó.

  3. 3

    Nhờ AI tạo file đầu tiên

    Mô tả cho Claude: tạo file index.html hiển thị dòng "Xin chào, tôi là <tên mèo con>".

    ✅ Hoàn thành khi: File index.html xuất hiện trong thư mục; mở bằng trình duyệt thấy đúng dòng chào.

  4. 4

    Một vòng mô tả → sửa → xem

    Mô tả cho Claude đổi màu nền trang vừa tạo sang màu mèo con thích.

    ✅ Hoàn thành khi: Claude sửa file, mở lại trình duyệt thấy nền đổi màu - mèo con vừa đi trọn một vòng lặp vibe coding.

  5. 5

    Tập phản xạ kiểm chứng

    Nhờ Claude giải thích file index.html nó vừa tạo làm gì, rồi tự mở file đối chiếu.

    ✅ Hoàn thành khi: Bạn xác nhận lời giải thích KHỚP với nội dung file - tập thói quen kiểm chứng thay vì tin ngay.

  6. 6

    Khoe thành quả

    Chụp màn hình trang index.html đang chạy trên trình duyệt sau khi đã đổi nền.

    ✅ Hoàn thành khi: Có ảnh trang hiển thị câu chào của bạn trên nền màu mới - sản phẩm đầu tay tự tay vibe ra.