Supabase 集成

Supabase 是一个开源的 Firebase 替代方案，提供后端即服务 (BaaS) 功能，包括数据库、身份验证、存储和实时功能，帮助开发者快速构建应用。

在 Next.dev 模板中，我们使用 Supabase 的数据库和身份验证服务。其中，获取 Supabase 的 API 密钥是模板的必要步骤。

接下来，我介绍一下 Supabase 在 Nexty.dev 模板中的集成流程。

注册与创建项目

1. 访问 Supabase 官网，你可以通过上一步创建的域名邮箱注册。

2. 注册完成后，点击「new project」

3. 输入项目信息，然后点击「Create new project」。

初始化数据库

在我宣传 Nexty.dev 模板的时候，会强调「模板内置了xx功能」，这些功能的基础其实来自于一套完整的数据库结构设计。

我们在代码仓库的 data 文件夹中提供了所有必需的 SQL 文件，你只需要执行这些文件就能完成数据库的初始化。

💡

完善的数据库设计是 Nexty.dev 模板的一大特色。我们的 SQL 文件不仅包含了基础的表结构定义，还包含了完整的 Indexes（索引设计）、Triggers（触发器逻辑）、Functions（相关函数）和 Policies（权限设计）。
在我了解过的同类模板中，只有 Nexty.dev 提供这样全面的数据库设计。

打开 SQL Editor，点击「Create a new snippet」，依次执行 data 文件夹下的所有 SQL 文件

执行完成后，打开 Table Editor，你就能看到所有 Nexty.dev 模板内置的表。

打开 Database 模块，你能看到所有设计的 Indexes、Triggers、Functions 和 Policies。

配置 Supabase Auth

Nexty.dev 模板默认支持 Supabase Auth 的 Google 授权、GitHub 授权和邮箱 Magic Link 三种登录方式。

注意:

• 邮箱登录请勿使用 QQ 邮箱调试，因为 QQ 邮箱会在后台访问链接，导致 Magic Link 失效。
• 建议 GitHub 登录优先于 Google 登录进行调试，因为配置比较简单，不易出错。
• 中国用户使用 clashX 代理时，在本地调试 Google 登录可能无法成功，这时候请打开 pro 的增强模式（tun模式）。
• 如果 Github 登录成功，只要确保 Google 配置正确，Google 登录肯定不会有问题。

邮箱登录

Supabase Auth 默认开启邮箱登录，不过默认设置的链接过期时间是1小时，一般建议修改为10分钟。

点击「Email」这一项，打开邮箱设置面板

将「Email OTP Expiration」这一项的值改为 600，然后点击「Save」

Github 登录

点击「Github」这一项，打开 Github 设置面板

点击「Enable」按钮，开启 Github 登录，然后复制「Callback URL」

然后打开 GitHub 的「OAuth Apps」页面，点击「New OAuth App」，开始创建新的 OAuth App

「Homepage URL」可直接填写将来的生产地址，也可以暂时写开发环境的地址（如http://localhost:3000），「Authorization callback URL」填写刚才复制的「Callback URL」

创建完成后，你就能看到「Client ID」，再点击「Generate a new client secret」按钮生成「Client Secret」，将它们复制到 Supabase Auth 的「Client ID」和「Client Secret」中。

Google 登录

点击「Google」这一项，打开 Google 设置面板

点击「Enable」按钮，开启 Google 登录，然后复制「Callback URL」

打开 Google Cloud Console，点击「New Project」，开始创建新的项目

输入项目名称，然后点击「Create」

开始设置 Project 信息

创建 Client ID

「Application type」选择「Web application」，「Authorized JavaScript origins」本地开发需要填写http://localhost:3000 和 http://localhost，「Authorized redirect URIs」填写刚才复制的「Callback URL」

把生成的「Client ID」和「Client secret」复制到 Supabase Auth 的「Client ID」和「Client Secret」中。

再回到 Google Cloud Console，在 Data Access 页面勾选我们需要的权限

配置重定向 URL

为了让用户登录后重定向到正确的页面，我们还需要配置「URL Configuration」。

其中 Site URL 配置为生产地址，Redirect URLs 添加开发环境的地址，这样可以保证本地开发时也能正确重定向。

获取 API 密钥

最后一步，也是最重要的一步，获取 API 密钥。

在 Data API 页面，把 URL、anon key 和 service_role key 复制到代码里的环境变量中。

# .env.local or .env
 
NEXT_PUBLIC_SUPABASE_URL=""
NEXT_PUBLIC_SUPABASE_ANON_KEY=""
SUPABASE_SERVICE_ROLE_KEY=""

本地更新 Supabase 数据库定义

安装 Supabase CLI：

# mac OS or Linux
brew install supabase/tap/supabase
 
# Windows
scoop bucket add supabase https://github.com/supabase/scoop-bucket.git
scoop install supabase

安装成功后，先登录 CLI：

supabase login

然后执行 gen 命令生成 types.ts

supabase gen types typescript --project-id <your-project-id> --schema public > lib/supabase/types.ts

把 <your-project-id> 替换成你的的正式项目 ID。

如果生成命令的时候控制台提示 A new version of Supabase CLI is available ……，那么需要先执行更新命令：

提示:

如果不知道 ID 是什么，请直接登录 Supabase 控制台，看地址栏上面，/project/ 后面的那串字符就是，例如 https://supabase.com/dashboard/project/<your-project-id>。

# mac OS or Linux
brew upgrade supabase
 
# Windows
scoop update supabase

更多 Supabase CLI 相关命令，请参考文档

结语

Nexty.dev 模板使用的所有第三方服务，只有 Supabase 是必须的。也就是说，如果你现在就想启动源码仓库，可以暂时跳过其他第三方平台的配置，从启动源码仓库章节继续阅读。