Next.jsとshadcn/uiの導入手順を簡単な使い方とサンプルコードをご紹介いたします。

プロジェクトの初期セットアップ

Next.jsとshadcn/uiの組み合わせは、開発の効率とデザイン品質の両立を実現する強力な構成です。

プロジェクトの立ち上げからshadcn/uiの利用までの流れを、以下の手順に沿って進めてまいります。

next.jsの導入

まずはNext.jsプロジェクトを作成いたします。

bashCopy codeyarn create next-app my-app --typescript
cd my-app

プロンプトごとの選択内容と意味

以下のようなプロンプトが順に表示されます。Tailwind CSSを含めた最適な開発環境を構築するために、次のように回答してください。

質問内容	推奨回答	解説
Would you like to use ESLint?	Yes	コードの静的解析により品質向上が期待できます。shadcn/uiとの相性も良好です。
Would you like to use Tailwind CSS?	Yes	本記事の主目的。Tailwindが自動設定され、手動の初期化が不要になります。
Would you like your code inside a src/ directory?	Yes	コンポーネントやルーティングを整理しやすく、スケールしやすい構成です。
Would you like to use App Router?	Yes（推奨）	app/ ディレクトリベースの新しいルーティングシステムです。shadcn/uiとの親和性も高いです。
Would you like to use Turbopack for next dev?	No（※現時点では非推奨）	現在はまだ安定性に課題があり、開発体験に支障をきたす場合があります。
Would you like to customize the import alias (@/* by default)?	Yes（推奨）	モジュールの相対パス解消に便利です。@/components や @/lib などで読みやすさが向上します。

このコマンドにより、TypeScript対応のNext.jsアプリケーションが作成されます。

完成後の構成イメージ

初期設定が完了すると、以下のような構成になります。

arduinoCopy codemy-app/
├── src/
│   ├── app/             ← App Routerルート
│   ├── components/      ← コンポーネント配置
│   ├── styles/globals.css ← Tailwindが読み込まれるCSS
│   └── pages/           ← （App Routerを選ばなかった場合のみ）
├── tailwind.config.js
├── postcss.config.js
├── tsconfig.json        ← import aliasも自動設定済
├── .eslintrc.json
└── package.json

この構成では、Tailwind CSS・TypeScript・App Router・import alias・ESLint がすべて初期状態から有効になっており、開発準備が整った状態で作業を開始できます。

---

shadcn/uiの導入

shadcn/uiはCLIツールで簡単に導入できます。まず以下のコマンドを実行します。

bashCopy codenpx shadcn@latest init

shadcn/uiの初期化コマンド npx shadcn@latest init を実行した際の出力内容について、それぞれのステップを丁寧に解説いたします。

---

shadcn/ui初期化プロセスの詳細解説

以下はCLIの出力に対する各処理の説明です。

ステップ内容	解説
✔ Preflight checks.	Node.jsのバージョンやパッケージ構成など、最低限の実行環境が整っているかをチェックします。問題がなければ先に進みます。
✔ Verifying framework. Found Next.js.	package.jsonからNext.jsが使われていることを検出します。shadcn/uiはReactベースで、Next.jsとの連携を前提としています。
✔ Validating Tailwind CSS config. Found v4.	Tailwind CSSの設定ファイル（tailwind.config.js）を読み取り、バージョンや構成の妥当性をチェックします。v4が確認されたということは、最新のTailwind構成が認識されたという意味です。
✔ Validating import alias.	tsconfig.json や jsconfig.json に記述されたインポートエイリアス（例：@/components）が適切に設定されているかを確認します。これにより、相対パスを避けた簡潔なインポートが可能になります。
✔ Which color would you like to use as the base color? › Neutral	UIコンポーネントで使う基本カラーパレットを選択するステップです。Neutralはグレー系を基調とした落ち着いた配色で、後から変更することも可能です。
✔ Writing components.json.	components.jsonという設定ファイルを生成し、shadcn CLIの初期化内容（コンポーネントパス・テーマ色など）を保存します。このファイルは今後のコンポーネント追加に利用されます。
✔ Checking registry.	コンポーネント取得のために内部のレジストリ（UIテンプレートの元）への接続状況を確認します。
✔ Updating src/app/globals.css	Tailwind CSSの@tailwind base;などのディレクティブや、shadcn/ui向けのスタイル追加がここで行われます。既存のCSSに自動で追記されます。
✔ Installing dependencies.	コンポーネントに必要なshadcn/ui用パッケージ（例：@radix-ui/react-*やclass-variance-authorityなど）が自動でインストールされます。
✔ Created 1 file: src/lib/utils.ts	ユーティリティ関数（cn()など、クラス名の結合に使う関数）を定義するファイルが作成されます。shadcn/uiの多くのコンポーネントで利用される基本関数です。

初期化成功の意味

csharpCopy codeSuccess! Project initialization completed.
You may now add components.

このメッセージが表示されたら、shadcn/uiのCLI初期化は正常に完了しています。

続けて以下のようにしてUIコンポーネントを導入できます。

bashCopy codenpx shadcn@latest add button

これにより、components/ui/button.tsxが自動生成され、すぐに使用可能になります。

使用例：

tsxCopy codeimport { Button } from "@/components/ui/button";

export default function Home() {
  return (
    <main className="p-4">
      <Button variant="default">クリックしてください</Button>
    </main>
  );
}

バリエーションはvariant="outline"やvariant="ghost"などが用意されており、柔軟なカスタマイズが可能です。

カスタムテーマの適用

tailwind.config.jsやtheme.tsにてカラーやフォントを拡張することで、ブランドデザインに即したUI構築が実現できます。

tsCopy code// components/theme.ts
export const theme = {
  colors: {
    primary: "#4f46e5",
    secondary: "#06b6d4",
  },
};

よく使うコンポーネントの例

以下に、shadcn/uiで利用可能な主要コンポーネントをいくつかご紹介いたします。

コンポーネント名	用途
Button	各種ボタンUI
Input	テキスト入力欄
Dialog	モーダルウィンドウ
DropdownMenu	メニュー型UI
Card	情報ブロック
Tabs	タブ切り替え

まとめ：スピードと品質を両立する開発体験

Next.jsとshadcn/uiを組み合わせることで、

• 高速なUI開発
• 美しく整ったデフォルトスタイル
• 柔軟なカスタマイズ性

を手に入れることができます。

プロジェクトの立ち上げから実際の利用まで、一貫して開発効率と品質を追求した構成が魅力です。

デザインと開発の間をつなぐこのセットアップを、ぜひ体験してみてください。