将 v0 制作的美观界面连接到 Supabase 数据库

Vercel 的 v0 可以在瞬间帮我们绘制出精美的 Next.js 页面，但如果到此为止，它就只是一个毫无用处的空壳。一旦点击刷新，用户输入的数据就会消失得无影无踪。要构建一个真正可以运行的服务，我们需要一个用于存储数据的数据库。

无需花费数百万韩元聘请开发人员，这里整理了由个人独立撤掉 v0 的虚假数据并接入 Supabase，从而完成一个可运行的后端的具体步骤。

v0 虚假数据分析与数据表设计

在 v0 生成的代码中，通常包含类似 const mockData = [...] 形式的虚假数据。分析这些数据的结构是第一步。我们需要将页面上展示的信息和用户输入的字段，原封不动地搬到数据库的数据表中。

数据库表映射标准

为了防止数据结构混乱导致存入错误的值，必须明确定义数据类型。即使不懂 SQL，只要掌握以下五个规则，也能设计出数据表。

id：用于区分数据的唯一标识符。使用 PostgreSQL 的 uuid 类型，并将默认值设置为 gen_random_uuid()，以便自动生成唯一的字符串。
user_email：用于存放电子邮箱地址的字段。指定为 text 类型，并开启 UNIQUE（唯一）以及不允许输入空值的 NOT NULL（非空）设置，以防止重复注册。
price：金额数据。为了精确保留小数点后的数字而不产生误差，请分配 numeric 类型。
status：显示订单或注册状态。使用 text 类型，但限制只能输入“等待中”或“已完成”等指定的值。
created_at：数据注册的时间。指定为保存时区信息的 timestamptz 类型，并在默认值中填入 now()，以便在数据写入时自动输入当前时间。

使用 Supabase Table Editor 创建数据库

Supabase 能够帮助我们在网页浏览器中通过点击几次鼠标来创建数据库，而无需构建复杂的服务器基础设施。

在 Supabase 创建账号并新建一个项目。免费方案提供每月 5 万名活跃用户 (MAU) 和 500MB 的数据库容量。在初期流量不大的单人服务阶段，不需要支付服务器维护成本。
点击左侧菜单中的 Table Editor，然后点击 Create a new table。将数据表命名为 messages 或 users，然后根据上述映射标准添加所需的列。
勾选 RLS (Row Level Security，行级安全) 设置复选框。这是防止外部恶意用户盗取或篡改你整个数据库的底线安全锁。

用于安全连接的 API 环境变量设置

创建好数据库后，必须开通一条让 Next.js 项目文件夹与 Supabase 进行通信的通道。此时，如果数据库管理员密钥泄露到 GitHub 等公共场所，整个服务将陷入失控状态。这就是为什么必须将环境变量分开保存的原因。

注册环境变量

在 Next.js 项目的根目录下创建一个 .env.local 文件，并输入以下代码。地址和密钥值可以从 Supabase 控制面板的 Settings > API 页面中复制过来。

http://googleusercontent.com/immersive_entry_chip/0

将 v0 制作的美观界面连接到 Supabase 数据库

无需花费数百万韩元聘请开发人员，这里整理了由个人独立撤掉 v0 的虚假数据并接入 Supabase，从而完成一个可运行的后端的具体步骤。

v0 虚假数据分析与数据表设计

数据库表映射标准

为了防止数据结构混乱导致存入错误的值，必须明确定义数据类型。即使不懂 SQL，只要掌握以下五个规则，也能设计出数据表。

id：用于区分数据的唯一标识符。使用 PostgreSQL 的 uuid 类型，并将默认值设置为 gen_random_uuid()，以便自动生成唯一的字符串。

user_email：用于存放电子邮箱地址的字段。指定为 text 类型，并开启 UNIQUE（唯一）以及不允许输入空值的 NOT NULL（非空）设置，以防止重复注册。

price：金额数据。为了精确保留小数点后的数字而不产生误差，请分配 numeric 类型。

status：显示订单或注册状态。使用 text 类型，但限制只能输入“等待中”或“已完成”等指定的值。

created_at：数据注册的时间。指定为保存时区信息的 timestamptz 类型，并在默认值中填入 now()，以便在数据写入时自动输入当前时间。

使用 Supabase Table Editor 创建数据库

Supabase 能够帮助我们在网页浏览器中通过点击几次鼠标来创建数据库，而无需构建复杂的服务器基础设施。

在 Supabase 创建账号并新建一个项目。免费方案提供每月 5 万名活跃用户 (MAU) 和 500MB 的数据库容量。在初期流量不大的单人服务阶段，不需要支付服务器维护成本。

点击左侧菜单中的 Table Editor，然后点击 Create a new table。将数据表命名为 messages 或 users，然后根据上述映射标准添加所需的列。

勾选 RLS (Row Level Security，行级安全) 设置复选框。这是防止外部恶意用户盗取或篡改你整个数据库的底线安全锁。

用于安全连接的 API 环境变量设置

注册环境变量

在 Next.js 项目的根目录下创建一个 .env.local 文件，并输入以下代码。地址和密钥值可以从 Supabase 控制面板的 Settings > API 页面中复制过来。

将 v0 制作的美观界面连接到 Supabase 数据库

Related Video

v0 入门指南：从提示词到正式上线

将 v0 制作的美观界面连接到 Supabase 数据库

v0 虚假数据分析与数据表设计

数据库表映射标准

使用 Supabase Table Editor 创建数据库

用于安全连接的 API 环境变量设置

注册环境变量

Comments (0)

将 v0 制作的美观界面连接到 Supabase 数据库

v0 虚假数据分析与数据表设计

数据库表映射标准

使用 Supabase Table Editor 创建数据库

用于安全连接的 API 环境变量设置

注册环境变量