在继续制作dashboard之前，你需要一些数据。在本章中，你将使用 @vercel/postgres 设置 PostgreSQL 数据库。如果你已经熟悉 PostgreSQL，并希望使用自己的程序，可以跳过本章，自行设置。否则，让我们继续！

本章你将学到

• 将项目推送到 GitHub。
• 建立 Vercel 账户并链接 GitHub 代码库，以便即时预览和部署。
• 创建项目并将其链接到 Postgres 数据库。
• 为数据库添加初始数据。

PostgreSQL（通常简称为Postgres）是一个功能强大的开源对象-关系型数据库管理系统（ORDBMS），它以其可靠性、健壮性、灵活性和支持标准SQL的能力而闻名。

PostgreSQL遵循SQL标准，并且在此基础上增加了许多扩展，以支持复杂的查询、自定义数据类型、操作和索引。

本教程使用Postgres数据库，你也可以使用自己熟悉的MySQL或Mongodb，并不影响。

创建 GitHub 仓库

首先，如果您还没有将您的版本库推送到 Github，那就先推送到 Github。这样可以更方便地设置数据库和部署。

如果您需要帮助建立仓库，请查看 GitHub 上的指南。

这边简单讲下如何把我们之前的代码，同步到Github

第一步、先创建一个私有项目，叫nextjs-dashboard

第二步、复制建好的ssh项目地址，然后在本地窗口，绑定远程git

git remote add origin git@github.com:opapa/nextjs-dashboard.git

第三步、推送代码到远程

git push --set-upstream origin master

创建Vercel帐户

Vercel 是一个云计算平台，专为前端开发和部署 Web 应用程序而设计。

它提供了一系列工具和服务，帮助开发者轻松构建、部署和管理应用程序，从而让开发团队能够更专注于应用程序的开发和创新，而无需过多关注基础设施管理。

如果你有自己的腾讯云平台，或者阿里云平台，也可以自己进行部署。

本教程只教导进行Vercel部署，主要是，Vercel是免费的。

问 vercel.com/signup 创建账户。选择免费的 "爱好 "计划。选择 "继续使用 GitHub"，连接您的 GitHub 和 Vercel 账户。

连接和部署项目

接下来，你将进入这个界面，选择并导入刚刚创建的 GitHub 仓库：

是的，他可以直接选择Github地址，直接获取Github代码，一键部署

为项目命名，然后单击 "部署"。

你的项目现已部署成功。

通过连接 GitHub 仓库，每当您向主分支推送变更时，Vercel 就会自动重新部署你的应用程序，无需任何配置。在打开拉取请求时，您还可以即时预览，以便及早发现部署错误，并与团队成员分享项目预览以获得反馈。

创建Postgres数据库

接下来，要建立数据库，请单击 Continue to Dashboard，然后从项目仪表板中选择 Storage选项卡。选择 Connect Store → Create New → Postgres → Continue。

接受条款，为数据库指定名称，数据库区域我们选择默认设置Washington D.C (iad1) 就可以了。当然，我们一般将数据库放在同一区域或靠近应用程序代码的地方，这样可以减少数据请求的延迟。

连接后，点击 .env.local 选项卡，单击Show secret and Copy Snippet。确保在复制之前显示密钥。

切换到代码编辑器，将 .env.example 文件重命名为 .env 。粘贴从 Vercel 复制的内容。

重要：转到 .gitignore 文件，确保 .env 在忽略的文件中，以防止推送到 GitHub 时暴露数据库密钥。

最后，在终端运行 npm i @vercel/postgres 安装 Vercel Postgres SDK。

初始化数据库

现在，数据库已经创建，让我们为它添加一些初始数据。这将使您在创建dashboard时有一些数据可以使用。

在项目的 /scripts 文件夹中，有一个名为 seed.js 的文件。该脚本包含创建和播入 invoices , customers , user , revenue 表的说明。

如果你不理解代码的所有操作，也不用担心，脚本使用 SQL 创建表格，并在创建表格后使用 placeholder-data.js 文件中的数据填充表格。

接下来，在 package.json 文件中，在脚本中添加以下一行：

"scripts": {
  "build": "next build",
  "dev": "next dev",
  "start": "next start",
  "seed": "node -r dotenv/config ./scripts/seed.js"
},

这是执行 seed.js 的命令。

现在，运行 npm run seed 。你应该会在终端中看到一些 console.log 消息，让你知道脚本正在运行。

本地配置数据库

如果我们目前只想在本地进行测试，后续只想部署在国内云服务器上，你可以在本地安装PostgreSQL

安装完成Postgre后，我们需要配置环境变量，直接配置到bin目录就可以了

1. 这时候，需要初始化数据库，你需要使用超级管理员身份，启动PowerShell

   initdb -D I:\db\pgsqldata -E UTF8 --locale=zh_CN.UTF-8
   

2. 启动和停止数据库服务

   # 启动
   pg_ctl start -D I:\db\pgsqldata
   # 停止
   pg_ctl stop -D I:\db\pgsqldata
   

3. 创建数据库

   createdb verceldb
   

4. 连接并使用数据库

   psql verceldb
   

5. 创建用户

   CREATE USER dashboard WITH PASSWORD 'your_password';
   

   # 验证用户是否有效
   psql -U dashboard -h localhost
   

6. 分配权限

   GRANT ALL PRIVILEGES ON DATABASE verceldb TO dashboard;
   
   

7. 其它命令

   # 切换数据库
   \c otherdb
   # 查看有多少表格
   \dt
   # 查询库中有什么用户
   SELECT * FROM pg_catalog.pg_roles;
   

这样，我们就在本地新建了一个用户，用户名是dashboard

由于这个是一个Next.js教程，所以不会对数据库有太多的深入探讨，如果你想深入了解Postgre数据库，请转官方教程

探索数据库

让我们看看你的数据库是什么样的。回到 Vercel，点击侧导航栏上的数据。

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

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

执行查询

您可以切换到 "查询 "选项卡，与数据库进行交互。该部分支持标准 SQL 命令。例如，输入 DROP TABLE customers 会删除 "customers "表及其所有数据，因此要小心！

让我们运行第一个数据库查询。在 Vercel 界面粘贴并运行以下 SQL 代码：

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