設定您的資料庫

在繼續開發您的儀表板之前，您需要一些資料。在本章中，您將使用 @vercel/postgres 設定 PostgreSQL 資料庫。如果您已經熟悉 PostgreSQL 並且想要使用自己的供應商，您可以跳過本章節並自行設定。否則，讓我們繼續！

在本章中...

以下是我們將涵蓋的主題

將您的專案推送至 GitHub。

設定 Vercel 帳戶並連結您的 GitHub 儲存庫，以便即時預覽和部署。

建立 Postgres 資料庫並將您的專案連結到該資料庫。

使用初始資料填充資料庫。

建立 GitHub 儲存庫

首先，如果您尚未將您的儲存庫推送至 Github，請立即執行此操作。這將使設定資料庫和部署更容易。

如果您需要設定儲存庫的協助，請參閱 GitHub 上的此指南。

注意事項

• 您也可以使用其他的 Git 提供者，例如 GitLab 或 Bitbucket。
• 如果您是 GitHub 新手，我們建議使用 GitHub 桌面應用程式 來簡化開發流程。

建立 Vercel 帳號

前往 vercel.com/signup 建立帳號。選擇免費的「hobby」方案。選擇使用 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 資料表名稱 來刪除任何現有的資料表。請參閱下面的執行查詢章節以了解更多詳細資訊。但請小心，這個指令會刪除資料表及其所有資料。在您的範例應用程式中執行此操作是可以的，因為您使用的是佔位符資料，但不應該在正式環境的應用程式中執行此指令。
• 如果您在建立 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;