nextjs15-init

NextJS 15 Init Skill

Creates a domain-based Next.js 15 project and automatically configures it with a modern stack. By selecting Todo, Blog, Dashboard, E-commerce, or a Custom domain, you can immediately generate a complete CRUD app based on the App Router.

Quick Start

When the skill runs, it receives the following information:

• Folder name (e.g., my-todo-app)
• Project name (e.g., todo-app)
• Domain selection (Todo/Blog/Dashboard/E-commerce/Custom)
• Stack preset (Minimal/Essential/Full Stack/Custom)

After that, the following steps run automatically:

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

2. Install packages

npm install

3. Automatically generate the domain-specific App Router structure - app/[domain]/ (pages) - components/[domain]/ (components) - lib/stores/[domain].ts (Zustand store) - lib/api/[domain].ts (API logic) - lib/validations/[domain].ts (Zod schema) 4. Code quality verification (required)

npm run lint

5. Run the development server

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 (쇼핑몰)**
- 필드: 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-first 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을 사용하시겠습니까? (예/아니오)

### Step 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**: title, description, completed, createdAt, updatedAt
- API Routes: /api/todos (CRUD)
- Pages: /todos (리스트), /todos/[id] (상세)
- Components: TodoList, TodoItem, TodoForm
- Store: useTodoStore (Zustand)
- Validation: todoSchema (Zod)

**B) Blog**: title, content, excerpt, slug, published, createdAt, updatedAt
- API Routes: /api/posts (CRUD)
- Pages: /blog (목록), /blog/[slug] (상세), /blog/write (작성)
- Components: PostList, PostCard, PostEditor
- Store: usePostStore (Zustand)
- Validation: postSchema (Zod)

**C) Dashboard**: 통계, 차트, 사용자 관리
- API Routes: /api/analytics, /api/users
- Pages: /dashboard (메인), /dashboard/users (사용자)
- Components: Chart, StatsCard, DataTable
- Store: useDashboardStore (Zustand)
- Validation: userSchema (Zod)

**D) E-commerce**: name, price, description, images, stock, category
- API Routes: /api/products, /api/cart, /api/orders
- Pages: /products (목록), /products/[id] (상세), /cart (장바구니)
- Components: ProductCard, ProductGrid, Cart
- Store: useCartStore, useProductStore (Zustand)
- Validation: productSchema, cartSchema (Zod)

**E) Custom**: 사용자 정의 필드
- API Routes: 기본 CRUD
- Pages: 기본 List/Detail
- Components: 기본 CRUD 컴포넌트
- Store: 기본 store
- Validation: 기본 schema

5. **ShadCN 설치 및 구성** (Essential 이상):
```bash
npx shadcn@latest init
npx shadcn@latest add button card input form table

1. Code verification and error fixing:

   a. npm run lint run

   b. Fix discovered errors:

   • Import paths: Use @/ alias (tsconfig.json setting)
   • TypeScript types: Specify all types
   • ESLint rules: Remove unused variables and imports
   • Next.js rules: metadata, generateStaticParams 등
   • 'use client' directive: Add at the top of the file when using React Hooks such as useState, useEffect

   c. npm run build or pnpm build run

   d. Fix build errors:

   • TypeScript type errors: Type mismatches, missing nullable checks, etc.
   • Module import errors: Check paths, check package installation
   • Server/Client Component errors: Add the appropriate 'use client' directive
   • Dynamic import errors: Ensure server-only code is not used on the client

   e. Re-verify: Repeat until both lint and build succeed

   f. Goal:

   • npm run lint result is "0 errors"
   • npm run build or pnpm build success

   ✅ CRITICAL: This step is required. Both lint and build must succeed before proceeding to the next step.

Step 4: Final verification and guidance

✅ CRITICAL: This step is a required condition for project completion. Both lint and build must succeed.

1. ESLint verification:

   npm run lint
   

   • ✅ Success example:

     ✔ No ESLint warnings or errors
     

   • ❌ Failure example (if there are errors, they must be fixed):

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

2. Production build verification:

   npm run build
   

   Or when using pnpm:

   pnpm build
   

   • ✅ Success example:

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

   • ❌ Failure example (if a build error occurs, it must be fixed):

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

   Important: If the build fails, you must fix the TypeScript type errors or import path issues and build again.

3. Verification Result Summary (if both lint and build succeed):

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

4. Provide project information:

   • Folder name: [user input value] (e.g., my-todo-app)
   • Project name: [user input value] (e.g., todo-app)
   • Domain: [selected domain] (Todo/Blog/Dashboard/E-commerce/Custom)
   • Selected stack: [preset name] (ShadCN, Zustand, Tanstack Query, etc.)
   • Key features: [domain] CRUD, API Routes, type safety
   • Generated files: XX TypeScript files (app, components, lib)

5. Run instructions:

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

6. Next step suggestions (optional, per domain):

   • Todo: Add/edit/delete items, filtering (all/in progress/completed), toggle completion
   • Blog: Create/edit posts, list/detail pages, search, tags
   • Dashboard: Data visualization, charts, user management, filtering
   • E-commerce: Product list/detail, cart, orders, categories
   • Common: TypeScript type safety, API testing, deployment (Vercel)

Core Principles

• App Router: Next.js 15 App Router-based structure
• Type safety: TypeScript Strict Mode
• Component reusability: Using ShadCN/ui
• State management: Zustand (client), Tanstack Query (server)
• Code quality: ESLint + Prettier
• Form validation: React Hook Form + Zod

Reference Files

references/setup-guide.md - Complete guide

• Basic setup (domain-specific CRUD, API Routes, components)
• Optional options: ShadCN, Zustand, Tanstack Query, Drizzle ORM, Better Auth, Framer Motion

Notes

• Interactive skill: Configure a tailored app by having the user select a domain and preset
• Domain support: Todo, Blog, Dashboard, E-commerce, Custom (user-defined)
• Preset provision: Full Stack, Essential, Minimal, Custom
• Selectable features: ShadCN, Zustand, Tanstack Query, Drizzle ORM, Better Auth, Framer Motion
• Included by default: Next.js 15 (App Router), TypeScript, Tailwind CSS, ESLint
• Platform: Web (Vercel optimized)
• Quality assurance:
  • All projects must pass npm run lint required
  • TypeScript Strict Mode
  • Ensure type safety
  • Follow App Router patterns
  • Domain-optimized UI/UX