出海技术栈集成教程（二）：Supabase 登录与数据库配置Nexty.dev开发者分享Supabase集成指南，涵盖数

我开发了 next.js saas 模板 Nexty.dev，很多用户告诉我文档太详细了，于是我决定把出海技术栈、海外第三方服务集成的文档发出来，希望帮到更多出海的朋友。👉 原文链接

本系列分享的内容包含：

👉 域名购买、解析与配置
👉 Supabase 集成教程：登录与数据库
👉 Stripe 集成教程：支付配置与开发
👉 Resend 集成教程：邮件服务
👉 域名邮箱配置教程：域名邮箱
👉 Upstash 集成教程：Redis 与限流器
👉 Cloudflare R2集成教程：免费图片存储
👉 Cloudflare Turnstile集成教程：免费人机检测

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

安装和更新 Supabase CLI

安装 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

更新 Supabase CLI：

# mac OS or Linux
brew upgrade supabase

# Windows
scoop update supabase

数据库集成步骤

访问 Supabase 官网，你可以通过上一步创建的域名邮箱注册。
点击 New Project 创建新项目

记住这一步填写的密码

将环境变量赋值到 .env 或者 .env.local 文件

初始化数据库

## 本地环境登录 supabase，根据提示按回车键，然后复制网页的随机码，粘贴到命令行，再回车即登录成功
pnpm db:login

## 连接数据库，会要求输入数据库密码，复制第2步记住的密码，粘贴到命令行，此时命令行是不会显示密码的，直接回车，会提示连接成功
pnpm db:link

## 自动初始化数据库和初始数据
pnpm db:update

在 Windows系统上，如果执行 pnpm db:update 遇到 “Invalid project ref format” 的错误，如图：

请打开 package.json 修改 db:update 命令：

  "scripts": {
    // "db:update": "npm run db:push && npm run db:gen-types" // 删掉这一行
    "db:update": "npm run db:push ; npm run db:gen-types" // 改成这样
  }

执行完成后，打开 Table Editor，你就能看到所有 Nexty 模板内置的表和定价数据。

打开 Database 模块，你能看到所有设计的 Indexes（索引）、Triggers（触发器）、Functions（RPC函数）和 Policies（行安全策略）。

数据库更新方法

当你开始开发自己的功能的时候，无论新增数据表还是修改数据表，都可以使用这个命令创建新的表设计文件：

pnpm db:new-migration <update-name>

## eg: pnpm db:new-migration add_image_jobs_table

执行命令后，会在 supabase/migrations 生成一个新文件。

接着在新文件里写入新增或更新数据表的 sql。如果你不懂设计数据表，可以先和 AI 讨论功能，再让 AI 为你设计完整的 supabase 的数据表，并要求直接写入这个新文件。

然后执行这个命令更新数据库：

pnpm db:update

身份授权集成步骤

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

注意:

邮箱登录请勿使用 QQ 邮箱调试，因为 QQ 邮箱会在后台访问链接，导致 Magic Link 失效。

建议 GitHub 登录优先于 Google 登录进行调试，因为配置比较简单，不易出错。

如果 Github 登录成功，只要确保 Google 配置正确，Google 登录肯定不会有问题。

邮箱登录

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

点击 Email，打开邮箱设置面板

将 Email OTP Expiration 的值改为 600，然后点击 Save

Magic Link 登录方式有提供默认邮件通知模板，你可以进入 Email - Magic Link 重新设置自己的邮件通知模板

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 中。

同时把 Client ID 添加到环境变量 NEXT_PUBLIC_GOOGLE_CLIENT_ID，这将使你的产品支持 Google One Tap 登录方式，帮助用户减少一次页面跳转。

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

提示

如果要启用 Google One Tap，必须将 Client ID 添加到环境变量 NEXT_PUBLIC_GOOGLE_CLIENT_ID。

配置重定向 URL

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

Site URL 是默认的重定向地址，如果没有指定 Redirect URL，系统会自动将用户重定向到 SITE_URL。如果已有生产地址，这里填写生产环境地址；如果域名还未启用，可暂时填写开发环境地址，等到发布生产环境时再修改为生产地址。

Redirect URL 用于指定允许在代码中使用 redirectTo 参数自定义的重定向地址。你可以同时填写生产环境和开发环境的地址，这样能够保证两套环境均能够正确重定向；但建议发布生产环境后，将开发环境的地址删除。

获取 API 密钥

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

在 Project Settings - Data API 页面，把 URL 复制到环境变量 NEXT_PUBLIC_SUPABASE_URL
在 Project Settings - API Keys 页面，把 anon key 和 service_role key 复制到环境变量 NEXT_PUBLIC_SUPABASE_ANON_KEY 和 SUPABASE_SERVICE_ROLE_KEY

# .env.local or .env

NEXT_PUBLIC_SUPABASE_URL=""
NEXT_PUBLIC_SUPABASE_ANON_KEY=""
SUPABASE_SERVICE_ROLE_KEY=""
NEXT_PUBLIC_GOOGLE_CLIENT_ID=""

总结

出海技术栈集成系列文章会同步发布到我的掘金专栏，欢迎订阅关注。

同时也欢迎出海的朋友了解 Top3 的出海 Next.js SaaS 模板 Nexty.dev。