设置你的数据库

在继续开发你的仪表盘之前，你需要一些数据。在本节中，你将使用 @vercel/postgres 设置一个 PostgreSQL 数据库。如果你已经熟悉 PostgreSQL 并希望使用自己的提供商，你可以跳过本节并自行设置。否则，让我们继续！

在本节中…

以下是我们将介绍的主题

将你的项目推送到 GitHub。

设置 Vercel 账户并链接你的 GitHub 仓库以获取即时预览和部署。

创建并链接你的项目到一个 Postgres 数据库。

使用初始数据填充数据库。

创建 GitHub 仓库

首先，如果还没有，让我们将你的仓库推送到 Github。这将使设置你的数据库和部署变得更容易。

如果你需要帮助设置你的仓库，请查看 GitHub 上的这个指南。

了解一下

• 你也可以使用其他 Git 提供商，如 GitLab 或 Bitbucket。
• 如果你不熟悉 GitHub，我们推荐使用 GitHub 桌面应用 以简化开发工作流程。

创建 Vercel 账户

访问 vercel.com/signup 创建一个账户。选择免费的“爱好者”计划。选择**使用 GitHub 继续**以连接你的 GitHub 和 Vercel 账户。

连接并部署你的项目

接下来，你将进入此屏幕，你可以在其中选择并**导入**你刚刚创建的 GitHub 仓库

命名你的项目并点击**部署**。

太棒了！🎉 你的项目现在已经部署。

通过连接你的 GitHub 仓库，每当你将更改推送到你的**main**分支时，Vercel 将自动重新部署你的应用程序，无需任何配置。在打开拉取请求时，你还可以获得 即时预览，这使你能够尽早发现部署错误，并与团队成员共享项目的预览以获取反馈。

创建 Postgres 数据库

接下来，要设置数据库，请点击**继续到仪表盘**，并在项目仪表盘中选择**存储**选项卡。选择**连接存储**→**创建新的**→**Postgres**→**继续**。

接受条款，为你的数据库指定一个名称，并确保你的数据库区域设置为**华盛顿特区 (iad1)** - 这也是所有新 Vercel 项目的 默认区域。通过将你的数据库放置在与应用程序代码相同或接近的区域，可以减少数据请求的 延迟。

**了解一下**：数据库初始化后，你无法更改其区域。如果你希望使用不同的 区域，你应该在创建数据库之前设置它。

连接后，导航到.env.local选项卡，点击**显示密钥**并**复制代码段**。请确保在复制密钥之前先显示它们。

导航到你的代码编辑器并将.env.example文件重命名为.env。粘贴从 Vercel 复制的内容。

**重要提示：**转到你的.gitignore文件，并确保.env位于被忽略的文件中，以防止在推送到 GitHub 时泄露你的数据库密钥。

最后，在你的终端中运行pnpm i @vercel/postgres以安装 Vercel Postgres SDK。

填充你的数据库

现在你的数据库已经创建，让我们用一些初始数据填充它。

在/app内部，有一个名为seed的文件夹。取消此文件的注释。此文件夹包含一个 Next.js 路由处理程序，名为route.ts，它将用于填充你的数据库。这将创建一个服务器端端点，你可以在浏览器中访问它以开始填充你的数据库。

如果你不理解代码的作用，不用担心，但为了让你大致了解，该脚本使用**SQL**创建表，并使用placeholder-data.ts文件中的数据在表创建后填充它们。

确保你的本地开发服务器正在使用pnpm run dev运行，并在浏览器中导航到 localhost:3000/seed。完成后，你将在浏览器中看到一条消息“数据库填充成功”。完成后，你可以删除此文件。

故障排除:

• 请确保在将数据库密钥复制到你的.env文件之前显示它们。
• 该脚本使用bcrypt对用户的密码进行哈希处理，如果bcrypt与你的环境不兼容，你可以更新脚本以使用 bcryptjs 代替。
• 如果你在填充数据库时遇到任何问题，并希望再次运行脚本，可以通过在你的数据库查询界面中运行DROP TABLE tablename来删除任何现有的表。有关更多详细信息，请参阅下面的 执行查询部分。但请注意，此命令将删除表及其所有数据。对于你的示例应用，由于你正在使用占位符数据，因此这样做是可以的，但在生产应用中你不应该运行此命令。
• 如果你在填充 Vercel Postgres 数据库时继续遇到问题，请在 GitHub 上发起讨论。

探索您的数据库

让我们看看您的数据库是什么样子的。返回 Vercel，然后点击侧边栏上的**数据**。

在本节中，您将找到四个新表：users、customers、invoices 和 revenue。

通过选择每个表，您可以查看其记录并确保条目与placeholder-data.ts文件中的数据一致。

执行查询

您可以切换到“查询”选项卡来与您的数据库交互。此部分支持标准 SQL 命令。例如，输入DROP TABLE customers将删除“customers”表及其所有数据 - **请谨慎操作**！

让我们运行您的第一个数据库查询。将以下 SQL 代码粘贴并运行到 Vercel 界面中

SELECT invoices.amount, customers.name
FROM invoices
JOIN customers ON invoices.customer_id = customers.id
WHERE invoices.amount = 666;