Supabase 入门指南：让前端开发者也能轻松搞定后端的神器

## 先说点实在的 你是不是经常遇到这种情况：想做个小项目练手，前端三下五除二搞定了，但一想到后端就头大——要搭数据库、写 API、做用户认证、处理文件上传...最后直接放弃了？ 别急，今天介绍的 Supabase 就是来拯救你的。简单来说，**它就是一个开源版的 Firebase**，但用的是大家更熟悉的 PostgreSQL 数据库，而且完全免费就能搞定大部分需求。 https://appstore.lazycat.cloud/#/shop/detail/cloud.lazy.app.supabase ## Supabase 到底是个啥？ Supabase 是一个 Postgres 开发平台，提供了托管的 Postgres 数据库、身份认证和授权、自动生成的 API、函数、文件存储、AI 和向量/嵌入工具包，以及管理面板等功能。 听起来很厉害对吧？其实说白了就是：**你只需要会写前端代码，Supabase 帮你搞定所有后端的事儿**。 ### 核心功能 - **PostgreSQL 数据库**：不是那种简单的 NoSQL，而是功能完整的关系型数据库 - **用户认证**：邮箱密码、第三方登录（Google、GitHub 等）统统支持 - **实时数据同步**：数据一变化，所有用户立马能看到，做聊天室、协作工具特别方便 - **自动生成 API**：建好表就自动有了 REST API，不用自己写接口 - **文件存储**：图片、视频上传下载，跟用网盘一样简单 - **行级权限控制**：谁能看什么数据，精确到每一行 最爽的是，**这些功能在免费套餐里就够用了**！对于个人项目和小型应用来说，基本不花钱就能搞定。 ## 5分钟快速上手 应用启动后，会引导你设置账户密码，登录后进入首页：  ### 创建你的第一个表 进入项目后，点击左侧的 "Table Editor"，创建一个 todos 表： ```sql -- 在 SQL Editor 里运行这段代码 create table todos ( id serial primary key, task text not null, is_complete boolean default false, created_at timestamp with time zone default timezone('utc'::text, now()) ); -- 开启实时同步功能 alter publication supabase_realtime add table todos; ```  ### 在前端使用 安装 Supabase 客户端库，通过 npm 安装 @supabase/supabase-js，然后使用项目 URL 和 API 密钥初始化客户端： ```bash npm install @supabase/supabase-js ```  点击右上角，在这里拿到你的项目 URL 和密钥  创建一个简单的 Todo 应用： ```javascript // 初始化 Supabase 客户端 import { createClient } from '@supabase/supabase-js' const supabaseUrl = 'https://你的项目ID.supabase.co' const supabaseKey = '你的匿名密钥' const supabase = createClient(supabaseUrl, supabaseKey) // 添加任务 async function addTodo(task) { const { data, error } = await supabase .from('todos') .insert([{ task: task }]) if (error) console.log('出错了：', error) else console.log('添加成功！', data) } // 获取所有任务 async function getTodos() { const { data, error } = await supabase .from('todos') .select('*') .order('created_at', { ascending: false }) return data } // 标记完成 async function completeTodo(id) { const { error } = await supabase .from('todos') .update({ is_complete: true }) .eq('id', id) } // 删除任务 async function deleteTodo(id) { const { error } = await supabase .from('todos') .delete() .eq('id', id) } ``` 本地运行后的效果，添加一条记录：  就这么简单！不需要写任何后端代码，你已经有了一个完整的 CRUD 应用。 ## 进阶玩法：实时协作 Supabase 的实时功能允许你监听数据库的变化，比如监听 messages 表的插入操作，当有新消息时实时更新。想做个多人实时协作的 Todo 应用？加几行代码就搞定： ```javascript // 监听 todos 表的变化 supabase .channel('todos-channel') .on('postgres_changes', { event: '*', schema: 'public', table: 'todos' }, (payload) => { console.log('数据变化了！', payload) // 根据变化类型更新界面 if (payload.eventType === 'INSERT') { // 有人添加了新任务 addTodoToUI(payload.new) } else if (payload.eventType === 'UPDATE') { // 有人更新了任务 updateTodoInUI(payload.new) } else if (payload.eventType === 'DELETE') { // 有人删除了任务 removeTodoFromUI(payload.old.id) } } ) .subscribe() ``` 现在你的应用就支持多人实时协作了！任何人的操作，其他人都能立即看到。 ## 实战项目推荐 ### 1. 实时聊天室 利用 Supabase 的实时功能，20 分钟就能做出来： ```javascript // 发送消息 async function sendMessage(message) { await supabase.from('messages').insert([{ content: message, user_id: (await supabase.auth.getUser()).data.user.id, username: (await supabase.auth.getUser()).data.user.email }]) } // 监听新消息 supabase .channel('messages') .on('postgres_changes', { event: 'INSERT', schema: 'public', table: 'messages' }, (payload) => { displayMessage(payload.new) } ) .subscribe() ``` 项目首页提供了各个项目的源码，可以下载下来运行一下  ## 与 Next.js 完美集成 Next.js 14 与 Supabase 的集成变得更加简单，通过 Server Components 可以在服务器端直接操作数据库，通过 Server Actions 可以将数据变更逻辑放在负责获取数据和渲染页面的组件旁边： ```javascript // app/todos/page.js import { createClient } from '@/utils/supabase/server' export default async function TodosPage() { const supabase = createClient() // 直接在服务器组件中获取数据 const { data: todos } = await supabase .from('todos') .select('*') .order('created_at', { ascending: false }) // Server Action：处理表单提交 async function addTodo(formData) { 'use server' const task = formData.get('task') const supabase = createClient() await supabase.from('todos').insert([{ task }]) revalidatePath('/todos') } return ( <div> <form action={addTodo}> <input name="task" placeholder="添加新任务..." /> <button type="submit">添加</button> </form> <ul> {todos.map(todo => ( <li key={todo.id}>{todo.task}</li> ))} </ul> </div> ) } ``` ## 总结 Supabase 特别适合： - 个人项目和 Side Project - MVP 快速验证 - 中小型 SaaS 应用 - 实时协作类应用 - 不想折腾后端的前端开发者 最重要的是，它的免费额度对个人开发者来说完全够用： - 500MB 数据库空间 - 2GB 文件存储 - 5万月活用户 - 200万 Edge Function 调用 --- **相关资源：** - [Supabase 官方文档](https://supabase.com/docs) - [GitHub 仓库](https://github.com/supabase/supabase) - [Discord 社区](https://discord.supabase.com) - [视频教程合集](https://www.youtube.com/@Supabase)