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分钟快速上手

应用启动后，会引导你设置账户密码，登录后进入首页：

![image.png](https://dl.playground.lazycat.cloud/guidelines/496/d2bfdd7e-4084-4d18-8e7c-e0941283280f.png "image.png")

### 创建你的第一个表

进入项目后，点击左侧的 "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;
```

![image.png](https://dl.playground.lazycat.cloud/guidelines/496/57cafe46-877d-42e6-928b-d13ea6226209.png "image.png")
### 在前端使用

安装 Supabase 客户端库，通过 npm 安装 @supabase/supabase-js，然后使用项目 URL 和 API 密钥初始化客户端：

```bash
npm install @supabase/supabase-js
```

![image.png](https://dl.playground.lazycat.cloud/guidelines/496/4ecd2c22-e5da-4965-b889-680a5bd2cfc8.png "image.png")

点击右上角，在这里拿到你的项目 URL 和密钥

![image.png](https://dl.playground.lazycat.cloud/guidelines/496/564cc203-21b4-4003-a8db-16ed61ae08c0.png "image.png")
创建一个简单的 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)
}
```
本地运行后的效果，添加一条记录：

![image.png](https://dl.playground.lazycat.cloud/guidelines/496/9f4efcf5-cf5b-465f-a787-9b96784f9843.png "image.png")

就这么简单！不需要写任何后端代码，你已经有了一个完整的 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()
```
项目首页提供了各个项目的源码，可以下载下来运行一下

![image.png](https://dl.playground.lazycat.cloud/guidelines/496/f098adee-3b08-489c-be6d-266d772aaf01.png "image.png")

## 与 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 (
    
      
        
        添加
      
      
      
        {todos.map(todo => (
          {todo.task}
        ))}
      
    
  )
}
```
 

## 总结

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)