Phần 1: Từ Ý Tưởng Đến Website Thật
Khi bắt đầu xây dựng nguyenxuantai.com, tôi đứng trước một lựa chọn quen thuộc mà nhiều người làm nội dung và kinh doanh đều gặp: thuê developer với ngân sách 30–80 triệu và đợi 3–6 tháng, hoặc tự làm với hàng trăm giờ học từ đầu.
Cả hai đều không hấp dẫn.
Rồi tôi thử dùng Claude Code — AI assistant của Anthropic — để xây website từ đầu. Kết quả là website bạn đang đọc bài này: Next.js App Router, TypeScript, Tailwind CSS v4, Supabase Authentication, hệ thống blog với filter chuyên mục, hệ thống tài nguyên có auth gate, và dark theme hoàn chỉnh.
Tại sao AI thay đổi cuộc chơi?
Không phải vì AI viết code hoàn hảo ngay từ lần đầu — không có chuyện đó. Mà vì AI làm được điều mà trước đây không thể: biến ngôn ngữ tự nhiên thành code chạy được.
Tôi mô tả: "Tạo Navbar sticky với logo bên trái, 5 menu items ở giữa, nút CTA màu cam bên phải. Khi scroll, thêm backdrop blur. Highlight active page."
Claude Code viết ra Navbar hoàn chỉnh với TypeScript, Tailwind CSS, animation — và tôi chỉ cần review, test, và điều chỉnh chi tiết.
Lợi ích thực tế:
- Tiết kiệm chi phí: 0 đồng thuê developer
- Tốc độ: từ ý tưởng đến UI thật trong vài giờ
- Kiểm soát hoàn toàn: mọi pixel đều theo ý mình
- Học được: tôi hiểu code của mình làm gì, không phải black box
Tech stack đã chọn
Next.js 16 (App Router) — routing tự động theo cấu trúc folder, SSR/SSG built-in, tối ưu SEO.
TypeScript — giúp AI viết code chính xác hơn nhờ type hints. Khi AI thấy interface, nó hiểu dữ liệu trông như thế nào và tránh được nhiều lỗi runtime.
Tailwind CSS v4 — utility-first, không cần viết CSS file riêng. Một lưu ý nhỏ nhưng hay bị nói sai: v4 vẫn hỗ trợ arbitrary values đầy đủ, thứ hay vỡ là khi gắn thêm modifier độ mờ vào một giá trị có chứa var(), kiểu bg-[var(--accent)]/5. Gặp trường hợp đó thì viết màu bằng một khối <style> riêng trong component.
Supabase — PostgreSQL database + Auth hoàn chỉnh, free tier đủ dùng cho website cá nhân.
Vercel — deploy zero-config với Next.js, auto deploy khi push GitHub.
Một chi tiết nhỏ nhưng đáng nói vì nó ảnh hưởng tới mọi người đọc tiếng Việt: phông chữ nạp bằng next/font, không phải bằng thẻ <link> trỏ sang Google Fonts. Bộ dấu tiếng Việt nằm ở một file phông riêng, và cách dùng thẻ <link> khiến nó về sau cùng — người đọc thấy chữ nhảy một nhịp ngay khi mở trang. Khai báo subsets: ["latin", "vietnamese"] là thứ khắc phục chuyện đó.
📥 Tải miễn phí
Tạo Website Bằng AI
Phần 2: Quy Trình Và Những Bài Học Thực Tế
6 bước từ ý tưởng đến production
Bước 1: Chuẩn bị context. Tạo file CLAUDE.md ở root project — đây là "bộ nhớ" của AI giữa các phiên làm việc. Ghi rõ tech stack, design system (màu sắc, font, spacing), và những quy tắc quan trọng.
Bước 2: Foundation trước. Layout, Navbar, Footer — làm xong và chắc chắn trước khi xây pages. Thiếu bước này sẽ phải refactor sau.
Bước 3: Một tính năng mỗi lần. Đừng yêu cầu AI làm 5 thứ trong một prompt. Làm xong auth mới làm blog. Làm xong blog mới làm resource system.
Bước 4: Test ngay, commit thường. Mỗi tính năng xong là test liền. Commit Git ngay để có thể rollback nếu cần.
Bước 5: Debug chính xác. Khi gặp lỗi: copy toàn bộ error message, mô tả bối cảnh, paste code liên quan. AI không thể đọc màn hình của bạn.
Bước 6: Deploy và verify. Vercel + GitHub = auto deploy. Nhưng phải test production riêng — môi trường production khác localhost.
Những pitfall thực tế tôi đã gặp
Bundler không đọc .env.local — Supabase URL trả về undefined, app crash ngay khi khởi động. Từ Next.js 16 thì Turbopack là bundler mặc định của next dev, nên không còn cờ --turbopack nào để gỡ; muốn quay về bundler cũ phải chạy next dev --webpack.
middleware.ts deprecated từ Next.js 15 — route protection hoàn toàn không hoạt động dù code đúng. Fix: đổi tên file thành proxy.ts, export function proxy(). Next bỏ qua file tên cũ mà không báo lỗi gì, nên nhìn code thấy đúng mà trang vẫn mở tự do — đây là kiểu lỗi tốn thời gian nhất.
Active link nhận nhầm — /tai-khoa bị highlight khi đang ở /tai-khoan. Fix: kiểm tra pathname === path || pathname.startsWith(path + "/") thay vì chỉ pathname.startsWith(path).
Hydration mismatch với Math.random() — console warning, UI flicker. Fix: dùng mounted state + skeleton component.
Sửa globals.css mà trình duyệt không đổi gì — Turbopack đôi khi không biên dịch lại file CSS và tiếp tục phục vụ bản cũ, hard refresh cũng vô ích. Fix: dừng dev server, xóa thư mục .next, chạy lại.
Ảnh chia sẻ lên Zalo bị mất — thumbnail bài viết kiêm luôn ảnh OG, mà bộ quét OG của Zalo không đọc WebP ổn định. Fix: để thumbnail ở JPEG. Với người đọc Việt Nam thì đây là mất mát thật, không phải chuyện nhỏ.
Điều AI không thể làm thay bạn
Sau tất cả, điều tôi học được quan trọng nhất là: AI là công cụ, không phải người thay thế tư duy.
AI có thể viết code, nhưng bạn phải biết mình muốn gì. AI có thể fix bug, nhưng bạn phải hiểu bug xảy ra ở đâu. AI có thể tạo UI, nhưng bạn phải quyết định UI đó có đúng không.
Người dùng AI hiệu quả nhất không phải là người ít biết nhất — mà là người biết đủ để đặt câu hỏi đúng và đánh giá câu trả lời. Nếu muốn đi từ website cá nhân tới sản phẩm, hãy xem tiếp cách xây startup công nghệ bằng Claude.
Đi sâu hơn từng chặng
Bài này kể lại toàn cảnh một lần dựng site. Nếu bạn muốn làm theo chứ không chỉ đọc, mỗi chặng bên dưới có một bài riêng đi sâu, kèm tài liệu tải được:
- Cài đặt và chọn cửa vào: cài Claude Code từ số 0
- Nhịp một phiên làm việc và cách nghiệm thu: phiên làm việc đầu tiên
- Bộ quy tắc dự án: CLAUDE.md, bộ não của dự án
- Cách giao việc để không phải làm lại: viết prompt cho agent
- Soát lại thứ mình không tự viết: đọc code mình không viết
- Đưa sản phẩm ra cho người lạ dùng: deploy sản phẩm đầu tiên
- Tiền thật sự đi đâu: chi phí thật của vibe code
Còn nếu bạn chưa từng làm gì trong số này, file hướng dẫn bên dưới là bản nhập môn: đi từ lúc chưa cài gì tới lúc có một website chạy thật, kèm câu mô tả mẫu, cách nghiệm thu khi không đọc được code, và phần bảo mật tối thiểu không được bỏ.
📥 Tải miễn phí
Tạo Website Bằng AI
