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 15+ (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 ý quan trọng: v4 không hỗ trợ arbitrary values như `bg-[var(--x)]` — phải dùng scoped `<style>` trong component thay thế.
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.
📥 Tải miễn phí
Hướng Dẫn 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
Turbopack không đọc `.env.local` — Supabase URL trả về undefined, app crash. Fix: xóa `--turbopack` khỏi dev script trong `package.json`.
`middleware.ts` deprecated trong 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()`.
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.
Next.js 15+ params là Promise — TypeScript error với `params.slug` trong `[slug]/page.tsx`. Fix: `params: Promise<{slug: string}>` + `await params`.
Đ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 bạn muốn bắt đầu hành trình tương tự, file hướng dẫn bên dưới có đầy đủ tech stack, cấu trúc dự án, và checklist deploy mà tôi đã dùng.
📥 Tải miễn phí
Hướng Dẫn Tạo Website Bằng AI
