Supabase 集成

最近更新时间:2026-01-09 17:47:33

我的收藏
本指南为开发者提供结合 Next.js 全栈开发快速集成 Supabase Auth 的步骤说明,并提供将项目部署在 EdgeOne Pages 的教程。下文将详细介绍集成步骤,快速完成项目中的用户管理功能开发。

快速入门

您可以选择 Pages 提供的 Supabase Auth 集成模板,快捷迅速进入到开发当中,点击 Supabase Auth Starter 模板。本教程大致分为三步:Supabase 配置、开发调试、EdgeOne Pages 部署配置,下面将详细介绍每个步骤的具体操作。

Supabase 准备

1. 账号注册和配置

如果您是首次接触 Supabase,请参阅我们的 Supabase 集成指南,获取账户注册及环境初始化的完整流程。

2. Authentication 介绍

Supabase 平台提供的 Authentication 功能可高效管理用户数据。通过左侧导航栏访问 Authentication 管理界面,您将看到预配置的用户数据表及相关设置。此界面支持配置电子邮件验证流程、访问策略(Policies)以及会话(Session)参数等核心功能。如需深入了解特定功能,请参阅 官方文档 中的详细说明。


本地开发

1. Supabase 用户管理接口说明

Supabase 平台为用户管理提供了全面的预置 API 接口。您可通过左侧导航栏的 API Docs 部分,选择 User Management 选项卡查阅这些接口文档。
这套完备的接口体系覆盖了主要用户管理需求。在后续章节中,我们将详细探讨如何在 Next.js 框架中调用这些 Supabase 接口,实现应用中的完整用户管理流程。


2. Next.js + Supabase 完成用户管理

开始实践前,请先了解 Next.js 的全栈开发模式,用户可以参考 Supabase Auth Starter 模板开发 代码,模板代码中演示了如何实现用户身份管理的核心功能,包括注册、登录、注销以及密码管理等操作。
首先,在您的 Next.js 项目根目录创建 .env 文件,并配置以下必要环境变量:
# supabase 连接参数
NEXT_PUBLIC_SUPABASE_URL=https://xxxxx.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=xxxx

# 后台地址
NEXT_PUBLIC_SITE_URL=http://localhost:3000/
本地开发启动项目可以在命令行执行 npm run dev 启动 Next.js 框架开发项目。项目后台功能集成在/app/api 路径下,建议参考提供的 模板代码,以便了解身份验证各项功能的实现。

部署到 EdgeOne Pages

这一节会详细介绍将开发好的项目部署到 EdgeOne Pages。

1. 上传项目到 git(从模板创建项目忽略此步)

创建新仓库
登录您的 GitHub 账户,进入 Dashboard。
点击右上角的 New 按钮。
填写仓库名称、描述等信息。
选择仓库可见性(Public 或 Private)。
点击 Create repository 完成创建。
上传本地项目
在本地项目目录下初始化 Git(如未初始化)。
将项目文件提交并推送到新建的远程仓库。
然后在本地关联远程仓库,并上传本地代码。
# Push your code to your git repository (e.g. GitHub, Gitee).

git init
git add .
git commit -m "First commit"
git remote add origin "your Git address"
git push -u origin master
通过以上步骤,您的项目代码将成功托管至 GitHub,为后续部署做好准备。
进入到 EdgeOne Pages 控制台 中,上传自己的项目到 GitHub,点击 创建项目 > 导入 Git 仓库,选择您的项目。

2. 填写环境变量

在部署设置页面填写 环境变量。如果是自定义部署,变量名称 应该与本地项目中的 .env 保持一致。

当出现 “恭喜!” 表示部署成功,部署大致会花费1-3分钟。如果项目出现部署失败,可以根据 Build LogsBuild Summary 信息修改项目,或者联系工作人员解决。

部署成功后,到项目域名管理处复制域名
接下来,访问 Supabase 控制台 并导航至 URL 配置部分。将您的域名信息复制到 Site URL 字段中,这样在用户完成注册流程后,将自动重定向至您的网站主页。