🚀
Next.js に shadcn/ui を導入する
概要
Next.js に shadcn/ui を導入した備忘録
環境
- Next.js:v14.0.3(App Router)
- shadcn/ui:v0.1.0
- Bun:v1.0.15
shadcn/ui とは
Radix UI と Tailwind CSS をベースに作成された、コンポーネントのカタログを提供している
パッケージとしてインストールするのではなく、作成されたコンポーネントのソースコードをコピーしてくる感じ
CSS in JS っぽいことができつつ、ライブラリ側で use client が強制されることもなく、React Server Component との相性が良さそうなので使ってみました
インストール
shadcn-ui の CLI を追加する
(追加せず bunx で実行することもできる(公式のInstallation))
bun add -D shadcn-ui
初期化
bun shadcn-ui init
初期化が完了すると、components.json が作成される
コマンド実行時に諸々回答した結果が反映されているので、このまま使う
components.json
{
"$schema": "https://ui.shadcn.com/schema.json",
"style": "default",
"rsc": true,
"tsx": true,
"tailwind": {
"config": "tailwind.config.ts",
"css": "src/app/globals.css",
"baseColor": "slate",
"cssVariables": true,
"prefix": ""
},
"aliases": {
"components": "@/app/_shadcn/",
"utils": "@/app/_shadcn/utils"
}
}
コンポーネントの追加
必要なコンポーネントは逐一 shadcn/ui からインストールする必要がある
もしくはコピペで持ってくる
例えばボタンを使いたい時(button)
bun shadcn-ui add button
Discussion