用 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 则让我们在不放弃架构控制权的情况下更快地推进。