【Next.js】アプリ作成とshadcnの初期インストール

初期アプリインストールコマンド

$ npx create-next-app@<バージョン> <アプリ名>
$ npx create-next-app@14 notion_to_qiita_prod

Next.jsのバージョン14で最新のものをインストールします。

TypeScriptやTailwind CSSを使用するかなどが聞かれるので、
yesしていく

Ok to proceed? (y) y

✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to customize the default import alias (@/*)? … No / Yes
:
:
:
Success! Created <アプリ名>
↑が表示されれば正常終了

shadcnの初期インストール

shadcnをインストールしていい感じのUIを簡単に利用できるようにします。

↓ shadcnドキュメント参照

$ npx shadcn@latest init
✔ Preflight checks.
✔ Verifying framework. Found Next.js.
✔ Validating Tailwind CSS.
✔ Validating import alias.
✔ Which style would you like to use? › New York (Recommended)
✔ Which color would you like to use as the base color? › Neutral
✔ Writing components.json.
✔ Checking registry.
✔ Updating tailwind.config.ts
✔ Updating src/app/globals.css
✔ Installing dependencies.
ℹ Updated 1 file:
  - src/lib/utils.ts

Success! Project initialization completed.
You may now add components.

shadcnのコンポーネントをインストール

先ほどのshadcnドキュメントから以下のように必要コンポーネントをインストール

$ npx shadcn@latest add button badge card select separator 
✔ Checking registry.
✔ Installing dependencies.
✔ The file button.tsx already exists. Would you like to overwrite? … yes
✔ Created 4 files:
  - src/components/ui/badge.tsx
  - src/components/ui/card.tsx
  - src/components/ui/select.tsx
  - src/components/ui/separator.tsx
ℹ Updated 1 file:
  - src/components/ui/button.tsx

必要なtsxファイルがsrc/components/ui/配下に作成されます。

利用するためには

import { Badge } from "@/components/ui/badge";

上記のようにimportすると使用できます。