設定您的資料庫

在繼續開發您的儀表板之前，您需要一些資料。本章將指導您透過 Vercel 的市場整合 設定 PostgreSQL 資料庫。如果您已熟悉 PostgreSQL 並希望使用自己的資料庫供應商，可以跳過本章自行設定。否則，讓我們繼續吧！

建立 GitHub 儲存庫

首先，如果您尚未將儲存庫推送至 GitHub，請先完成此步驟。這將使設定資料庫和部署更加容易。

如需設定儲存庫的協助，請參考 GitHub 上的這份指南。

小提示：

• 您也可以使用其他 Git 供應商如 GitLab 或 Bitbucket。
• 如果您是 GitHub 新手，我們推薦使用 GitHub 桌面應用程式 以簡化開發流程。

建立 Vercel 帳號

前往 vercel.com/signup 建立帳號。選擇免費的「hobby」方案。點選 Continue with GitHub 以連結您的 GitHub 和 Vercel 帳號。

連結並部署專案

接下來，您將進入此畫面，可以選擇並 匯入 您剛建立的 GitHub 儲存庫：

為專案命名後點擊 Deploy。

恭喜！🎉 您的專案現已部署完成。

連結 GitHub 儲存庫後，每當您推送變更至 main 分支時，Vercel 將自動重新部署您的應用程式，無需額外設定。開啟拉取請求時，您還將獲得 即時預覽網址，讓您及早發現部署錯誤並與團隊成員分享專案預覽以獲得反饋。

建立 Postgres 資料庫

接著，要設定資料庫，請點擊 Continue to Dashboard 並從專案儀表板中選擇 Storage 標籤。選擇 Create Database。根據您的 Vercel 帳號建立時間，您可能會看到 Neon 或 Supabase 等選項。選擇偏好的供應商後點擊 Continue。

選擇您的區域與儲存方案（如需要）。所有 Vercel 專案的 預設區域 為 華盛頓特區 (iad1)，我們建議選擇此區域以減少資料請求的 延遲。

連接完成後，導航至 .env.local 標籤，點擊 Show secret 與 Copy Snippet。請確保在複製前顯示密鑰。

前往您的程式碼編輯器，將 .env.example 檔案重新命名為 .env。貼上從 Vercel 複製的內容。

重要事項： 檢查您的 .gitignore 檔案，確保 .env 位於忽略檔案清單中，以防止推送至 GitHub 時暴露資料庫密鑰。

填入資料庫初始資料

現在您的資料庫已建立，讓我們填入一些初始資料。

我們已包含一個您可以在瀏覽器中存取的 API，它將執行一個種子腳本，用初始資料集填充資料庫。

此腳本使用 SQL 建立表格，並使用 placeholder-data.ts 檔案中的資料在建立後填充它們。

確保您的本地開發伺服器正在執行（使用 pnpm run dev），並在瀏覽器中導航至 localhost:3000/seed。完成後，您將在瀏覽器中看到「Database seeded successfully」訊息。完成後，您可以刪除此檔案。

疑難排解：

• 請確保在將資料庫密鑰複製到 .env 檔案前顯示它們。
• 此腳本使用 bcrypt 來雜湊使用者密碼，如果 bcrypt 與您的環境不相容，您可以更新腳本改用 bcryptjs。
• 如果在填入資料庫時遇到任何問題並想重新執行腳本，您可以在資料庫查詢介面中執行 DROP TABLE tablename 來刪除現有表格。詳情請參閱下方的 執行查詢章節。但請注意，此命令將刪除表格及其所有資料。由於您正在使用範例資料，這樣做是可以的，但請勿在生產環境應用程式中執行此命令。

執行查詢

讓我們執行一個查詢以確保一切正常運作。我們將使用另一個路由器處理程式 app/query/route.ts 來查詢資料庫。在此檔案中，您會找到一個 listInvoices() 函式，其中包含以下 SQL 查詢。

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

取消註解此檔案，移除 Response.json() 區塊，並在瀏覽器中導航至 localhost:3000/query。您應該會看到返回的發票 amount 和 name。