MCP create test

时间交易应用程序

使用Next.js和Supabase的时间交易应用程序。

技术堆栈

• 前端：Next.js 16（应用路由器）
• 语言：TypeScript
• 样式：尾风CSS
• 数据库：Supabase
• 测试：剧作家

开始

1.安装依赖性

npm install

2.设置环境变量

.env.local 修改文件以输入Supabase项目信息：

NEXT_PUBLIC_SUPABASE_URL=your-project-url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key

Supabase项目信息 Supabase仪表板可以在中查看。

3.运行开发服务器

npm run dev

在浏览器中 http://localhost:3000请打开确认。

项目结构

.
├── app/                  # Next.js App Router 페이지
│   ├── layout.tsx       # 루트 레이아웃
│   ├── page.tsx         # 홈페이지
│   └── globals.css      # 전역 스타일
├── lib/                  # 유틸리티 및 설정
│   ├── supabase.ts      # 클라이언트 사이드 Supabase 클라이언트
│   └── supabase-server.ts # 서버 사이드 Supabase 클라이언트
└── .env.local           # 환경 변수 (gitignore됨)

Supabase使用方法

用于客户端组件

'use client'

import { supabase } from '@/lib/supabase'

export default function MyComponent() {
  // Supabase 사용 예시
  const fetchData = async () => {
    const { data, error } = await supabase.from('your_table').select('*')
  }

  return 
...

}

用于服务器组件

import { createServerClient } from '@/lib/supabase-server'

export default async function MyServerComponent() {
  const supabase = await createServerClient()
  const { data, error } = await supabase.from('your_table').select('*')

  return 
...

}

可用命令

npm run dev      # 개발 서버 실행
npm run build    # 프로덕션 빌드
npm run start    # 프로덕션 서버 실행
npm run lint     # ESLint 실행

Claude Code MCP集成

该项目设置了Claude Code和Supabase模型上下文协议（MCP）集成。

MCP设置

配置了MCP服务器，Claude Code可以直接与Supabase数据库进行交互：

• MCP服务器: @supabase/mcp-server-supabase
• 设置位置: ~/.claude.json 文件的特定项目设置
• 环境变量: .env.local使用的Supabase凭据

使用方法

1. 重新启动Claude Code以加载MCP服务器
2. Claude Code中 /mcp 验证通过命令连接的MCP服务器
3. 向Claude请求数据库操作：

- 创建/查询表格 - 数据CRUD操作 - 验证和修改方案

注意事项

• MCP服务器 .env.local使用的凭据
• 更改Supabase URL或密钥 .claude.json 必须同时更新文件
• MCP连接问题可能需要重新启动Claude Code

下一步

1. 在Supabase仪表板上设置数据库模式
2. 设置身份验证（Authentication）
3. 实施API路由和服务器动作
4. UI组件开发