本文介绍了Supabase这个开源的Firebase替代品,并详细讲解了如何开始使用Supabase。文章涵盖了从注册账号、创建组织、设置数据表到安装必要库的全过程,并提供了一个使用Next.js创建简单demo的实例。对于想要快速上手Supabase的开发者来说,这是一篇实用的入门指南。
Supabase 是一个开源的 Firebase 替代品,它提供了一套用于构建网络和移动应用程序的工具。它提供的主要功能包括:
- 实时数据库:一个具有实时功能的 PostgreSQL 数据库。
- 身份验证:内置的用户管理和身份验证服务。
- 自动生成的 API: 基于您的数据库模式即时生成 RESTful 和 GraphQL API。
- 存储:用于管理大型文件(如照片和视频)的系统。
- Edge Functions: 用于运行自定义后端代码的无服务器函数。
在我看来 Supabase 解决了 2 个主要的问题：
- 作为 Firebase 的开源平替，可以部署到自己的服务器
- 简化了后端数据库的操作难度，提供了 SQL 可视化界面和多客户端的 SDK，从此前端不求人
本文将带你从注册账号开始，用 Next.js 做一个展示支付账单列表的小 demo。
如何使用
注册账号
打开 https://supabase.com/ 注册账号，当然也可以使用 Google 账号登录。在验证完邮箱后，你就拥有了一个 Supabase 的账户。
创建组织
输入组织名称，类型和付费计划保持不变。对于个人开发以及测试，Free Plan 就已经足够了。
创建数据表
打开左侧面板的 Table Editor，在此创建你项目中用到的所有的表。Supabase 的数据库其实是一个 PostgreSQL，你兴趣的同学可以学习下 PostgreSQL 相关知识，不学也不影响后面的 CRUD，因为这套东西 Supabase 已经为你封装好。
设置 RLS 权限
注意：Postgres 有个 RLS 的特性，Supabase 默认是启用的。启用后你就需要对增、删、改、查这四个操作单独设置权限，这里为了方便，就直接 Disable 了。
安装 Supabase 的库
我们用的 Next.js 作为示例，首先初始化我们的项目
npx create-next-app@latest
然后安装 Supabase 的库
@supabase/supabase-js
开始使用
在 Next.js 项目的 app 目录下创建一个 utils/supbase.js 并导出 supbase 对象
import { createClient } from '@supabase/supabase-js'
const supabaseUrl = 'https://rabzxkydgcjekktdboyn.supabase.co'
const supabaseKey = process.env.SUPABASE_KEY
const supabase = createClient(supabaseUrl, supabaseKey)
export default supabase
创建 page.js 并使用下面的方式获取数据
async function fetchPayments() {
try {
const { data, error } = await supabase
.from('payments')
.select('*')
.order('created_at', { ascending: false })
if (error) throw error
setPayments(data)
} catch (error) {
console.error('Error fetching payments:', error.message)
} finally {
setLoading(false)
}
}