supabase-nextjs

supabase-nextjs 技能概览

这个技能能做什么

supabase-nextjs 技能帮助你用 Supabase 来做认证、存储和实时能力，同时用 Drizzle ORM 处理数据库查询，构建一个基于 Next.js App Router 的应用。它最适合想把服务端渲染的应用逻辑和后端服务清晰分开的团队，而不是那种“把所有东西都连上”的通用提示词。

最适合谁

如果你正在启动或扩展一个需要登录、注册、受保护路由、服务端会话处理和类型化数据库访问的 Next.js 应用，就适合使用 supabase-nextjs 技能。它尤其适用于 supabase-nextjs for Backend Development 这类工作流：你希望认证用一套模式，SQL 查询用另一套模式。

关键决策点

supabase-nextjs 技能的核心区别在于架构选择：用 Drizzle 负责数据访问，用 Supabase 负责认证和存储，并且默认采用 server components。这样在决定代码应该放在哪里、会话如何流转、何时该用 client components 时，歧义会少很多。

如何使用 supabase-nextjs 技能

安装并启用它

通过你的技能管理器执行 supabase-nextjs install 这一步，然后把 agent 指向与你这套技术栈匹配的仓库上下文。如果你的环境支持，也可以用 npx skills add alinaqi/claude-bootstrap --skill supabase-nextjs 安装，并在请求代码修改前确认技能已经挂载成功。

先给技能正确的起始说明

最好的 supabase-nextjs usage 不是从“帮我搭 Supabase”开始，而是从一个具体应用目标开始。说明你在做什么、哪些内容必须经过认证、哪些数据需要读写。好的输入示例如：“添加邮箱/密码登录，保护 /dashboard，创建 projects 表，并在服务端获取当前用户的行数据。”

先读对文件

先看 SKILL.md，然后检查项目里的 src/app/**、src/db/** 和 supabase/**（如果存在）。在这个技能里，最有价值的实现线索通常是服务端/客户端拆分、认证路由处理、Drizzle schema 的形状，以及任何控制会话状态的 middleware 或 helper 文件。

把模糊需求改写成可用提示词

像“让认证正常工作”这种请求太宽泛了。更好的提示词会明确路由、认证方式、数据模型和渲染边界，例如：“在 src/app/(auth)/callback/route.ts 中实现 Supabase OAuth 回调处理，保持 dashboard 由服务端渲染，并在登录后用 Drizzle 加载当前用户的 profile。” 这种细节能让 supabase-nextjs guide 产出的代码更贴合仓库，而不是额外堆一层无关脚手架。

supabase-nextjs 技能常见问题

这个技能只适合新项目吗？

不是。supabase-nextjs 技能既适合从零搭建，也适合给现有 Next.js 应用加上 Supabase 认证或基于 Drizzle 的查询。它在仓库已经使用 App Router，或者正准备迁移到 App Router 时，价值最大。

为什么不用通用提示词？

通用提示词往往会把 client components、server components、Supabase client 用法和数据库查询的职责混在一起。supabase-nextjs 技能内置了更清晰的模式，因此通常意味着更少的认证流程错误、更少的会话混乱，以及更干净的数据访问决策。

我需要有 Supabase 经验吗？

不一定。只要能描述期望的流程，并接受仓库已有约定，初学者也可以使用 supabase-nextjs skill。主要风险不在 Supabase 本身，而在于没有把数据放在哪里、哪些路由必须受保护说明清楚。

什么情况下不该用它？

如果你的应用不用 Next.js、不使用 Supabase 服务，或者你想要的是没有服务端认证和数据库逻辑的纯前端脚手架，就跳过这个技能。它也不适合你只想用 Prisma-only 模式，或者想要完全客户端化的 Supabase 集成。

如何改进 supabase-nextjs 技能

明确指定认证和数据流

最强的输出来自明确谁登录、他们能看到什么、数据从哪里取的输入。例如：“匿名用户可以浏览营销页，已认证用户可以看到 /dashboard，所有项目读取必须通过 Drizzle 在服务端完成。” 这样可以帮助 supabase-nextjs 技能避免把公开逻辑和受保护逻辑混在一起。

先说明你的技术栈边界

提前告诉 agent 你是否已经有 Supabase 表、Drizzle migrations、middleware、环境变量或认证路由。如果其中任何一项还没有，也要明确说出来；否则技能可能会默认应用已经部分配置好，生成的代码就不一定能直接跑通。

注意常见失败模式

常见错误包括：本该由 Drizzle 查询的地方却用了 Supabase；把只能在服务端运行的代码放进 client components；或者没有定义清楚 callback 和 middleware 的行为。如果第一次结果显得过于通用，就要求它缩小范围：只处理路由、只处理 schema，或者只处理认证接线。

结合具体仓库约束迭代

在第一版输出之后，可以继续加入文件路径、命名规范、是否要用 RSC、route handlers 或 client components 之类的限制来提升结果。supabase-nextjs skill 最擅长的是一次做完一个完整的纵向切片，然后再补下一个路由、数据表或会话规则。