使用 Prisma MCP 和 Next.js 進行電商應用「Vibe Coding」開發

隨著 Prisma MCP 伺服器的發布，我們希望展示其在現實場景中的實際應用。為了演示這一點，我們著手使用 Prisma ORM、Prisma Postgres 和 Next.js 構建一個電子商務應用程式。我們沒有手動編寫所有程式碼，而是採用了「氛圍編碼」(vibe coding)，讓 AI 根據我們的提示快速實作功能。

以下是完整的開發過程，包括思維邏輯、實作步驟以及我們在此過程中遇到的錯誤。

註：這是使用 VS Code Copilot 搭配 Claude 3.5 Sonnet 完成的。

AI 提示技巧（快速概述）

這些提示策略幫助我們加快了工作速度，同時又不失對架構的控制。

• 明確設定 AI 的角色，以獲得結構化、規範驅動的輸出。
• 儘早提及您的技術堆疊 (stack)，以避免工具或模式不匹配。
• 將每個提示集中在一個功能上，以減少混亂和錯誤。
• 使用真實的種子資料 (seed data) 來儘早發現版面配置或篩選功能的錯誤。
• 將錯誤視為回饋——將其貼回給 AI 通常能快速修復。
• 明確執行環境邊界，以避免在伺服器程式碼中呼叫客戶端 Hook 等問題。

提示 AI 扮演軟體架構師

我們首先讓 AI 進入正確的心態。為了確保它遵循我們的專案規範並做出合理的架構選擇，我們要求它扮演軟體架構師的角色，並遵循一套明確的實作準則。

我們的提示

你是一位軟體架構師。你的任務是為工程師提供清晰、精確的實作規範。

你將收到功能描述和技術堆疊。請僅回應每個功能的結構化技術規範，暫時不要提供程式碼。請進行邏輯拆解，並將每個規範限制在 200 字左右。避免未來或理論性的想法——只描述當下所需的內容。

請等待功能說明與技術堆疊開始。 *

🧠 提示： 在一開始就定義 AI 的角色（例如「軟體架構師」）。這會引導模型輸出結構化、專注於實作的內容，而不是直接跳轉到混亂或通用的程式碼。

後續提示

技術堆疊

• 框架：Next.js 15 (使用 App Router 與 TypeScript)
• 樣式：TailwindCSS
• 資料庫 ORM：Prisma ORM，使用 Prisma MCP 伺服器定義 schema 並產生資料庫
• UI 客戶端/伺服器區分：指定組件何時必須使用 "use client" 或 "use server"
• 圖片：使用 Next.js Image 組件——必要時設定 next.config.js 的網域

🧠 提示： 儘早將技術堆疊包含在提示中。這能減少推測，防止 AI 建議不相容的工具或模式。

AI 的回應

我了解您希望為使用以下現代技術堆疊的專案設定技術規範：

1. Next.js 15 (App Router 與 TypeScript)
2. TailwindCSS (樣式)
3. Prisma ORM 與 MCP 伺服器 (資料庫管理)
4. 正確的客戶端/伺服器組件區分
5. Next.js 優化的圖片處理

在提供功能規範之前，我想先確保我們建立了正確的專案結構...

隨後，AI 回應了結構化的實作計畫，這些計畫與我們的技術堆疊和開發流程高度吻合。

設定 Next.js 和 Prisma ORM 以構建專案骨架

在確定了技術堆疊和背景資訊後，我們準備好進入構建首頁並設定資料庫 schema 的階段。我們首先向 AI 發送了關於首頁功能的描述。

我們的提示

功能：首頁

一個簡單的電子商務首頁，包含以下內容：

• 全寬度 Hero 區塊，帶有背景圖片和行動呼籲 (CTA) 按鈕
• 精選產品網格（限制 6 個），透過伺服器組件從資料庫中獲取
• 每個產品應顯示圖片、名稱和價格
• 所有圖片使用 Next.js Image 組件
• 如果使用外部圖片來源，請將所需網域加入 next.config.js
• CTA 按鈕應連結至 /shop 路由

🧠 提示： 一次提示一個功能。這會帶來更清晰的邏輯和更少的幻覺 (hallucinations)，因為 AI 不會同時處理多個任務。

AI 的回應

我將為首頁功能建立技術規範。首先，讓我使用所需的設定來建立我們的 Next.js 專案。

隨後，AI 透過執行以下兩個指令開始建立工作區骨架：

• create-next-app@latest .：在當前目錄中建立一個新的 Next.js 應用程式，並帶有一些自動選擇工具選項的旗標。
• prisma init --output：初始化 Prisma ORM 並設定自訂的 輸出路徑

然後它加入了 Prisma。

初始化 Prisma 後，它提示 Prisma MCP 伺服器建立一個資料庫。建立完成後，它連接到該資料庫，就這樣完成了！

此時，我們的專案基礎已就緒。我們擁有一個 Next.js 專案、設定好的 Prisma，以及一個可用的 Prisma Postgres 資料庫。一切都在幾秒鐘內完成。

在 prisma.schema 中設定類別與產品

當 Prisma ORM 初始化並連接到我們由 MCP 管理的資料庫後，AI 產生了一個 schema 來為我們的商店建立資料模型。

我們要求 AI 為我們的資料庫定義兩個核心模型：Category 和 Product，每個產品屬於一個類別，形成一對多關係。多虧了 Prisma Schema Language (PSL)，這一切運作得非常順暢。它簡潔、宣告式，且易於讓 AI 準確生成。

以下是完整的 schema：

這為我們提供了一個簡單的關聯式結構，易於查詢，非常適合我們想要的分類方式。

讓 AI 為我們的資料庫進行種子填充 (seeding)

schema 就位後，我們的資料庫仍然是空的。我們需要測試資料來工作，因此我們要求 AI 處理種子填充。

我們的提示

你能為一些類別和產品產生種子資料，好讓我們開始測試 UI 嗎？

🧠 提示： 進行種子填充時使用真實世界的資料。這有助於儘早捕捉版面配置或邊緣情況的錯誤，並使 UI 的行為更像在生產環境中那樣。

AI 的回應

沒問題。我會寫一個 seed.ts 指令碼，先建立類別，然後建立具有適當類別關係的產品。我還會將一個種子指令加入到你的 package.json 中，以便你能輕鬆執行它。

它產生的指令碼乾淨且結構良好。它首先刪除 Product 和 Category 表中的當前記錄，然後定義它們，並建立新記錄。

然後，它將以下內容加入我們的 package.json：

並為我們執行了該指令。

AI 的確認

種子填充完成。你可以開啟 Prisma Studio 來查看你的資料。

果然，我們透過執行 npx prisma studio 開啟了 Prisma Studio，一切都準備就緒了。

使用 Prisma ORM 構建可篩選的商店頁面

一旦有了種子資料，我們就開始構建 /shop 頁面。我們的目標是讓使用者按類別篩選產品，並以整潔的網格布局顯示結果。

我們的提示

我們想要建立一個 /shop 頁面，預設列出所有產品，但也支援透過搜尋參數 (search param) 按類別進行篩選。

• 使用 Prisma 獲取類別和產品。
• 使用伺服器組件。
• 包含一個類別篩選組件和產品網格。
• 透過 searchParams.category 處理篩選。

AI 的回應

了解。我將獲取類別列表，並使用 searchParams 來選擇性地篩選產品。然後，我會透過 props 將結果傳遞給 CategoryFilter 和 ProductGrid 組件。由於 searchParams 是動態的，請確保此函式是 async 的。

以下是 AI 產生的程式碼關鍵部分——它驅動了商店頁面的核心功能：

• 獲取所有類別以供篩選 UI 使用。
• 獲取產品，透過 searchParams 進行可選的類別篩選。
• 包含每個產品的類別以避免額外的查詢。

獲取後，我們將產品序列化以供客戶端使用，並使用 suspense 邊界呈現所有內容，以獲得更流暢的 UX；在組件載入時顯示載入佔位符，以避免版面偏移並提供即時的視覺回饋。

最終的 UI 在上方包含一個篩選列，下方則是產品網格。

用於持久化購物車功能的 React Context

商店頁面完成後，我們需要一個持久化的購物車系統。需要一個簡單且會話安全的系統，由於我們沒有使用身份驗證或後端會話，localStorage 是在頁面重新載入之間保留購物車資料的明顯選擇。

我們沒有使用身份驗證或後端會話，因此 localStorage 讓我們能輕鬆地在頁面重新載入時保留購物車資料。

我們的提示

你能使用 React Context 建立一個完整的購物車嗎？

• 支援新增、移除、更新數量。
• 持久化至 localStorage。
• 在頁首顯示項目數量。

AI 的回應

我將建立一個 CartContext，其中包含用於管理狀態、同步至 localStorage 以及計算總項目數量的輔助函式。這將完全在客戶端使用 "use client" 執行。

以下是最終設定的簡要概覽：

這為我們提供了所需的一切：共享狀態、持久化的購物車資料，以及供 AI 在應用程式任何位置使用的 useCart() hook。

處理開發過程中的錯誤

我們在整個過程中遇到了一些問題，但一旦我們提供相關的錯誤訊息，AI 很快就能解決每一個問題。

在依賴 AI 產生完整功能時，這是非常典型的情況。在第一輪產生中，它通常會遺漏一些小但關鍵的細節，這些細節通常是人類會立即察覺到的。不過，修復方案通常只需要一個提示就能獲得。

🧠 提示： 將錯誤視為完善提示的回饋。將堆疊追蹤或意外行為反饋給 AI，有助於它修正路線，並以最小的努力提升輸出品質。

解決無效圖片 URL

在初步種子填充後，我們注意到一些產品圖片退回到顯示 alt 文字。我們捕捉到了這個錯誤並讓 AI 接手處理。

我們的提示

看來我們遇到了一個錯誤。這是錯誤訊息：

AI 的回應

看來提供的圖片 URL 不存在。這是一個修正後的 URL：

使用此 URL 更新 seed.ts 檔案並重新執行。

這立即解決了問題，並正確地恢復了所有圖片。

客戶端/伺服器組件錯誤

在構建購物車功能時，我們偶然發現了一個客戶端/伺服器組件錯誤。我們再次讓 AI 診斷問題。

我們的提示

看來我們遇到了一個錯誤。這是錯誤訊息：

🧠 提示： 在提示中明確執行環境邊界。遺漏像是 "use client" 這樣的細節，可能會在 AI 將邏輯放在錯誤的上下文中時，導致類似 useCart is not a function 的錯誤。

AI 的回應

這個錯誤是因為從伺服器組件中呼叫了 useCart。若要修復它，請透過加入以下內容，明確將您的組件標記為客戶端組件：

在您的組件檔案的最頂端。

應用這個簡單的修復立即解決了問題，使購物車功能完全正常運作。

Next.js searchParams 錯誤

在我們 /shop 頁面上實作動態路由時，我們遇到了關於 searchParams 的問題。我們再次向 AI 尋求指引。

我們的提示

看來我們遇到了一個錯誤。這是錯誤訊息：

AI 的回應

問題在於 Next.js 要求以非同步方式處理 searchParams。請確保您的路由是一個非同步函式 (asynchronous function)，並在存取參數之前明確使用 await。例如：

這個快速調整解決了問題，恢復了我們的動態路由功能。

結論

這個專案是一次實際的深度探索，展示了使用 Prisma MCP 和 AI 驅動開發構建真實應用程式是什麼樣子。

Prisma MCP 伺服器讓我們在幾秒鐘內定義了一個完整的資料庫。這是一個非常簡單的體驗，讓我們能將更多時間花在思考應用程式本身，而不是資料庫帶來的頭痛問題。

與 AI 進行「氛圍編碼」並非完美無缺。它很快地讓我們完成了大部分工作，但往往忽略了小而重要的細節。然而，一旦我們遇到錯誤並指出它，修復就很快到位。

總體而言，這種工作流程使構建電子商務應用程式的核心變得高效。Prisma MCP 輕鬆處理了資料庫管理，而 AI 讓我們在不放棄架構控制權的情況下加快了開發速度。