← Vibe coding với Next.js

Bài 6 · Vận dụng · 22 phút

Thêm tính năng & sửa khi hỏng

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

Lặp để sản phẩm lớn dần: yêu cầu thay đổi, đọc lướt diff để biết AI đổi gì, và khi AI làm hỏng thì khôi phục (rewind/checkpoint), gỡ lỗi bằng cách mô tả triệu chứng cho AI. Khi nào nên dừng và mô tả lại từ đầu thay vì chữa tiếp.

Đã có khung web bán hàng và một chỗ cất an toàn trên GitHub, giờ mèo con thêm tính năng - từng chút một. Mỗi tính năng là một vòng lặp vibe quen thuộc, và sau mỗi bước chạy ổn thì commit một mốc. Bước nhỏ, lưu thường, là cách đi xa mà không sợ ngã đau.

Bài này lo hai việc đi cùng nhau: thêm cái mới, và xử lý khi AI làm hỏng - vì vibe coding thì hỏng là chuyện thường, quan trọng là gỡ gọn.

Sau khi Claude sửa, nó cho mèo con xem diff - bản so sánh trước/sau: dòng thêm có dấu +, dòng bớt có dấu -.

diff minh hoạ: thêm một nút vào trang sản phẩm (không cần đọc từng dòng)

  app/san-pham/page.tsx
    <p>{ten}</p>
    <p>{gia}đ</p>
+   <button>Thêm vào giỏ</button>

Mèo con không cần hiểu từng dòng. Chỉ nhìn lướt: nó đụng đúng file mình nhờ chưa, và quy mô thay đổi có hợp lý không. Nhờ đổi một nút mà nó sửa cả chục file lạ thì nên hỏi lại trước khi đồng ý.

  • diff cho thấy AI đổi gì: dòng + là thêm, dòng - là bớt.
  • Nhìn lướt tên file và quy mô, không cần đọc từng dòng.
  • Đụng nhiều file lạ ngoài dự tính là dấu hiệu nên hỏi lại.

Sản phẩm hỏng là sẽ có. Cách gỡ nhanh nhất không phải nói "sửa đi" mà là mô tả triệu chứng: kể chính xác cái mèo con THẤY. Bấm nút nào? Màn hình hiện gì? Có dòng chữ đỏ nào? Dán luôn cả thông báo lỗi cho Claude.

hai cách báo lỗi cho Claude - cái dưới giúp nó tìm ra gấp nhiều lần

Mơ hồ:   "trang sản phẩm không chạy, sửa đi"

Cụ thể:  "Bấm 'Thêm vào giỏ' thì trang trắng xoá.
          Console hiện: TypeError: cart is undefined"

Triệu chứng càng cụ thể, Claude càng khoanh đúng chỗ. Mèo con đang đóng vai người báo bệnh: kể rõ đau ở đâu thì bác sĩ chẩn nhanh.

Nếu mô tả triệu chứng vài lần mà vẫn chưa xong, đừng cố vá thêm - hãy quay lui. Có ba nấc, chọn nấc nhẹ nhất đủ cứu:

nhẹnặng1Rewind trong phiênhoàn tác bước gần nhất - mất ít nhất2Quay về commit gần nhấtvề mốc đã lưu trên GitHub3Mô tả lại từ đầubỏ hướng cũ, làm lại sạch - mất nhiều nhất
Ba nấc quay lui, từ nhẹ tới nặng: rewind trong phiên → quay về commit → mô tả lại từ đầu.

Đây chính là lúc thói quen commit thường xuyên ở bài trước trả công: có nhiều mốc tốt thì luôn có chỗ để lùi về mà không mất bao nhiêu.

Trung thực

Tên và cách gọi tính năng rewind/checkpoint của Claude Code có thể đổi theo phiên bản. Nguyên tắc thì bền: luôn có đường lùi. Khi không chắc, gõ /help trong Claude Code hoặc xem tài liệu của Anthropic để biết cách lùi hiện tại.

Có một cái bẫy: càng sửa càng rối. Dấu hiệu nhận ra: mèo con sửa hai ba lần mà mỗi lần lại hỏng một chỗ khác, hoặc Claude cứ đổi tới đổi lui quanh cùng một lỗi. Lúc đó tiếp tục chữa thường chỉ đào sâu cái hố.

Cách thoát: quay về mốc tốt gần nhất, rồi mô tả lại yêu cầu cho rõ hơn - tách nhỏ hơn, nói rõ kết quả mong muốn. Làm lại từ nền sạch gần như luôn nhanh hơn cố gỡ một mớ rối.

  • Sửa vài lần vẫn loanh quanh = tín hiệu nên dừng chữa.
  • Quay về mốc tốt rồi mô tả lại rõ hơn, tách nhỏ yêu cầu.
  • Làm lại từ nền sạch thường nhanh hơn vá một mớ rối.

Gom lại bốn thói quen: bước nhỏ, commit thường, đọc lướt diff, và quay lui sớm khi thấy loanh quanh. Bốn cái này giữ cho mèo con vibe nhanh mà không sợ làm hỏng không cứu được.

Bước tiếp theo

Tới giờ sản phẩm vẫn chưa nhớ được gì - tải lại trang là sạch. Bài kế ta cho nó một bộ nhớ lâu dài: Lưu dữ liệu với PostgreSQL.

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

diff là bản so sánh trước/sau khi sửa code: dòng được thêm có dấu +, dòng bị bớt có dấu -. Sau khi Claude sửa, nó cho bạn xem diff để biết chính xác nó đã đổi gì, ở file nào.

Bạn không cần hiểu từng dòng. Chỉ nhìn lướt hai thứ: nó đụng vào ĐÚNG file mình nhờ không, và quy mô thay đổi có hợp lý không. Nếu mèo con nhờ đổi nút mà nó sửa cả chục file lạ, đó là dấu hiệu nên hỏi lại trước khi đồng ý.

Là kể chính xác cái bạn THẤY khi lỗi xảy ra: bấm nút nào, màn hình hiện gì, có dòng chữ đỏ nào. Dán luôn cả thông báo lỗi cho Claude. "Bấm Mua thì trang trắng, hiện chữ Error: undefined" giúp nó tìm ra gấp nhiều lần so với "không chạy".

rewind hoàn tác ngay trong phiên Claude Code, nhanh, hợp cho thay đổi vừa làm. Quay về commit là trở lại một mốc đã lưu trên GitHub - chắc chắn hơn, hợp khi hỏng nặng hoặc đã qua nhiều bước. Cứ chọn cách nhẹ nhất mà đủ cứu.

Đừng đào sâu thêm. Khi sửa hai ba lần mà cứ loanh quanh, mỗi lần lại hỏng chỗ khác, hãy quay về mốc tốt gần nhất rồi mô tả lại rõ hơn từ đầu. Làm lại từ nền sạch thường nhanh hơn cố vá một mớ rối.

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

Khi báo lỗi cho Claude, cách nào hiệu quả nhất?

Bài tập về nhà

  1. 1

    Thêm một tính năng nhỏ

    Nhờ Claude thêm nút "Thêm vào giỏ" ở trang sản phẩm của web bán hàng.

    ✅ Hoàn thành khi: Mở localhost thấy nút mới ở mỗi sản phẩm - một vòng thêm tính năng đã xong.

  2. 2

    Đọc lướt diff

    Sau khi Claude sửa, xem diff nó đưa ra; ghi lại nó đụng vào file nào và đại ý thêm/bớt gì.

    ✅ Hoàn thành khi: Bạn nêu được tên file bị đổi và mô tả một câu thay đổi, xác nhận đúng chỗ mình nhờ.

  3. 3

    Commit một mốc

    Nhờ Claude commit và push thay đổi vừa rồi lên GitHub.

    ✅ Hoàn thành khi: Tab Commits trên GitHub có thêm một mốc mới - điểm quay lui vừa được tạo.

  4. 4

    Gỡ lỗi bằng triệu chứng

    Gặp (hoặc tạo) một lỗi nhỏ, rồi mô tả TRIỆU CHỨNG cụ thể cho Claude để nó sửa - dán cả thông báo lỗi nếu có.

    ✅ Hoàn thành khi: Ghi lại câu mô tả triệu chứng của bạn và xác nhận lỗi đã hết sau khi Claude sửa.

  5. 5

    Tập quay lui

    Dùng rewind (hoặc quay về commit gần nhất) để bỏ một thay đổi vừa làm.

    ✅ Hoàn thành khi: Trang trở lại trạng thái trước khi thay đổi - mèo con đã dùng được tấm lưới an toàn.

  6. 6

    Biết khi nào dừng

    Nhớ lại một lần sửa cứ loanh quanh không xong, viết một câu vì sao lúc đó nên quay lui thay vì chữa tiếp.

    ✅ Hoàn thành khi: Câu của bạn nêu được dấu hiệu (sửa nhiều lần vẫn hỏng chỗ khác) và lựa chọn đúng: quay về mốc tốt rồi mô tả lại.