shadcnモノレポを利用すれば管理画面もサクッと構築
2026-01-10
7 days ago
開発環境
- node 22.x
- pnpm 10.x
前提
- pnpm がインストール済みであること
- 管理画面（Admin）と公開Webサイトを分離した構成を想定していること
本記事では shadcn公式のMonorepo構成 を利用し、「公開Webサイト + 管理画面」を 最小手順で構築する方法 を紹介します。
本題
1. 新しいモノレポプロジェクトを作成する
まずは shadcn の CLI を使って、新規プロジェクトを作成します。
pnpm dlx shadcn@latest initオプションを選択します Next.js (Monorepo)
? Would you like to start a new project?
Next.js
❯ Next.js (Monorepo)これにより、最初から以下のような モノレポ前提の構成 が生成されます。
- Turborepo 設定済み
- pnpm workspaces 設定済み
- shadcn/ui を共有パッケージとして利用可能
├── apps/
│ └── web
├── packages/
│ ├── ui
│ ├── config
│ └── utils2. apps/ 配下にプロジェクトを追加（admin）
次に、管理画面用のアプリケーションを追加します。
pnpm turbo gen workspace>>> Add an empty workspace to "shadcn-monorepo"
? What type of workspace should be added? app
? What is the name of the app? admin
? Where should "admin" be added? apps/admin
? Add workspace dependencies to "admin"? Yes
? Select all dependencies types to modify for "admin" dependencies, devDependencies
? Which packages should be added as dependencies to "admin? @workspace/ui
? Which packages should be added as devDependencies to "admin? @workspace/eslint-config, @workspace/typescript-config
>>> Success! Created admin at "apps/admin"3. 既存のwebの中身（.next, node_modulesは除外）をコピーしてapps/ 配下に配置
既存の apps/web をベースに管理画面を作りたい場合は、
- .next
- node_modules
を除外して、中身を apps/admin にコピーします。
この作業は手動で行います。
また、package.jsonに関してはファイルの中身も変更します。
{
"name": "admin", <- ここは修正しておく
"version": "0.0.1",
"type": "module",
"private": true,
...(省略)
}4. 依存関係のインストール
pnpm install5. 追加した新しいプロジェクト（admin）の起動確認
pnpm -F admin dev問題なく起動すれば、管理画面用の Next.js アプリが独立して動作します。
さいごに
最終的なディレクトリ構成は以下のようになります。
├── apps/ # デプロイ可能なアプリケーション
│ ├── web # 公開サイト
│ └── admin # 管理画面
├── packages/ # 共有ライブラリ・コンポーネント
│ ├── ui # UIコンポーネント
│ ├── config # 共有設定
│ └── utils # 共通ユーティリティshadcnを全面的に利用し、かつ複数アプリケーションを構築したい場合はおすすめの構成です。