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

次のファイルをこのリポジトリからプロジェクトにコピーします。

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