快速接入

先看主来源和安装命令，再打开仓库或文档；下面只保留这个条目的关键接入事实。

命令预览

npx degit MaximeNollevaux/nextjs-claude-template my-app

详细介绍

Next.js+克劳德代码模板🚀

A. 前沿的Next.js 15模板 随着 克劳德代码超能力 -具有自主数据库管理、完整的身份验证系统、现代UI设计和AI辅助开发工作流程。

![CI](https://github.com/MaximeNollevaux/nextjs-claude-template/actions/workflows/ci.yml) ![License: MIT](https://opensource.org/licenses/MIT)

✨ 特性

🤖 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 .git

2.运行安装脚本

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查询的只读模式
✅ 迁移中的预/后验证
✅ 错误时自动回滚
✅ 路由的中间件保护
✅ 会话管理
✅ 邮件验证

📚 文档

数据库自治指南 -完整指南（即将推出）
快速数据库参考 -快速参考（即将推出）
斜杠命令 -请参阅 .claude/commands/ 目录

🚀 部署

Vercel（推荐）

# Install Vercel CLI
npm i -g vercel

# Deploy
vercel

在Vercel仪表板中设置环境变量：

NEXT_PUBLIC_SUPABASE_URL
NEXT_PUBLIC_SUPABASE_ANON_KEY
SUPABASE_SERVICE_ROLE_KEY
SUPABASE_PROJECT_ID

其他平台

Netlify：开箱即用
铁路：配置环境变量
AWS Amplify：添加构建设置

🤝 贡献

欢迎投稿！此模板旨在：

可扩展：添加您自己的命令和模式
可定制的：适应您的需求
可共享的：用作项目的基础

📝 许可证

麻省理工学院许可证-欢迎将此模板用于任何项目！

🙏 致谢

内置于 Next.js
由...驱动克劳德代码
数据库按 Supabase
自动化 N8N

🎁 包含内容

✅ Next.js 15与应用路由器
✅ TypeScript严格模式
✅ 顺风CSS v4
✅ 完整的身份验证系统
✅ 玻璃造型设计
✅ 数据库自治工具
✅ 5个斜线命令
✅ GitHub操作CI/CD
✅ MCP服务器配置
✅ 交互式设置脚本
✅ 自动生成的类型
✅ 受保护的路由中间件
✅ 身份验证挂钩
✅ 现代UI组件

🌟 明星历史

如果你觉得这个模板有用，请考虑给它一颗星⭐

______________________________________________________________________

由...制作❤️ 通过马克西姆·诺尔沃

开始用人工智能辅助开发构建令人惊叹的东西！ 🚀

问题？ 在GitHub上打开一个问题或讨论。

需要帮助？ 查看中的文档 .claude/ 目录。

目录标签

数据分析Next.jsClaudeTypeScript本地部署ClaudeCode数据库管理认证系统现代UI

支持客户端

Claude

接入字段

传输方式（transport，传输协议）

stdio

鉴权方式（authType，认证方式）

session

运行时（runtime，运行环境）

Node.js

来源包（packageName，安装包名）

degit

工具数量（toolCount，工具数）

5

资源数量（resourceCount，资源数）

0

提示词数量（promptCount，提示词数）

0

权限和风险

stdiosession部署方式未说明

接入前请确认传输方式、认证方式和部署位置，并根据实际工具能力限制访问范围。

安装前确认

不要直接授予不必要的文件、网络或账号权限；先核对安装命令和配置内容。

来源信息

MCP World

mcpworld.com

/detail/c6d49a97aa8636113180208afd2d14aa

一个集成了Claude Code功能的Next.js 15模板，提供自主数据库管理、完整认证系统和现代UI设计，支持AI辅助开发工作流。

继续浏览同类 MCP

更多数据服务 MCP（6,870）返回 MCP 目录

上一个 MCP

Next15 Todo MCP

一个基于Next.js 15的全栈待办应用，集成SQLite数据库和MCP端点，支持AI助手访问。

下一个 MCP

Next Supa File AI

一个基于Next.js和Supabase的AI文件分析平台，支持拖放上传、知识库创建和MCP集成，实现无缝平台连接。

Nextjs Claude Template