本指南为开发者提供结合 Next.js 全栈开发快速集成 Supabase Auth 的步骤说明,并提供将项目部署在 EdgeOne Pages 的教程。下文将详细介绍集成步骤,快速完成项目中的用户管理功能开发。
快速入门
您可以选择 Pages 提供的 Supabase Auth 集成模板,快捷迅速进入到开发当中,点击 Supabase Auth Starter 模板。本教程大致分为三步:Supabase 配置、开发调试、EdgeOne Pages 部署配置,下面将详细介绍每个步骤的具体操作。
Supabase 准备
1. 账号注册和配置
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.coNEXT_PUBLIC_SUPABASE_ANON_KEY=xxxx# 后台地址NEXT_PUBLIC_SITE_URL=http://localhost:3000/
部署到 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 initgit add .git commit -m "First commit"git remote add origin "your Git address"git push -u origin master
通过以上步骤,您的项目代码将成功托管至 GitHub,为后续部署做好准备。
2. 填写环境变量
在部署设置页面填写
环境变量。如果是自定义部署,变量名称 应该与本地项目中的 .env 保持一致。
当出现 “恭喜!” 表示部署成功,部署大致会花费1-3分钟。如果项目出现部署失败,可以根据
Build Logs 和 Build Summary 信息修改项目,或者联系工作人员解决。
部署成功后,到项目域名管理处复制
域名。
