はじめに
現在プログラミングスクールに通っている者です。個人開発をする中で、Next.jsプロジェクトを作成した後に、shadcn/uiを導入したいと思い公式サイトを確認していたのですが、いまいちよくわからなかったため導入した内容を備忘録として残したいと思います。
注意
プロジェクトの内容によってはこちらのやり方で正しく動作するとは限らないため、一度テスト環境等で試していただくことをお勧めいたします。また、私の場合はyarnを使用しているため、基本的にはyarnを使用したセットアップとなることご了承いただけますと幸いです。
shadcn/uiの導入
プロジェクト内に移動してから実施してください。
まず、yarnを使用してshadcn/uiをプロジェクトに追加します。
$ yarn add shadcn-ui
インストール後、shadcn/uiの初期化を行います。
$ yarn shadcn-ui init
以下、選択していきます。入力項目もあるため、注意しながら進めてください。
yarn run v1.22.19
$ /app/node_modules/.bin/shadcn-ui init
✔ Would you like to use TypeScript (recommended)? … no / yes
✔ Which style would you like to use? › Default
✔ Which color would you like to use as base color? › Slate
✔ Where is your global CSS file? … src/app/globals.css
✔ Would you like to use CSS variables for colors? … no / yes
✔ Where is your tailwind.config.js located? … tailwind.config.js
✔ Configure the import alias for components: … @/components
✔ Configure the import alias for utils: … @/lib/utils
✔ Are you using React Server Components? … no / yes
✔ Write configuration to components.json. Proceed? … yes
✔ Writing components.json...
✔ Initializing project...
✔ Installing dependencies...
Success! Project initialization completed.
Done in 971.71s.
今回の私の選択肢
- TypeScriptの使用：
yesを選択して、TypeScriptを使用。 - スタイルの選択：
デフォルトスタイルを選択。 - ベースカラー：
Slateを基本色として、選択。 - グローバルCSSファイルの位置：
-
既存プロジェクトのglobals.cssの場所を指定します（私の場合：src/app/globals.css） -
デフォルトでは、app/globals.cssとなっているため要注意 - Next.jsプロジェクト作成時のApp Routerの選択有無やsrcディレクトリの有無によって変わってくるかと思います。
-
- CSS変数の使用： ここではnoを選択。
- tailwind.config.jsの位置：
既存の設定ファイルの場所を指定。（私の場合はそのまま） - コンポーネントのインポートエイリアス：
@/componentsを設定。 - ユーティリティのインポートエイリアス：
@/lib/utilsを設定。 - Reactサーバーコンポーネントの使用： ここでは
yesを選択。 - components.jsonへの設定の保存：
yesを選択して設定を保存。shadcn/uiに関する設定が保存されるファイルとなります。
設定が完了すると、プロジェクトの初期化とインストールが完了します。
Bottunコンポーネントの導入
例として、Buttonコンポーネントをプロジェクトに追加してみたいと思います。
$ yarn shadcn-ui add button
src/components/ui/button.tsxが生成されるため、src/app/page.tsxから呼び出してみたいと思います。
src/app/page.tsx
import { Button } from "@/components/ui/button";
return (
<main>
<Button>クリック</Button>
</main>
);
先ほど導入したButtonコンポーネントのimport及びJSX内でコンポーネントの呼び出しを定義します。
画像のようにボタンが表示されることを確認できたら完了となります。
以上です。
参考資料