shadcn ui nx next

shadcn/ui + nx + next.js

NX 및 Next.js와 함께 Shadcn/UI를 사용하는 방법을 보여주는 샘플 프로젝트입니다.

이 프로젝트를 현지에서 실행합니다

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 ' ;