ADR-006: Next.js + shadcn/ui + Tailwind CSS 4 cho Frontend¶
Trạng thái¶
Accepted
Ngày¶
2026-04-08
Người quyết định¶
Tech Lead
Architecture Drivers¶
D3 (Developer Experience), D6 (Tốc độ đưa ra sản phẩm)
Bối cảnh¶
Frontend cần phục vụ nền tảng quản trị dữ liệu chính phủ với bảng dữ liệu phức tạp (ma trận Bảng C), tree view (cây Domain, cây tổ chức), form và dashboard. Design system chỉ định phong cách "Government Modern" — gọn gàng, thoáng, PC-first.
Các Phương Án Xem Xét¶
Phương án A: Next.js (App Router) + shadcn/ui + Tailwind CSS 4¶
- Ưu điểm: SSR/SSG; file-based routing; shadcn/ui composable và accessible; Tailwind CSS 4 với OKLCH color space; React patterns hiện đại (Server Components); hệ sinh thái lớn
- Nhược điểm: Next.js thêm complexity so với React thuần; App Router tương đối mới
Phương án B: React + Ant Design (như trong TSD v1.3)¶
- Ưu điểm: Ant Design có sẵn Tree/Table/Form component; locale tiếng Việt built-in; hệ sinh thái trưởng thành
- Nhược điểm: Ant Design khó tùy biến; bundle size lớn; cách styling ít hiện đại
Phương án C: Vue.js + Vuetify¶
- Ưu điểm: Learning curve đơn giản hơn; Vuetify có material design components
- Nhược điểm: Hệ sinh thái nhỏ hơn React; đội có thể chưa có kinh nghiệm Vue
Quyết Định¶
Sử dụng Phương án A: Next.js + shadcn/ui + Tailwind CSS 4. Phù hợp với Design System MASTER.md đã tạo. shadcn/ui cung cấp component composable, accessible, tùy biến được theo design spec Government Modern.
Hệ Quả¶
Tích cực¶
- Design System đã định nghĩa với OKLCH tokens và component specs
- shadcn/ui là copy-paste (không phải npm dependency) — toàn quyền kiểm soát
- Tailwind CSS 4 hỗ trợ design token natively
- SSR cải thiện hiệu năng tải trang ban đầu
Tiêu cực¶
- Có thể cần tự xây table component phức tạp (ma trận Bảng C)
- App Router patterns cần đội quen thuộc