Next.js 15 + Claude Code 是目前搭建现代全栈应用最高效的组合。Claude Code 理解 App Router 架构、Server Components、Prisma 等 Next.js 生态，能大幅加速从设计到部署的整个流程。
初始化项目
bash
npx create-next-app@latest my-app \
--typescript --tailwind --eslint \
--app --src-dir --import-alias '@/*'
cd my-app
claude工作流 1：让 Claude Code 熟悉项目
Read the project structure. This is a Next.js 15 app using:
- App Router (src/app/)
- TypeScript strict mode
- Tailwind CSS
- shadcn/ui components
Confirm you understand the conventions before we start building.
工作流 2：生成完整页面路由
Create a blog section with these routes:
- /blog -> list page (src/app/blog/page.tsx)
- /blog/[slug] -> detail page (src/app/blog/[slug]/page.tsx)
- /blog/[slug]/loading.tsx -> loading UI
- /blog/[slug]/not-found.tsx -> 404 page
Use Server Components for data fetching.
Add generateStaticParams for SSG.
Style with Tailwind CSS.
工作流 3：Server Actions + 表单
Create a contact form with Server Actions:
- src/app/contact/page.tsx (Client Component with form)
- src/app/actions/contact.ts (Server Action)
Server Action should:
1. Validate with Zod schema
2. Save to database (Prisma)
3. Send email notification (Resend API)
4. Return typed result: {success: boolean, message: string}
Form should show loading state and success/error feedback.
工作流 4：Prisma 数据库设置
Set up Prisma with PostgreSQL for this Next.js app:
1. Install prisma and @prisma/client
2. Create prisma/schema.prisma with models:
- User (id, email, name, createdAt)
- Post (id, title, slug, content, published, authorId, createdAt)
- Tag (id, name, posts)
3. Create src/lib/prisma.ts singleton client
4. Add DATABASE_URL to .env.example
5. Create seed script: prisma/seed.ts
工作流 5：NextAuth 认证
Add authentication with NextAuth v5 (Auth.js):
1. Install next-auth@beta
2. Create auth.ts config with:
- Google OAuth provider
- GitHub OAuth provider
- Credentials provider (email/password)
- Prisma adapter
3. Create src/app/api/auth/[...nextauth]/route.ts
4. Add middleware.ts for protected routes (/dashboard/*)
5. Create login page at src/app/login/page.tsx
6. Add session to layout with SessionProvider
工作流 6：API Routes (Route Handlers)
Create REST API endpoints:
src/app/api/posts/route.ts -> GET (list), POST (create)
src/app/api/posts/[id]/route.ts -> GET, PUT, DELETE
Requirements:
- Auth check: only authenticated users can POST/PUT/DELETE
- Validate request body with Zod
- Return proper HTTP status codes
- Include proper TypeScript types for request/response
工作流 7：shadcn/ui 组件集成
Install shadcn/ui and set up:
1. Run: npx shadcn@latest init
2. Add components: button, card, input, form, dialog, table, badge
3. Create a reusable DataTable component using shadcn Table
that works with TanStack Table v8
4. Create a PostCard component using shadcn Card
工作流 8：性能优化
Optimize this Next.js app for performance:
1. Add next/image to all img tags with proper sizes
2. Add loading.tsx to all dynamic routes
3. Convert appropriate Client Components to Server Components
4. Add Suspense boundaries around async components
5. Add metadata (generateMetadata) to all pages for SEO
6. Check bundle size: npm run build and analyze
工作流 9：测试
Set up testing for this Next.js app:
1. Install Vitest + @testing-library/react
2. Configure vitest.config.ts
3. Write unit tests for Server Actions in src/app/actions/
4. Write component tests for key UI components
5. Write integration tests for API routes using fetch mock
Goal: >80% coverage on business logic
工作流 10：Vercel 部署
Prepare this app for Vercel deployment:
1. Check all environment variables -> update .env.example
2. Add vercel.json if any custom config needed
3. Ensure prisma generate runs on build
(add to package.json scripts: "postinstall": "prisma generate")
4. Review next.config.ts for production settings
5. Add proper error boundaries
6. Generate deployment checklist
推荐的 CLAUDE.md 配置
markdown
## Tech Stack
- Next.js 15 App Router
- TypeScript strict
- Tailwind CSS + shadcn/ui
- Prisma + PostgreSQL
- NextAuth v5
## Conventions
- Server Components by default, Client only when needed
- Server Actions for mutations (not API routes)
- Zod for all validation
- Named exports (no default exports)
- Path alias: @/* maps to src/*
## Commands
- dev: npm run dev
- test: npm run test
- build: npm run build
- db: npx prisma studio时效对比
| 任务 | 手写时间 | Claude Code |
|---|---|---|
| 项目初始化 + 配置 | 2-3 小时 | 10 分钟 |
| 认证系统（NextAuth） | 1-2 天 | 30 分钟 |
| CRUD + 数据库 | 1-2 天 | 1 小时 |
| 完整 Landing 页面 | 半天 | 15 分钟 |
| 测试覆盖（80%） | 1-2 天 | 1 小时 |
来源：Anthropic 官方文档 + Next.js 官方文档