Next.js+克劳德代码模板🚀
A. 前沿的Next.js 15模板 随着 克劳德代码超能力 -具有自主数据库管理、完整的身份验证系统、现代UI设计和AI辅助开发工作流程。
✨ 特性
🤖 Claude代码集成
- 数据库自治：Claude Code可以自主修改您的Supabase模式
- 5击杀命令:
/commit,/epct,/create-pr,/fix,/review - MCP服务器：预先配置了Supabase和N8N集成
- 自主移民：安全地创建、测试和部署数据库更改
- GitHub操作：自动化的CI/CD和PR管理
🔐 身份验证（新增！）
- 完整的身份验证系统 使用Supabase身份验证
- 带有玻璃态造型设计的登录和注册页面
- 使用中间件保护路由
- 身份验证挂钩(
useAuth) - 会话管理
- 邮件验证
🎨 现代UI（2025设计）
- 玻璃形态 设计语言
- 深色模式 默认情况下
- 渐变背景
- 平滑过渡和悬停效果
- 移动响应
- 顺风CSS v4
🏗️ 技术栈
- 框架：Next.js 15.5，带应用路由器
- 反应：反应19
- TypeScript：严格模式已启用
- 样式：顺风CSS v4
- 数据库：Supabase（PostgreSQL+身份验证+实时）
- 自动化：N8N工作流（可选）
- 构建工具：涡轮增压器（默认）或Bun支持
📊 数据库管理
- 执行原始SQL查询
- 自主创建/更改表格
- 添加/删除/重命名列
- 创建索引和约束
- 使用回滚运行经过验证的迁移
- 自动生成TypeScript类型
🚀 快速开始
1.使用此模板
# Using degit (recommended)
npx degit MaximeNollevaux/nextjs-claude-template my-app
# Or clone
git clone https://github.com/MaximeNollevaux/nextjs-claude-template my-app
cd my-app
rm -rf .git2.运行安装脚本
npm install
npm run setup安装脚本将：
- 询问您的Supabase凭据
- 询问您的N8N凭据（可选）
- 生成
.env.local - 生成
.claude/.mcp.json - 配置项目
3.初始化辅助数据库
npm run init:supabase这将创建 exec_sql Supabase数据库中的函数，使Claude Code能够自主管理模式更改。
4.开始开发！
npm run dev打开 http://localhost:3000 在您的浏览器中。
🔐 身份验证设置
该模板包括 完整的身份验证系统:
包含的页面
/-登录页面/login-登录页面采用玻璃态造型设计/signup-带有电子邮件验证的注册页面/dashboard-受保护的仪表板（需要身份验证）
运作原理
- 中间件：自动重定向未经身份验证的用户
- 身份验证挂钩:
useAuth()提供用户状态和注销 - 受保护的路线：在中定义
middleware.ts - 会话管理：自动会话刷新
示例：添加受保护的路由
// In middleware.ts
const protectedPaths = ['/dashboard', '/profile', '/settings'];示例：在组件中使用Auth
'use client';
import { useAuth } from '@/lib/hooks/useAuth';
export default function MyComponent() {
const { user, loading, signOut, isAuthenticated } = useAuth();
if (loading) return
Loading...
;
if (!isAuthenticated) return
Please login
;
return (
Welcome {user.email}!
Sign Out
);
}💻 斜杠命令
在Claude Code中键入以下命令以获得即时生产力：
/commit-通过自动生成的消息和推送快速提交/epct-探索、规划、编码、测试工作流程，以实现系统功能/create-pr-使用自动生成的标题和描述创建PR/fix-自动检测并修复错误（TypeScript、ESLint、build）/review-提交前进行全面的代码审查
示例用法
You: /commit
Claude: Analyzing changes... Creating commit...
✓ Committed: "feat: add user profile page"
✓ Pushed to origin/main
You: /epct add user preferences
Claude: 🔍 EXPLORE: Researching user preferences patterns...
📋 PLAN: Creating implementation plan...
💻 CODE: Implementing feature...
🧪 TEST: Running tests...
✓ Feature complete!🎨 UI设计
该模板具有 现代2025设计 与：
玻璃变形症
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);渐变
background: linear-gradient(to br, #1f2937, #111827, #1f2937);平滑过渡
transition: all 0.3s ease;
transform: scale(1.02);所有页面都使用这种设计语言，以获得一致的现代外观。
🤖 自主数据库管理
快速示例
import { sqlHelper } from './scripts/supabase-sql-helper.mjs';
// Add a column
await sqlHelper.addColumn('users', 'bio', 'TEXT');
// Create an index
await sqlHelper.createIndex('users', 'email');
// Run a migration
const migration = {
name: 'add_user_roles',
async up(helper) {
await helper.execSQL(`
CREATE TYPE user_role AS ENUM ('user', 'admin', 'moderator');
`);
await helper.addColumn('users', 'role', "user_role DEFAULT 'user'");
return { success: true };
},
async down(helper) {
await helper.dropColumn('users', 'role');
return { success: true };
}
};
await sqlHelper.runMigration(migration);
// Regenerate TypeScript types
await sqlHelper.regenerateTypes();🔄 GitHub操作
模板包括 自动化工作流程:
CI工作流
- 每次推送和公关都会运行
- 使用ESLint编写Lints代码
- 使用TypeScript进行类型检查
- 构建项目
- 上传构建工件
PR自动分配
- 自动将PR分配给创建者
- 添加尺寸标签（小/中/大/大）
- 添加类别标签（文档、身份验证、数据库等）
Claude代码如何使用它
当Claude创建PR时，GitHub会自动执行以下操作：
- ✅ 运行所有检查
- ✅ 分配PR
- ✅ 添加标签
- ✅ 报告状态
无需人工干预！ 🎉
📁 项目结构
├── .github/
│ ├── workflows/ # GitHub Actions
│ │ ├── ci.yml # CI/CD pipeline
│ │ ├── auto-assign-pr.yml # Auto-assign PRs
│ │ └── pr-label.yml # Auto-label PRs
│ └── labeler.yml # Label configuration
├── .claude/
│ ├── .mcp.json # MCP server configuration
│ ├── commands/ # Slash commands
│ │ ├── commit.md # /commit command
│ │ ├── epct.md # /epct command
│ │ ├── create-pr.md # /create-pr command
│ │ ├── fix.md # /fix command
│ │ └── review.md # /review command
├── scripts/
│ ├── supabase-sql-helper.mjs # Database helper
│ ├── setup-project.mjs # Setup script
│ └── init-supabase.mjs # Supabase initialization
├── src/
│ ├── app/
│ │ ├── login/ # Login page
│ │ ├── signup/ # Signup page
│ │ ├── dashboard/ # Protected dashboard
│ │ ├── layout.tsx # Root layout
│ │ ├── page.tsx # Landing page
│ │ └── globals.css # Global styles
│ ├── components/
│ │ └── auth/ # Auth components
│ └── lib/
│ ├── hooks/
│ │ └── useAuth.ts # Auth hook
│ ├── supabase/
│ │ ├── client.ts # Supabase browser client
│ │ └── server.ts # Supabase server client
│ └── types/
│ └── generated.ts # Auto-generated types
├── middleware.ts # Auth middleware
├── .env.example # Environment variables template
├── .env.local # Your environment (gitignored)
└── README.md🛠️ 可用脚本
npm run dev # Start development server (Turbopack)
npm run dev:bun # Start development server (Bun)
npm run build # Build for production
npm run start # Start production server
npm run lint # Run ESLint
npm run gen:types # Generate TypeScript types from Supabase
npm run setup # Interactive project setup
npm run init:supabase # Initialize Supabase with exec_sql function🎯 为什么是这个模板？
传统发展
- ❌ 克劳德建议改变
- ❌ 你 在Supabase中手动更新数据库
- ❌ 你 手动创建身份验证页面
- ❌ 你 手动配置CI/CD
- ❌ 你 手动重新生成类型
- ❌ 你 承诺并推动
使用此模板
- ✅ 克劳德 探索代码库
- ✅ 克劳德 自主更新数据库
- ✅ 认证系统 开箱即用
- ✅ GitHub操作 配置
- ✅ 克劳德 重新生成类型
- ✅ 克劳德 用途
/commit命令
结果: 开发速度提高10倍更少的错误，一致的模式！ 🚀
🎨 设计展示
登录页面
- 玻璃变形卡
- 渐变背景
- 流畅的动画
- 错误处理
- 登录后重定向
仪表盘
- 受保护的路线
- 用户信息显示
- 带有玻璃效果的统计卡
- 退出按钮
- 现代布局
响应式
- 移动优先设计
- 适用于所有屏幕尺寸
- 触摸友好
🔐 安全
- ✅ 服务角色密钥
.env.local（忽略） - ✅ SELECT查询的只读模式
- ✅ 迁移中的预/后验证
- ✅ 错误时自动回滚
- ✅ 路由的中间件保护
- ✅ 会话管理
- ✅ 邮件验证
📚 文档
🚀 部署
Vercel（推荐）
# Install Vercel CLI
npm i -g vercel
# Deploy
vercel在Vercel仪表板中设置环境变量：
NEXT_PUBLIC_SUPABASE_URLNEXT_PUBLIC_SUPABASE_ANON_KEYSUPABASE_SERVICE_ROLE_KEYSUPABASE_PROJECT_ID
其他平台
- Netlify：开箱即用
- 铁路：配置环境变量
- AWS Amplify：添加构建设置
🤝 贡献
欢迎投稿！此模板旨在：
- 可扩展：添加您自己的命令和模式
- 可定制的：适应您的需求
- 可共享的：用作项目的基础
📝 许可证
麻省理工学院许可证-欢迎将此模板用于任何项目！
🙏 致谢
🎁 包含内容
- ✅ Next.js 15与应用路由器
- ✅ TypeScript严格模式
- ✅ 顺风CSS v4
- ✅ 完整的身份验证系统
- ✅ 玻璃造型设计
- ✅ 数据库自治工具
- ✅ 5个斜线命令
- ✅ GitHub操作CI/CD
- ✅ MCP服务器配置
- ✅ 交互式设置脚本
- ✅ 自动生成的类型
- ✅ 受保护的路由中间件
- ✅ 身份验证挂钩
- ✅ 现代UI组件
🌟 明星历史
如果你觉得这个模板有用，请考虑给它一颗星⭐
______________________________________________________________________
由...制作❤️ 通过 马克西姆·诺尔沃
开始用人工智能辅助开发构建令人惊叹的东西！ 🚀
问题？ 在GitHub上打开一个问题或讨论。
需要帮助？ 查看中的文档 .claude/ 目录。