使用 Prisma MCP 和 Next.js 随意编写电子商务应用程序

随着 Prisma MCP 服务器的发布，我们希望展示它在实际场景中的实用性。为了证明这一点，我们着手使用 Prisma ORM、Prisma Postgres 和 Next.js 构建一个电子商务应用程序。我们没有手动编写所有代码，而是采用了“氛围编码”的方式，让 AI 根据我们的提示快速实现功能。

这是完整的旅程——包括思考过程、实现和我们在此过程中遇到的错误。

注意：这是使用带有 Claude 3.5 Sonnet 的 VS Code Copilot 完成的

AI 提示技巧（快速概览）

这些提示策略帮助我们更快地工作，同时不失对架构的控制

• 明确设定 AI 的角色，以获得结构化、规范驱动的输出。
• 尽早提及您的技术栈，以避免工具或模式不匹配。
• 每个提示只关注一个功能，以减少混淆和错误。
• 使用真实的种子数据，尽早发现布局或过滤错误。
• 将错误视为反馈——将其粘贴回去通常会带来快速修复。
• 明确运行时边界，避免在服务器代码中调用客户端钩子等问题。

提示 AI 扮演软件架构师的角色

我们首先让 AI 进入正确的思维模式。为了确保它遵循我们的项目约定并做出合理的架构选择，我们要求它扮演软件架构师的角色，并遵循一套明确的实施指南。

我们的提示

您是一名软件架构师。您的任务是为工程师提供清晰、精确的实现规范。

您将收到功能描述和技术栈。仅以每个功能的结构化技术规范响应，暂时不提供代码。逻辑地分解事物，并将每个规范限制在约 200 字。避免未来或理论性的想法——只描述现在需要的内容。

等待功能和技术栈开始。*

🧠 提示：在开始时定义 AI 的角色（例如“软件架构师”）。这会促使模型输出结构化、以实现为中心的响应，而不是直接跳到混乱或通用的代码。

后续提示

技术栈

• 框架：Next.js 15，带 App Router 和 TypeScript
• 样式：TailwindCSS
• 数据库 ORM：使用 Prisma MCP 服务器定义模式并生成数据库的 Prisma ORM
• 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 以搭建项目骨架

在技术栈和上下文就位后，我们准备着手构建主页并设置数据库模式。我们首先向 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 就生成了一个模式来建模我们商店的数据。

我们要求 AI 为我们的数据库定义两个核心模型：Category 和 Product，其中每个产品都属于一个类别，呈一对多关系。这得益于 Prisma 的模式语言 (PSL)，它简单、声明式，并且易于 AI 精确生成，因此运行顺畅。

这是完整的模式

这为我们提供了一个简单、关系型的结构，易于查询，非常适合我们想要的分类。

让 AI 填充我们的数据库

模式到位后，我们的数据库仍然是空的。我们需要测试数据来工作，所以我们要求 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 边界渲染所有内容，以获得更流畅的用户体验，在组件加载时显示加载占位符，以避免布局偏移并提供即时视觉反馈。

最终的 UI 顶部包含一个筛选栏，下方是产品网格

用于持久化购物车功能的 React Context

商店页面就绪后，我们需要一个持久化的购物车系统。一个简单且会话安全的系统，由于我们没有使用身份验证或后端会话，localStorage 是在页面重新加载之间保留购物车数据的明显选择。

我们没有使用身份验证或后端会话，所以 localStorage 提供了一种简单的方式来在页面重新加载时持久化购物车。

我们的提示

您能使用 React Context 设置一个完整的购物车吗？

• 支持添加、删除、更新数量
• 持久化到 localStorage
• 在标题中显示商品数量

AI 的响应

我将创建一个 CartContext，其中包含管理状态、同步到 localStorage 和计算总商品数量的辅助函数。这将完全在客户端使用“use client”实现。

这是最终设置的精简版

这为我们提供了所需的一切：共享状态、持久化购物车数据，以及 AI 可以在应用程序中的任何位置通过 useCart() 钩子轻松访问。

解决过程中遇到的错误

在此过程中，我们遇到了一些问题，但一旦我们提供了相关的错误消息，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 以异步方式处理。确保您的路由是异步函数，并在访问参数之前显式等待它们。例如

这一快速调整解决了问题，恢复了我们的动态路由功能。

结论

这个项目是对使用 Prisma MCP 和 AI 驱动开发构建真实应用程序的实际深入探索。

Prisma MCP 服务器让我们能够在几秒钟内定义一个完整的数据库。这是一个超级简单的体验，让我们可以花更多时间思考应用程序本身，而不是数据库的麻烦。

使用 AI 进行“氛围编码”并非完美无缺。它**很快**就让我们完成了大部分工作，但它经常会忽略一些细小但重要的细节。然而，一旦我们遇到错误并指出，修复工作就很快完成了。

总的来说，这种工作流使构建电子商务应用程序的核心变得高效。Prisma MCP 轻松处理了数据库管理，AI 让我们在不放弃架构控制的情况下移动得更快。