在继续构建你的仪表板之前，你需要一些数据。在本章中，你将使用 @vercel/postgres 设置一个 PostgreSQL 数据库。如果你已经熟悉 PostgreSQL，并且更愿意使用自己的提供商，你可以跳过本章并自行设置数据库。否则，我们继续吧！
在本章
以下是我们将要涵盖的主题
- 将你的项目推送到 GitHub。
- 设置一个 Vercel 账户并链接你的 GitHub 仓库，以便即时预览和部署。
- 创建并将你的项目链接到一个 Postgres 数据库。
- 使用初始数据填充数据库。
创建一个 GitHub 仓库
首先，如果你还没有将你的仓库推送到 GitHub，我们现在来推送一下。这将使设置数据库和部署更容易。
如果你需要帮助设置仓库，可以查看 GitHub 上的指南。
值得知道：
- 你也可以使用其他 Git 提供商，如 GitLab 或 Bitbucket。
- 如果你是 GitHub 的新手，我们推荐 GitHub 桌面应用，它能简化开发工作流程。
创建一个 Vercel 账户
访问 vercel.com/signup 创建一个账户。选择免费的 "hobby" 计划。选择 Continue with GitHub 将你的 GitHub 账户与 Vercel 账户连接。
连接并部署你的项目
接下来，你将进入这个屏幕，在这里你可以选择并 导入 你刚刚创建的 GitHub 仓库：
命名你的项目，然后点击 Deploy。
太棒了！🎉 你的项目现在已部署。
通过连接你的 GitHub 仓库，每当你向 main 分支推送更改时，Vercel 会自动重新部署你的应用，无需额外配置。在打开拉取请求时，你还会拥有 即时预览(instant previews)，这使你能够及早捕获部署错误，并将项目预览分享给团队成员以获取反馈。
创建一个 Postgres 数据库
接下来，为了设置一个数据库，点击 Continue to Dashboard 并从你的项目仪表板中选择 Storage 选项卡。选择 Connect Store → Create New → Postgres → Continue。
接受条款，给你的数据库命名，并确保数据库区域设置为 Washington D.C (iad1) - 这也是所有新 Vercel 项目的 默认区域(default region)。通过将数据库放置在与应用代码相同或接近的区域，你可以减少数据请求的 延迟(latency)。
值得知道 ：一旦初始化，你无法更改数据库区域。如果你希望使用其他 区域(region)，你应在创建数据库之前设置。
连接后，导航到 .env.local 选项卡，点击 Show secret 并 Copy Snippet。确保在复制前显示机密内容。
导航到你的代码编辑器，将 .env.example 文件重命名为 **.env**。粘贴从 Vercel 复制的内容。
重要提示：转到你的 .gitignore 文件，确保 .env 在忽略的文件中，以防止你的数据库机密在推送到 GitHub 时被暴露。
最后，在你的终端中运行 pnpm i @vercel/postgres 以安装 Vercel Postgres SDK。
为数据库填充数据
现在，数据库已经创建好了，让我们用一些初始数据来填充它。
在 /app 目录中，有一个名为 seed 的文件夹。取消注释该文件。该文件夹包含一个名为 route.ts 的 Next.js 路由处理程序(Next.js Route Handler)，将用于为数据库填充数据。这会创建一个服务器端端点，你可以在浏览器中访问该端点以开始填充数据库。
即使你不理解代码的所有内容，也不用担心，但为了让你了解概况，脚本使用 SQL 来创建表，并使用 placeholder-data.ts 文件中的数据在表创建后填充它们。
确保你的本地开发服务器正在运行 pnpm run dev，然后在浏览器中导航到 localhost:3000/seed。完成后，你将在浏览器中看到一条 "Database seeded successfully" 的消息。完成后，你可以删除此文件。
是时候进行测验了！
测试你的知识，看看你刚刚学到的东西。
在数据库上下文中，'seeding' 是指什么？
A. 删除数据库中的所有数据 B. 导入数据库的架构 C. 使用一组初始数据填充数据库 D. 在数据库中创建表之间的关系
故障排除：
- 在将机密复制到
.env文件之前，请确保揭示你的数据库机密。- 脚本使用
bcrypt来哈希用户的密码，如果bcrypt不兼容你的环境，你可以更新脚本以使用 bcryptjs 代替。- 如果在为数据库填充数据时遇到任何问题，并且想要重新运行脚本，可以在数据库查询界面中运行
DROP TABLE tablename以删除任何现有的表。但要小心，此命令将删除表及其所有数据。在你的示例应用程序中执行此操作是可以的，因为你正在处理占位数据，但你不应该在生产应用程序中运行此命令。- 如果你在为 Vercel Postgres 数据库填充数据时继续遇到问题，请在 GitHub 上发起讨论。
探索你的数据库
让我们看看你的数据库是什么样子的。返回 Vercel，点击侧边栏的 Data。
在此部分中，你将找到四个新表：users、customers、invoices 和 revenue。
通过选择每个表，你可以查看其记录，并确保条目与 placeholder-data.ts 文件中的数据一致。
执行查询
你可以切换到 "query" 选项卡与数据库进行交互。此部分支持标准 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;
是时候进行测验了！
测试你的知识，看看你刚刚学到的东西。
这张发票属于哪个客户？
A. Lee Robinson B. Evil Rabbit C. Delba de Oliveira D. Michael Novotny
