nextjs15-init

NextJS 15 Init Skill

ドメインベースの Next.js 15 プロジェクトを作成し、モダンなスタックで自動設定します。 Todo、Blog、Dashboard、E-commerce、または Custom のドメインを選択して、App Router ベースの完全な CRUD アプリをすぐに生成できます。

Quick Start

スキルの実行時に、次の情報を入力します：

• フォルダー名（例：my-todo-app）
• プロジェクト名（例：todo-app）
• ドメインの選択（Todo/Blog/Dashboard/E-commerce/Custom）
• スタックプリセット（Minimal/Essential/Full Stack/Custom）

その後、次の手順が自動的に実行されます：

# 1. Next.js 15 프로젝트 생성 (App Router, TypeScript, Tailwind)
npx create-next-app@latest [폴더명] --typescript --tailwind --app --use-npm

# 2. 패키지 설치
npm install

# 3. 도메인별 App Router 구조 자동 생성
# - app/[domain]/ (페이지)
# - components/[domain]/ (컴포넌트)
# - lib/stores/[domain].ts (Zustand 스토어)
# - lib/api/[domain].ts (API 로직)
# - lib/validations/[domain].ts (Zod 스키마)

# 4. 코드 품질 검증 (필수)
npm run lint

# 5. 개발 서버 실행
npm run dev

Task Instructions

IMPORTANT：このスキルは対話形式で進めます。

Step 1: ドメインとプロジェクトの設定に関する質問

まず、ユーザーに次のように尋ねてください：

「Next.js 15 アプリを作成します。次の情報を教えてください：

1. ドメイン（エンティティ）の選択

どのドメインのアプリを作成しますか？

A) Todo（タスク管理）

• フィールド：title、description、completed、createdAt、updatedAt
• 機能：CRUD、フィルタリング（すべて／進行中／完了）、チェックボックスの切り替え
• API：/api/todos（GET、POST、PATCH、DELETE）

B) Blog（ブログ／CMS）

• フィールド：title、content、excerpt、slug、published、createdAt、updatedAt
• 機能：CRUD、記事の作成／編集、一覧／詳細ページ、検索
• API：/api/posts（GET、POST、PATCH、DELETE）

C) Dashboard（ダッシュボード／管理画面）

• フィールド：統計、チャートデータ、ユーザー管理
• 機能：データの可視化、テーブル、フィルタリング、ページネーション
• API：/api/analytics、/api/users

D) E-commerce（EC サイト）

• フィールド：name、price、description、images、stock、category
• 機能：商品一覧／詳細、カート、注文
• API：/api/products、/api/cart、/api/orders

E) Custom（カスタム定義）

• エンティティ名とフィールドを直接入力

2. プロジェクト情報

• フォルダー名：プロジェクトを作成するフォルダー名（デフォルト：[ドメイン]-app、例：todo-app）
  • このフォルダーに Next.js プロジェクトが作成されます
• プロジェクト名：Next.js プロジェクト名（デフォルト：フォルダー名と同じ）
  • package.json の name フィールドに使用されます

3. スタックプリセットの選択

次のいずれかを選択してください：

A) Essential（推奨）

• ✅ Next.js 15（App Router）
• ✅ TypeScript
• ✅ Tailwind CSS
• ✅ ShadCN/ui（UI コンポーネント）
• ✅ Zustand（クライアント状態管理）
• ✅ React Hook Form + Zod（フォーム管理 + 検証）
• ✅ Lucide Icons
• ❌ Tanstack Query は含まれません
• ❌ Prisma は含まれません
• ❌ NextAuth は含まれません

B) Minimal（最小構成）

• ✅ Next.js 15（App Router）
• ✅ TypeScript
• ✅ Tailwind CSS
• ❌ ShadCN は含まれません
• ❌ Zustand は含まれません
• ❌ React Hook Form は含まれません
• ❌ その他のライブラリは含まれません

C) Full Stack（すべての機能）

• ✅ Next.js 15（App Router）
• ✅ TypeScript
• ✅ Tailwind CSS
• ✅ ShadCN/ui
• ✅ Zustand（クライアント状態）
• ✅ Tanstack Query（サーバー状態）
• ✅ React Hook Form + Zod
• ✅ Drizzle ORM（TypeScript ファーストの ORM）
• ✅ Better Auth（認証）
• ✅ Framer Motion（アニメーション）
• ✅ Lucide Icons

D) Custom（カスタム選択）

• 各機能を個別に選択

どのドメインとプリセットを選択しますか？（ドメイン：A/B/C/D/E、プリセット：A/B/C/D）」

Step 2: Custom を選択した場合の追加質問

2-1. Custom ドメイン（E）を選択した場合：

1. エンティティ名：エンティティ名を入力してください（例：Product、Post、User）
2. フィールド定義：各フィールドを入力してください（形式：フィールド名:型、例：title:string、price:number、isActive:boolean）
   • 対応する型：string、number、boolean、Date
   • createdAt、updatedAt は自動的に追加されます
3. 主な機能：フィルタリング／並べ替えの基準となるフィールドを選択してください

2-2. Custom スタックプリセット（D）を選択した場合：

次の質問を順番にしてください：

1. UI コンポーネント：ShadCN/ui を使用しますか？（はい／いいえ）
2. 状態管理：Zustand を使用しますか？（はい／いいえ）
3. サーバー状態：Tanstack Query を使用しますか？（はい／いいえ）
4. フォーム管理：React Hook Form + Zod を使用しますか？（はい／いいえ）
5. データベース：Drizzle ORM を使用しますか？（はい／いいえ）
6. 認証：Better Auth を使用しますか？（はい／いいえ）
7. アニメーション：Framer Motion を使用しますか？（はい／いいえ）

ステップ 3：選択したドメインとスタックに応じたプロジェクトの作成

1. Next.js 15 プロジェクトの作成：

   • ユーザーが指定したフォルダー名でプロジェクトを作成
   • コマンド：npx create-next-app@latest [폴더명] --typescript --tailwind --app --use-npm
   • フォルダー名とプロジェクト名が異なる場合は、作成後に package.json の name フィールドを変更

2. 選択したパッケージのインストール：npm install [패키지들]

3. フォルダー構造の作成：App Router ベースの構造

   app/
   ├── (auth)/
   ├── [domain]/
   ├── api/[domain]/
   ├── layout.tsx
   └── page.tsx
   components/
   ├── ui/ (ShadCN)
   ├── [domain]/
   └── layouts/
   lib/
   ├── db/ (Prisma)
   ├── stores/ (Zustand)
   ├── api/
   ├── utils/
   └── validations/ (Zod)
   

4. ドメイン別ボイラープレートの生成：

   A) Todo：タイトル、説明、完了状態、作成日時、更新日時

   • API ルート：/api/todos（CRUD）
   • ページ：/todos（一覧）、/todos/[id]（詳細）
   • コンポーネント：TodoList、TodoItem、TodoForm
   • ストア：useTodoStore（Zustand）
   • バリデーション：todoSchema（Zod）

   B) Blog：タイトル、コンテンツ、抜粋、スラッグ、公開状態、作成日時、更新日時

   • API ルート：/api/posts（CRUD）
   • ページ：/blog（一覧）、/blog/[slug]（詳細）、/blog/write（作成）
   • コンポーネント：PostList、PostCard、PostEditor
   • ストア：usePostStore（Zustand）
   • バリデーション：postSchema（Zod）

   C) Dashboard：統計、チャート、ユーザー管理

   • API ルート：/api/analytics、/api/users
   • ページ：/dashboard（メイン）、/dashboard/users（ユーザー）
   • コンポーネント：Chart、StatsCard、DataTable
   • ストア：useDashboardStore（Zustand）
   • バリデーション：userSchema（Zod）

   D) E-commerce：名前、価格、説明、画像、在庫、カテゴリー

   • API ルート：/api/products、/api/cart、/api/orders
   • ページ：/products（一覧）、/products/[id]（詳細）、/cart（カート）
   • コンポーネント：ProductCard、ProductGrid、Cart
   • ストア：useCartStore、useProductStore（Zustand）
   • バリデーション：productSchema、cartSchema（Zod）

   E) Custom：ユーザー定義フィールド

   • API ルート：基本的な CRUD
   • ページ：基本的な List/Detail
   • コンポーネント：基本的な CRUD コンポーネント
   • ストア：基本的なストア
   • バリデーション：基本的なスキーマ

5. ShadCN のインストールと設定（Essential 以上）：

   npx shadcn@latest init
   npx shadcn@latest add button card input form table
   

6. コードの検証とエラーの修正：

   a. npm run lint を実行

   b. 検出されたエラーを修正：

   • Import パス：@/ エイリアスを使用（tsconfig.json で設定）
   • TypeScript の型：すべての型を明示
   • ESLint ルール：未使用の変数や import を削除
   • Next.js のルール：metadata、generateStaticParams など
   • 'use client' ディレクティブ：useState、useEffect などの React Hooks を使用する場合は、ファイルの先頭に追加

   c. npm run build または pnpm build を実行

   d. ビルドエラーを修正：

   • TypeScript の型エラー：型の不一致、nullable チェックの不足など
   • モジュールの import エラー：パスとパッケージのインストール状況を確認
   • Server/Client Component のエラー：適切な 'use client' ディレクティブを追加
   • Dynamic import のエラー：server-only のコードがクライアントで使用されていないことを確認

   e. 再検証：lint と build がどちらも成功するまで繰り返す

   f. 目標：

   • npm run lint の結果が「0 errors」
   • npm run build または pnpm build が成功

   ✅ CRITICAL：このステップは必須です。lint と build がどちらも成功するまで、次のステップに進めません。

ステップ 4：最終検証と案内

✅ CRITICAL：このステップはプロジェクトを完了するための必須条件です。lint と build がどちらも成功する必要があります。

1. ESLint の検証：

   npm run lint
   

   • ✅ 成功例：

     ✔ No ESLint warnings or errors
     

   • ❌ 失敗例（error がある場合は必ず修正）：

     Error: 'useState' is defined but never used
     Error: Missing return type on function
     

2. 本番ビルドの検証：

   npm run build
   

   または pnpm を使用する場合：

   pnpm build
   

   • ✅ 成功例：

     ✓ Compiled successfully
     ✓ Linting and checking validity of types
     ✓ Collecting page data
     ✓ Generating static pages
     

   • ❌ 失敗例（ビルドエラーが発生した場合は必ず修正）：

     Type error: Property 'xyz' does not exist on type 'ABC'
     Error: Module not found: Can't resolve '@/...'
     

   重要：ビルドに失敗した場合は、TypeScript の型エラーや import パスの問題を修正し、再度ビルドする必要があります。

3. 検証結果の要約（lint と build がどちらも成功した場合）：

   ✅ Next.js 15 프로젝트 생성 완료!
   ✅ 패키지 설치 완료 (ShadCN, Zustand, Tanstack Query 등)
   ✅ ESLint 검증 통과 (0 errors)
   ✅ TypeScript 빌드 성공
   ✅ 프로덕션 빌드 완료
   

4. プロジェクト情報の提供：

   • フォルダー名：[ユーザーの入力値]（例：my-todo-app）
   • プロジェクト名：[ユーザーの入力値]（例：todo-app）
   • ドメイン：[選択したドメイン]（Todo/Blog/Dashboard/E-commerce/Custom）
   • 選択したスタック：[プリセット名]（ShadCN、Zustand、Tanstack Query など）
   • 主な機能：[ドメイン]の CRUD、API ルート、型安全性
   • 生成されたファイル：XX 個の TypeScript ファイル（app、components、lib）

5. 実行方法の案内：

   cd [폴더명]
   npm run dev
   # http://localhost:3000 에서 확인
   

6. 次のステップの提案（任意、ドメイン別）：

   • Todo：項目の追加・編集・削除、フィルタリング（すべて／進行中／完了）、完了状態の切り替え
   • Blog：記事の作成・編集、一覧・詳細ページ、検索、タグ
   • Dashboard：データの可視化、チャート、ユーザー管理、フィルタリング
   • E-commerce：商品一覧・詳細、カート、注文、カテゴリー
   • 共通：TypeScript の型安全性、API テスト、デプロイ（Vercel）

コア原則

• App Router：Next.js 15 App Router ベースの構成
• 型安全性：TypeScript Strict Mode
• コンポーネントの再利用：ShadCN/ui を活用
• 状態管理：Zustand（クライアント）、Tanstack Query（サーバー）
• コード品質：ESLint + Prettier
• フォーム検証：React Hook Form + Zod

リファレンスファイル

references/setup-guide.md - 完全ガイド

• 基本セットアップ（ドメイン別 CRUD、API Routes、コンポーネント）
• 選択オプション：ShadCN、Zustand、Tanstack Query、Drizzle ORM、Better Auth、Framer Motion

注意事項

• 対話型スキル：ユーザーがドメインとプリセットを選択し、カスタマイズしたアプリを構成します
• ドメイン対応：Todo、Blog、Dashboard、E-commerce、Custom（ユーザー定義）
• プリセット：Full Stack、Essential、Minimal、Custom
• 選択可能な機能：ShadCN、Zustand、Tanstack Query、Drizzle ORM、Better Auth、Framer Motion
• 標準搭載：Next.js 15（App Router）、TypeScript、Tailwind CSS、ESLint
• プラットフォーム：Web（Vercel に最適化）
• 品質保証：
  • すべてのプロジェクトで npm run lint の通過が必須です
  • TypeScript Strict Mode
  • 型安全性を保証します
  • App Router パターンに準拠します
  • ドメインに最適化された UI/UX