用 Prisma MCP 和 Next.js 進行電商應用的隨性編碼

隨著 Prisma MCP 伺服器的釋出，我們希望展示其在實際場景中的應用。為此，我們著手使用 Prisma ORM、Prisma Postgres 和 Next.js 構建了一個電商應用。我們沒有手動編寫所有程式碼，而是採用了“隨性編碼”的方式，讓 AI 根據我們的提示快速實現功能。

以下是完整的開發歷程——包括思考過程、實現和我們在此過程中遇到的錯誤。

注意：這是使用 VS Code Copilot 和 Claude 3.5 Sonnet 完成的

AI 提示技巧（快速概覽）

這些提示策略幫助我們更快地工作，同時又不失對架構的控制

• 明確設定 AI 的角色，以獲得結構化、規範驅動的輸出。
• 儘早提及您的技術棧，以避免工具或模式不匹配。
• 每個提示只專注於一個功能，以減少混淆和錯誤。
• 使用真實的初始資料，以便及早發現佈局或過濾錯誤。
• 將錯誤視為反饋——將其貼上回去通常能快速解決問題。
• 明確執行時邊界，避免在伺服器程式碼中呼叫客戶端鉤子等問題。

提示 AI 扮演軟體架構師

我們首先讓 AI 進入正確的思維模式。為確保它遵循我們的專案規範並做出合理的架構選擇，我們要求它扮演軟體架構師的角色，並遵循一套清晰的實現指南。

我們的提示

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

你將收到功能描述和技術棧資訊。只針對每個功能提供結構化的技術規範，暫時不提供程式碼。邏輯清晰地分解任務，並將每個規範限制在約 200 字以內。避免提出未來或理論性的想法——只描述當前所需的內容。

等待功能和技術棧資訊開始。*

🧠 提示：在開始時定義 AI 的角色（例如，“軟體架構師”）。這會促使模型輸出結構化、側重於實現的響應，而不是直接生成雜亂或通用的程式碼。

後續提示

技術棧

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

🧠 提示：儘早將您的技術棧包含在提示中。這可以減少猜測，並防止 AI 建議不相容的工具或模式。

AI 的回應

我理解您希望為使用以下現代技術棧的專案設定技術規範

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

在我提供功能規範之前，我想先確保我們已設定好適當的專案結構...

從那時起，AI 響應的結構化實現計劃與我們的技術棧和開發流程高度契合。

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

在技術棧和上下文都就緒後，我們準備好開始構建主頁並設定資料庫 schema。我們首先向 AI 提供了主頁功能的描述

我們的提示

功能：主頁

一個簡單的電商主頁，包含以下內容

• 帶背景圖片和 CTA 按鈕的全寬英雄部分
• 特色產品網格（限 6 個），透過伺服器元件從資料庫中獲取
• 每個產品應顯示圖片、名稱和價格
• 所有圖片使用 Next.js Image 元件
• 如果使用外部圖片源，請將所需域新增到 next.config.js
• CTA 按鈕應連結到 /shop 路由

🧠 提示：一次只提示一個功能。這會帶來更清晰的邏輯和更少的幻覺，因為 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 語言（PSL），它簡單、宣告性強，AI 易於準確生成，因此執行順利。

以下是完整的 schema

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

讓 AI 為我們的資料庫填充初始資料

schema 準備好後，我們的資料庫仍然是空的。我們需要測試資料來工作，所以我們要求 AI 處理資料填充

我們的提示

你能為一些類別和產品生成初始資料，以便我們開始測試 UI 嗎？

🧠 提示：在填充資料時使用真實世界的資料。它有助於您及早發現佈局或邊緣情況的錯誤，並使 UI 的行為更接近生產環境。

AI 的回應

當然。我將編寫一個 seed.ts 指令碼，它首先建立類別，然後建立具有正確類別關係的產品。我還會將一個 seed 命令新增到您的 package.json 中，以便您可以輕鬆執行它。

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

然後它將以下內容新增到我們的 package.json 中

併為我們運行了命令

AI 的確認

資料填充完成。您可以開啟 Prisma Studio 檢視您的資料。

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

使用 Prisma ORM 構建一個可過濾的商店頁面

一旦我們有了初始資料，我們便開始構建 /shop 頁面。我們的目標是讓使用者可以按類別過濾產品，並將結果以整潔的網格佈局顯示。

我們的提示

我們希望建立一個 /shop 頁面，預設列出所有產品，但也支援透過搜尋引數按類別過濾。

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

AI 的回應

明白。我將獲取類別列表，並使用 searchParams 可選地過濾產品。然後我將透過 props 將結果傳遞給 CategoryFilter 和 ProductGrid 元件。由於 searchParams 是動態的，請確保此函式是非同步的。

以下是 AI 生成程式碼的關鍵部分——它為商店頁面的核心功能提供支援

• 為過濾 UI 獲取所有類別
• 獲取產品，可選地透過 searchParams 按類別過濾
• 包含每個產品的類別，以避免額外的查詢

獲取資料後，我們序列化了產品以供客戶端使用，並使用 Suspense 邊界渲染了所有內容，以實現更流暢的使用者體驗，在元件載入時顯示載入佔位符，以避免佈局偏移並提供即時視覺反饋。

最終的使用者介面包括頂部的篩選條和下方的產品網格

使用 React Context 實現持久化購物車功能

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

我們沒有使用身份驗證或後端會話，因此 localStorage 為我們提供了一種在頁面重新載入時持久化購物車資料的簡便方法。

我們的提示

你能用 React Context 設定一個完整的購物車嗎？

• 支援新增、刪除、更新數量
• 持久化到 localStorage
• 在頁首中顯示商品數量

AI 的回應

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

以下是最終設定的精簡版

這為我們提供了所需的一切：共享狀態、持久化購物車資料，以及透過 useCart() 鉤子在應用程式的任何地方輕鬆訪問，供 AI 使用。

解決沿途遇到的錯誤

在整個過程中，我們遇到了一些問題，但只要我們提供了相關的錯誤訊息，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 能夠非同步處理。請確保您的路由是一個非同步函式，並在訪問引數之前明確地 await 這些引數。例如

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

結論

這個專案是對使用 Prisma MCP 和 AI 驅動開發構建真實應用程式的實踐性深入探討。

Prisma MCP 伺服器讓我們能夠在幾秒鐘內定義一個完整的資料庫。這是一種超簡單的體驗，讓我們有更多時間思考應用程式本身，而不是為資料庫煩惱。

與 AI 進行隨性編碼並非完美無缺。它 *迅速* 地讓我們完成了大部分工作，但它經常會忽略一些雖小但重要的細節。然而，一旦我們遇到錯誤並指出，修復就會很快到來。

總的來說，這個工作流程使得構建電商應用的核心部分變得高效。Prisma MCP 毫不費力地處理了資料庫管理，而 AI 則讓我們在不放棄架構控制權的情況下更快地推進。