shadcn ui nx next

Shadcn/ui + nx + next.js

นี่คือโครงการตัวอย่างที่แสดงวิธีการใช้ Shadcn/UI กับ NX และ Next.js

เรียกใช้โครงการนี้ในพื้นที่

npx nx serve next-app

ขั้นตอนการตั้งค่าด้วยตนเอง

คำสั่งในการสร้างโครงการ:

npx create-nx-workspace@latest workspacename
cd workspacename
npm i -D @nx/next @nx/react
nx g @nx/next:app next-app # use "tailwind" as style options
nx g @nx/react:library shadcn-ui # none for all options
nx g @nx/next:setup-tailwind --project=next-app
npm i tailwindcss-animate class-variance-authority clsx tailwind-merge
nx g @nx/next:setup-tailwind --project=next-app
npm i lucide-react

คัดลอกไฟล์ต่อไปนี้จาก repo นี้ไปยังโครงการของคุณ:

• components.json
• tsconfig.json
• tsconfig.base.json
• apps/next-app/tailwind.config.js

การติดตั้งส่วนประกอบ Shadcn/UI ใหม่

หลังจากทำตามขั้นตอนการติดตั้งด้านบนการติดตั้งส่วนประกอบ ShadCN/UI เป็นงานง่ายและต้องใช้ขั้นตอนต่อไปนี้

npx shadcn-ui@latest add < component > # e.g button

เพิ่ม/ส่งออกส่วนประกอบใหม่ไปยัง libs/shadcn-ui/src/index.ts

 export * from ' ./components/ui/command ' ;

ตอนนี้คุณสามารถใช้ส่วนประกอบของคุณในโครงการ NX ของคุณได้

import { Button } from ' @libs/shadcn-ui ' ;