Mô tả

Chiến lược làm NHANH NHẤT và ĐẸP NHẤT hiện tại:

  1. Khoản Base + Theme + Component nhỏ: Khởi tạo dự án Next.js với shadcn/ui.
  2. Khoản Block trang lớn: Vào Shadcn Blocks hoặc Magic UI Blocks, chọn Block thích hợp (Hero, Feature, Pricing) rồi bấm Copy Code dán thẳng vào file Page.
  3. Khoản Hiệu ứng/Animate: Dùng thêm Framer Motion hoặc copy các hiệu ứng nhỏ từ Magic UI cho những vị trí cần gây ấn tượng (Hero section, hover button).

Cách làm này giúp bạn tự do tùy biến 100% code, cực kỳ responsive, Dark/Light mode chuẩn chỉ và hoàn toàn FREE không lo dính bản quyền Pro.

Dưới đây là bộ lệnh chạy một lần để khởi tạo và cài đặt đầy đủ tất cả các thư viện cần thiết theo đúng chiến lược trên cho Next.js App Router.

1. Khởi tạo dự án Next.js & shadcn/ui

Mở Terminal và chạy lệnh tạo dự án Next.js (chọn Tailwind CSS, TypeScript, và App Router):

npx create-next-app@latest my-app --typescript --tailwind --eslint --app --src-dir --import-alias "@/*"
cd my-app

Khởi tạo shadcn/ui vào dự án:

npx shadcn@latest init

// Lựa chọn
> y
> Base UI (Recommended)
> Nova

2. Lệnh cài đặt tất cả thư viện bổ trợ (Copy & Run)

Chạy lệnh cài đặt đầy đủ các thư viện hỗ trợ Animation, Theme Sáng/Tối, Icons và Magic UI:

npm install framer-motion lucide-react next-themes

3. Cài đặt sẵn các Component nhỏ phổ biến của shadcn/ui

Thêm ngay các component nhỏ thường dùng nhất để đỡ phải gõ lẻ tẻ sau này:

npx shadcn@latest add button card dialog dropdown-menu input label avatar badge sheet navigation-menu

4. Cấu hình Theme Sáng/Tối (Light/Dark Mode)

Tạo file src/components/theme-provider.tsx:

"use client"

import * as React from "react"
import { ThemeProvider as NextThemesProvider } from "next-themes"

export function ThemeProvider({
  children,
  ...props
}: React.ComponentProps<typeof NextThemesProvider>) {
  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
}

Bọc ThemeProvider vào src/app/layout.tsx:

import { ThemeProvider } from "@/components/theme-provider"

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body>
        <ThemeProvider
          attribute="class"
          defaultTheme="system"
          enableSystem
          disableTransitionOnChange
        >
          {children}
        </ThemeProvider>
      </body>
    </html>
  )
}