Dựng app Next.js đầu tiên

Hai bài trước là chuẩn bị: cách mô tả và bản đồ sản phẩm. Giờ tới phần vui: mèo con sẽ có một khung web bán hàng chạy trên máy mình trong khoảng mười lăm phút, mà không gõ một dòng code.

Cách làm xuyên suốt bài: mèo con mô tả, Claude Code làm, mèo con xem và chỉnh. Đây là build-along - vừa đọc vừa làm theo trên máy bạn.

Mở Claude Code trong một thư mục mới, đưa nó tài liệu BA từ bài Nghĩ như người làm sản phẩm, rồi nói đại ý: "tạo cho tôi một dự án Next.js cho web bán hàng này". Claude sẽ chạy công cụ tạo khung chuẩn của Next.js:

npx create-next-app@latest shop-cua-toi
cd shop-cua-toi

Nó hỏi vài lựa chọn (TypeScript, Tailwind…) rồi tải các thư viện cần thiết. Mèo con chỉ duyệt khi Claude xin phép. Xong, trong thư mục đã có cả một dự án Next.js - cấu trúc giống cây thư mục mèo con thấy ở bài trước.

• ▸Bạn mô tả; Claude chạy create-next-app để dựng khung chuẩn.
• ▸Bạn không gõ lệnh - chỉ duyệt khi Claude xin phép.
• ▸Đưa tài liệu BA vào để Claude bám đúng ý đồ web bán hàng.

Khung đã có, giờ cho nó chạy. Nhờ Claude (hoặc tự gõ) chạy server phát triển (dev server), rồi mở địa chỉ nó in ra:

npm run dev
# Mở trình duyệt vào: http://localhost:3000

localhost là chính máy của mèo con; 3000 là cổng app đang chạy. Trang hiện ra là sản phẩm đầu tiên của bạn - dù mới là khung. Lưu ý: lúc này chỉ mình bạn xem được trên máy mình.

Việc nhỏ thì cứ mô tả là Claude làm ngay. Nhưng việc lớn hơn - thêm cả luồng giỏ hàng hay phần đăng nhập - nên cho nó lập kế hoạch trước. Claude Code có plan mode: chế độ nó trình bày dự định (định sửa file nào, làm những gì) mà chưa đụng vào code, tới khi mèo con gật mới làm.

Cách dùng: bật plan mode, đưa tài liệu BA từ bài Nghĩ như người làm sản phẩm và nói "lập kế hoạch thêm trang giỏ hàng theo BA". Claude đưa ra kế hoạch từng bước; mèo con đọc, sửa chỗ chưa đúng ý, rồi mới cho chạy. Đây là lúc bạn cầm lái: duyệt hướng đi trước khi AI viết một dòng code nào.

• ▸plan mode: Claude trình bày kế hoạch, chưa sửa code, tới khi bạn duyệt.
• ▸Dùng cho việc lớn; đưa BA vào để kế hoạch bám đúng nghiệp vụ.
• ▸Duyệt kế hoạch trước giúp bắt sai sớm - rẻ hơn nhiều so với sửa sau khi đã code.

Từ đây, mọi thay đổi đều đi theo một vòng. Muốn thêm trang danh sách hàng? Mô tả cho Claude. Nó sửa code. Mèo con reload trình duyệt xem. Chưa ưng thì nói tiếp. Cứ thế:

Mẹo cho vòng chạy trơn: mỗi lần chỉ xin một thay đổi nhỏ và xem ngay, thay vì đòi mười việc một lúc. Nhỏ và thường xuyên thì dễ thấy chỗ sai và dễ quay lui hơn.

• ▸Mỗi thay đổi: mô tả → Claude dựng → reload xem → chỉnh nếu chưa ưng.
• ▸Xin từng thay đổi nhỏ, xem kết quả ngay - đừng dồn mười việc một câu.
• ▸Thấy kết quả sau mỗi vòng là cách giữ cho mình không lạc.

Claude tạo kha khá file, nhưng mèo con không cần đọc hết. Chỉ cần quen mặt vài chỗ chính, để khi muốn đổi gì thì biết chỉ cho Claude:

shop-cua-toi/
├── app/
│   ├── page.tsx        # trang chủ (đổi tiêu đề ở đây)
│   ├── layout.tsx      # khung chung mọi trang
│   └── san-pham/
│       └── page.tsx    # trang /san-pham vừa thêm
└── package.json        # tên dự án & thư viện

Quy ước của Next.js: mỗi thư mục trong app/ là một đường dẫn, và file page.tsx là nội dung trang đó. Biết bấy nhiêu là đủ để nói với Claude "sửa trang chủ" hay "thêm trang /gio-hang".

Mèo con vừa có khung web bán hàng chạy ở máy mình và đã đi qua vài vòng lặp vibe. Nhưng nó mới nằm trên một máy. Trước khi xây tiếp, nên cất code vào nơi an toàn và mở đường để vibe được cả trên web lẫn điện thoại.