Posted inDevelopment

Tích hợp Shadcn/ui vào Next.js: Đừng chỉ copy-paste, hãy làm chủ hệ thống Component

Development tutorial - IT technology blog
Development tutorial - IT technology blog

Shadcn/ui không phải là thư viện UI bạn vẫn thường dùng

Nếu bạn đã quen cài đặt Material UI (MUI) hay Ant Design qua lệnh npm install, Shadcn/ui sẽ mang đến một trải nghiệm hoàn toàn khác. Thực tế, nó không nằm trong thư mục node_modules. Đây là một tập hợp các component được xây dựng trên nền Radix UI và Tailwind CSS. Bạn sẽ trực tiếp sở hữu mã nguồn của chúng ngay trong dự án của mình.

Sự khác biệt này mang lại quyền kiểm soát tuyệt đối. Với MUI, việc ghi đè (override) một logic sâu bên trong thường là cơn ác mộng của những dòng CSS !important. Ngược lại, với Shadcn/ui, file button.tsx nằm ngay trong thư mục components/ui. Bạn muốn thêm hiệu ứng loading hay thay đổi cấu trúc DOM? Chỉ cần mở file và sửa trực tiếp.

Next.js UI: Nên chọn hướng đi nào?

Trước khi bắt tay vào code, hãy nhìn vào bức tranh toàn cảnh để hiểu tại sao Shadcn/ui lại trở thành “meta” hiện nay:

  • UI Framework truyền thống (MUI, AntD): Giúp bạn dựng prototype cực nhanh. Tuy nhiên, bundle size thường rất nặng (có thể thêm 50-100KB gzipped) và tùy chỉnh giao diện theo thiết kế riêng là một cực hình.
  • Headless UI (Radix UI, Headless UI): Cung cấp logic tốt nhưng yêu cầu bạn tự viết CSS 100%. Cách này phù hợp với các tập đoàn lớn có Design System riêng nhưng tốn quá nhiều thời gian cho dự án vừa và nhỏ.
  • Shadcn/ui: Điểm giao thoa lý tưởng. Nó mượn sự ổn định của Radix UI và sự linh hoạt của Tailwind CSS. Bạn có sẵn giao diện chỉn chu nhưng vẫn can thiệp được vào từng dòng code.

Lý do mình chọn Shadcn/ui cho các dự án thực tế

Trong một dự án SaaS gần đây với 5 developer, việc chuyển sang Shadcn/ui đã giúp team tiết kiệm khoảng 30% thời gian làm UI. Dưới đây là ba giá trị cốt lõi:

  1. Kiểm soát Bundle Size tuyệt đối: Bạn chỉ thêm những gì thực sự dùng. Nếu dự án chỉ cần Button và Input, folder của bạn chỉ chứa đúng code của hai thứ đó. Không còn tình trạng kéo theo cả một thư viện khổng lồ vào trình duyệt của người dùng.
  2. Tùy biến không giới hạn: Vì code nằm trong project, việc tích hợp framer-motion để làm animation hay kết hợp với react-hook-form diễn ra rất mượt mà.
  3. Tối ưu cho Server Components: Shadcn/ui tách biệt rõ ràng giữa logic client và server. Điều này giúp ứng dụng đạt điểm Lighthouse cao hơn, đặc biệt là các chỉ số về tốc độ phản hồi.

Triển khai thực tế: Từ khởi tạo đến tùy chỉnh

Dưới đây là quy trình chuẩn để đưa Shadcn/ui vào dự án Next.js của bạn.

Bước 1: Khởi tạo dự án

Hãy bắt đầu với một dự án Next.js trắng (đảm bảo bạn đã chọn Tailwind CSS trong quá trình setup).

npx create-next-app@latest my-app --typescript --tailwind --eslint

Bước 2: Cấu hình Shadcn/ui

Sử dụng CLI chính thức để tự động hóa việc cấu hình các file tailwind.config.js và components.json:

npx shadcn-ui@latest init

Dựa trên kinh nghiệm của mình, bạn nên chọn style “New York” để có giao diện hiện đại hơn và dùng “Zinc” làm màu nền để dễ phối hợp với các màu thương hiệu sau này.

Bước 3: Thêm Component

Thử thêm một chiếc Button bằng lệnh:

npx shadcn-ui@latest add button

Ngay lập tức, file components/ui/button.tsx sẽ xuất hiện. Lúc này, mã nguồn đã thuộc về bạn.

Sử dụng trong thực tế

Cách gọi component rất tự nhiên và gọn gàng:

import { Button } from "@/components/ui/button"

export default function Page() {
  return (
    <main className="p-10">
      <Button variant="outline" size="default">
        Khám phá ngay
      </Button>
    </main>
  )
}

Mẹo tối ưu để code sạch hơn

Đừng chỉ dừng lại ở việc dùng các component mặc định. Hãy áp dụng các kỹ thuật sau để project chuyên nghiệp hơn.

1. Thay đổi Theme qua CSS Variables

Shadcn/ui quản lý màu sắc qua biến HSL trong globals.css. Khi khách hàng muốn đổi màu chủ đạo từ xanh sang cam, bạn chỉ cần cập nhật biến --primary ở một nơi duy nhất thay vì đi tìm và thay thế hàng trăm class Tailwind.

2. Đừng sửa trực tiếp logic phức tạp vào file UI

Nếu bạn muốn thêm logic logging mỗi khi click Button, đừng sửa trực tiếp trong ui/button.tsx. Hãy tạo một wrapper như components/common/AppButton.tsx. Cách này giúp bạn dễ dàng cập nhật mã nguồn từ Shadcn CLI trong tương lai mà không sợ bị ghi đè mất logic riêng.

3. Validation Form cực nhanh với Zod

Component Form của Shadcn là một “vũ khí” hạng nặng. Nó tích hợp sẵn react-hook-form và zod. Bạn có thể dựng một form đăng ký phức tạp với đầy đủ thông báo lỗi chỉ trong chưa đầy 10 phút.

// Cấu trúc Schema ngắn gọn
const formSchema = z.object({
  email: z.string().email("Email không hợp lệ"),
})

Hiệu suất và Accessibility

Một sai lầm phổ biến là thêm quá nhiều component vào dự án khi chưa cần tới. Quy tắc vàng là: Chỉ add những gì bạn dùng. Nhờ dựa trên Radix UI, các component này đã hỗ trợ sẵn phím tắt và trình đọc màn hình. Hãy cẩn thận khi chỉnh sửa mã nguồn để không vô tình xóa mất các thuộc tính aria-* quan trọng này.

Thực tế cho thấy, các dự án giữ nguyên chuẩn accessibility của Shadcn thường dễ dàng đạt điểm SEO và Accessibility tuyệt đối (100/100) trên công cụ kiểm tra của Google.

Lời kết

Tích hợp Shadcn/ui không đơn thuần là cài đặt một công cụ, mà là chọn một tư duy phát triển linh hoạt. Bạn thoát khỏi sự gò bó của các thư viện đóng gói sẵn để tập trung vào việc giải quyết bài toán nghiệp vụ. Hãy thử áp dụng vào dự án tiếp theo, bạn sẽ thấy sự khác biệt trong tốc độ phát triển và chất lượng code.

Share:
Tags: