Khởi Tạo Dự Án: Viên Gạch Đầu Tiên
Chúng ta bắt đầu xây dựng App thực tế. Không lý thuyết suông nữa. Giả sử chúng ta build một SaaS Platform quản lý khóa học (LMS Lite).
Bước 1: Chọn Stack (Vũ khí)
Replit hỗ trợ mọi thứ, nhưng để đạt tốc độ cao nhất (Velocity), tôi khuyên dùng "Vibe Stack":
- Next.js (App Router): Framework tiêu chuẩn ngành.
- TypeScript: Bắt buộc. Giúp Agent tránh lỗi ngớ ngẩn.
- Tailwind CSS: Agent viết class CSS cực nhanh.
- Shadcn/UI: Thư viện component đẹp, copy-paste friendly.
Bước 2: The Genesis Prompt (Câu lệnh khởi tạo)
Đừng dùng nút "Create React App" cũ kỹ. Hãy dùng Agent để scaffold cấu trúc chuẩn Enterprise ngay từ đầu.
Prompt: "Khởi tạo một dự án Next.js 14 mới sử dụng App Router, TypeScript, Tailwind CSS. Hãy xóa bỏ các code mẫu mặc định (boilerplate) ở trang home. Tạo cấu trúc folder như sau:
components/ui: Cho các atomic components.lib: Chứa các hàm utility và supabase client.app/(auth): Route group cho login/register.app/(dashboard): Route group cho trang quản trị. Sau khi tạo xong, hãy cài đặtlucide-reactvàclsx."
Bước 3: Kiểm tra cấu trúc (Audit)
Sau khi Agent chạy xong, hãy mở tab Files xem nó có làm đúng không.
- Nếu thấy folder
src(tùy sở thích, nhưng Next.js hiện đại thường bỏ src để flat), hãy bảo nó move ra nếu bạn muốn. - Check
package.json: Xem phiên bản các thư viện có mới nhất không.
Quản lý Dependencies Tự Động
Cái hay của Replit là khi bạn import một thư viện chưa cài (ví dụ gõ import { Toaster } from 'sonner'), Replit thường sẽ tự detect và gợi ý cài đặt, hoặc Agent sẽ tự chạy npm install khi nó viết mã.
Tuy nhiên, đôi khi nó quên.
- Mẹo: Nếu code đỏ lòm vì thiếu thư viện, chỉ cần gõ vào chat: "Fix missing dependencies". Agent sẽ tự scan
package.jsonvà code để cài những thứ còn thiếu.
🏗 Lưu ý: Một cấu trúc folder tốt ngay từ đầu sẽ tiết kiệm hàng trăm giờ refactor sau này. Hãy khó tính (Strict) ở bước này. Đừng để file lộn xộn.