設定您的資料庫

在您繼續處理儀表板之前，您需要一些資料。在本章中，您將從 Vercel Marketplace 整合服務中設定 PostgreSQL 資料庫。如果您已經熟悉 PostgreSQL，並且偏好使用自己的資料庫供應商，您可以跳過本章並自行設定。否則，讓我們繼續！

本章節內容...

以下是我們將涵蓋的主題

將您的專案推送到 GitHub。

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

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

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

建立 GitHub 儲存庫

首先，如果您尚未將儲存庫推送到 GitHub，請立即執行。這將使設定資料庫和部署變得更容易。

如果您需要關於設定儲存庫的協助，請查看 GitHub 上的這份指南。

小提示

• 您也可以使用其他 Git 供應商，例如 GitLab 或 Bitbucket。
• 如果您是 GitHub 新手，我們建議使用 GitHub Desktop App 以簡化開發工作流程。

建立 Vercel 帳戶

前往 vercel.com/signup 建立帳戶。選擇免費的「個人」方案。選取「使用 GitHub 繼續」以連結您的 GitHub 和 Vercel 帳戶。

連結並部署您的專案

接下來，您將被帶到此畫面，您可以在此選取並匯入您剛建立的 GitHub 儲存庫

命名您的專案，然後點擊「部署」。

萬歲！🎉 您的專案現在已部署。

透過連結您的 GitHub 儲存庫，每當您將變更推送到您的 main 分支時，Vercel 都會自動重新部署您的應用程式，無需任何設定。當開啟提取請求時，您還將擁有 即時預覽 URL，讓您可以及早發現部署錯誤，並與團隊成員分享專案預覽以獲取回饋。

建立 Postgres 資料庫

接下來，若要設定資料庫，請點擊「繼續前往儀表板」，然後從您的專案儀表板中選取「儲存」標籤。選取「建立資料庫」。根據您 Vercel 帳戶的建立時間，您可能會看到 Neon 或 Supabase 等選項。選擇您偏好的供應商，然後點擊「繼續」。

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

連線後，導覽至 .env.local 標籤，點擊「顯示密碼」和「複製程式碼片段」。請務必在複製之前顯示密碼。

導覽至您的程式碼編輯器，並將 .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 來刪除任何現有表格。請參閱下方的「執行查詢」章節以取得更多詳細資訊。但請注意，此命令將刪除表格及其所有資料。在您使用範例應用程式時執行此操作是可以的，因為您正在使用預留位置資料，但不應在生產應用程式中執行此命令。

執行查詢

讓我們執行一個查詢，以確保一切運作正常。我們將使用另一個 Router Handler，app/query/route.ts，來查詢資料庫。在此檔案中，您會找到一個具有以下 SQL 查詢的 listInvoices() 函數。

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 已傳回。