الصفحة الرئيسية>موارد بناء الموقع>تحميل الخط
تنزيل

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

انسخ الملفات التالية من هذا الريبو إلى مشروعك:

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

تثبيت مكونات شادسكن/واجهة المستخدم الجديدة

بعد اتباع خطوات التثبيت أعلاه ، يعد تثبيت مكونات 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 ' ;
يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل