nextjs15-init

NextJS 15 Init Skill

创建基于领域的 Next.js 15 项目，并使用现代技术栈自动完成配置。 选择 Todo、Blog、Dashboard、E-commerce 或 Custom 领域，即可立即生成基于 App Router 的完整 CRUD 应用。

快速开始

运行技能时，会要求输入以下信息：

• 文件夹名称（例如：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

任务说明

IMPORTANT：此技能将以交互方式进行。

步骤 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 优先的 ORM）
• ✅ Better Auth（身份验证）
• ✅ Framer Motion（动画）
• ✅ Lucide Icons

D) Custom（自定义选择）

• 单独选择各项功能

您想选择哪个领域和预设？（领域：A/B/C/D/E，预设：A/B/C/D）"

步骤 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：基本列表/详情
   • Components：基本 CRUD 组件
   • Store：基本 store
   • Validation：基本 schema

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 均成功后，才能进入下一步。

Step 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 Routes、类型安全
   • 生成的文件：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