当前位置：首页 > news >正文

AI全栈生成提示词平台：Next.js 15+Supabase+Cloudflare R2技术架构解析

news 2026/5/4 14:04:12

1. 项目概述：一个由AI全栈生成的提示词分享平台

最近在GitHub上看到一个挺有意思的开源项目，叫“Prompt Planet”。它最吸引我的地方，不是功能有多复杂，而是它的“出身”——这个项目的每一行代码、每一份文档，甚至每一个设计决策，都是由AI生成的。没错，是100% AI Generated。作为一个在Web开发领域摸爬滚打了十多年的老码农，我对这种宣称“全AI生成”的项目总是抱有极大的好奇和一丝怀疑。它真的能用吗？代码质量如何？架构设计是否合理？带着这些疑问，我决定深入这个项目的源码，看看AI在2024年到底能把一个完整的Web应用做到什么程度。

Prompt Planet本质上是一个提示词（Prompt）分享与管理平台。你可以把它理解为一个垂直领域的“掘金”或“Product Hunt”，但内容聚焦于AI提示词。用户可以在上面创建、发布、浏览和收藏高质量的提示词，用于各种AI模型（如ChatGPT、Claude、Midjourney等）。项目采用了现代Web开发的黄金技术栈：Next.js 15（App Router）、React 18、Tailwind CSS 4，后端则完全构建在Supabase之上，存储用了Cloudflare R2，部署在Vercel。这套组合拳是目前个人开发者和小团队构建全栈应用最高效、最经济的选择之一。接下来，我将从技术选型、核心实现、部署踩坑以及AI生成代码的品鉴等多个维度，为你完整拆解这个项目。

2. 技术栈深度解析：为什么是这套组合？

看到项目技术栈的第一眼，我的感觉是“稳”。这几乎就是当前构建高性能、全栈React应用的事实标准。但每一个选择背后都有其深意，绝不仅仅是跟风。

2.1 前端基石：Next.js 15 + React 18 + Tailwind CSS 4

Next.js 15与App Router：这是整个项目的骨架。选择Next.js 15的App Router而非旧的Pages Router，是一个面向未来的决定。App Router带来了基于React Server Components的架构，这意味着开发者可以更精细地控制哪些组件在服务器端渲染（SSR），哪些在客户端渲染（CSR）。对于Prompt Planet这样的内容型平台，首页、列表页、详情页这些对SEO和首屏速度要求极高的页面，完全可以采用服务端组件，直接输出HTML，让用户和搜索引擎都能瞬间看到内容。而像创建提示词的表单、用户仪表盘这些交互复杂的部分，则用客户端组件处理。这种混合渲染模式，是App Router最大的魅力所在。

注意：从Pages Router迁移到App Router有一定学习成本，尤其是数据获取方式（从getServerSideProps变为直接在组件中async/await）和布局结构的变化。但一旦掌握，开发效率和应用性能的提升是显著的。

React 18与并发特性：React 18的并发渲染（Concurrent Rendering）为应用带来了更流畅的用户体验。虽然在这个项目中可能没有用到useTransition、useDeferredValue这些高级API，但React 18的基础确保了应用能更好地利用现代浏览器的能力。更重要的是，它与Next.js 15的App Router是深度集成的。

Tailwind CSS 4：这是我个人非常推崇的样式方案。很多人初学Tailwind会觉得它像是在写行内样式，但用久了就会发现，它通过一套严格的设计令牌（颜色、间距、字体大小等）约束，极大地保证了设计的一致性。版本4在性能和功能上又有提升。在这个项目中，所有UI组件，从按钮、卡片到复杂的多步表单，都通过Tailwind的实用类（Utility Classes）构建，这使得样式与组件高度绑定，没有全局CSS的命名冲突和样式污染问题，也极大地提升了开发速度——你不需要在JS文件和CSS文件之间反复横跳。

2.2 状态与数据管理：Zustand + React Query + React Hook Form

这是一个非常经典且高效的组合，各司其职，没有出现一个“巨无霸”状态库包办一切的情况。

Zustand负责客户端全局状态：比如用户主题（深色/浅色模式）的偏好，它被存储在localStorage中，并通过Zustand提供一个全局的、类型安全的Hook（如useThemeStore）供任何组件消费。Zustand的API极其简洁，几乎没有样板代码，比Redux轻量得多，非常适合管理这类非持久化的UI状态。

React Query（现为TanStack Query）负责服务器状态：这是项目数据层的核心。所有与后端Supabase的交互，无论是获取提示词列表、用户信息，还是提交新建的提示词，都通过React Query来管理。它的强大之处在于自动处理了缓存、后台刷新、请求去重、错误重试等繁琐问题。例如，当用户在“我的提示词”页面删除一条记录后，React Query会自动使相关的查询缓存失效，并重新获取数据，UI会自动更新，开发者几乎不需要手动操作状态。

React Hook Form负责表单状态：创建提示词是一个包含5个步骤的复杂表单。React Hook Form通过非受控组件和原生表单验证，实现了极高的性能。它避免了每次输入都触发整个组件重渲染的问题，并且与Zustand、React Query能很好地集成。例如，表单的草稿可以自动保存到Zustand或直接提交到React Query的Mutation。

2.3 后端即服务：Supabase的全栈解决方案

Supabase在这个项目中扮演了“全能后端”的角色。它不是一个简单的数据库，而是一个集成了认证、数据库、实时API、存储和边缘函数的BaaS平台。

PostgreSQL与Row Level Security (RLS)：所有数据都存在PostgreSQL中。Supabase为每张表自动生成RESTful和GraphQL API。最关键的是RLS（行级安全策略）。通过编写策略（Policies），可以在数据库层面实现精细的权限控制。例如，一条“用户只能修改自己创建的提示词”的策略，可以写为：

CREATE POLICY "Users can update own prompts" ON prompts FOR UPDATE USING (auth.uid() = user_id);

这样，即使前端请求被恶意修改，也无法越权操作，安全防线建在了最底层。

实时订阅（Realtime）：虽然在这个项目的当前版本中可能未显式使用，但Supabase内置的实时功能意味着未来可以轻松实现如“提示词新评论通知”等功能，无需自建WebSocket服务。

Edge Functions：用于运行无服务器函数。比如，当需要调用一个第三方AI API来评估提示词质量，或者进行更复杂的图像处理时，就可以编写Edge Function，它会在全球边缘节点运行，延迟极低。

2.4 存储与部署：Cloudflare R2 + Vercel

Cloudflare R2对象存储：用户上传的提示词示例图片，存储在这里。为什么不用Supabase Storage？R2的核心优势是零出口费用。Supabase Storage的流量是收费的，而R2对于公开可读的对象（如图片）的流出流量是免费的，这对于一个可能产生大量图片访问的应用来说，能节省可观的成本。结合Cloudflare的全球CDN，图片加载速度也得到保障。

Vercel部署：Next.js的亲爹，部署体验无缝衔接。git push后自动构建、部署、预览。更重要的是，Vercel的全球边缘网络与Next.js的服务端组件、边缘函数完美配合，能将页面动态地渲染在离用户最近的节点。项目中的next.config.js配置了R2的图像优化域名，使得通过Next.js Image组件加载的图片也能享受到自动优化和CDN加速。

这套技术栈的选择，体现了一种“精益全栈”的思想：用最少的运维成本、最高的开发效率，构建一个性能优异、功能完备的现代Web应用。AI在生成这个项目时，显然吸收了当前社区的最佳实践。

3. 核心功能实现拆解：从UI到数据流

光有好的技术栈不够，关键是如何用它们实现功能。我们深入看看几个核心功能模块是如何落地的。

3.1 多步提示词创建向导

这是应用最复杂的前端交互。一个5步的表单（基本信息、内容、图片、分类、发布预览），需要管理大量状态，并保证良好的用户体验。

状态管理与流程控制：项目没有使用笨重的useState来管理每一步和整个表单数据，而是采用了更优雅的组合。很可能使用了一个自定义Hook，比如usePromptCreationWizard。这个Hook内部用Zustand或React Hook Form管理表单数据，同时管理当前步骤（currentStep）、步骤完成状态等。每一步的表单验证通过React Hook Form的trigger函数触发，验证通过后才允许进入下一步。

草稿自动保存：为了防止用户意外关闭页面导致数据丢失，实现了草稿自动保存。这里通常结合useEffect和防抖（debounce）函数。监听表单数据的变化，当变化发生后，延迟一段时间（如1秒），将数据保存到localStorage或通过React Query的缓存机制暂存。当用户重新打开创建页时，先从这些地方恢复数据。

实时预览：在Markdown编辑步骤，需要实时将用户输入的Markdown文本渲染为HTML预览。这里没有用沉重的全功能编辑器，而是很可能采用了轻量级方案，如react-markdown库。一边是简单的textarea，另一边是react-markdown组件，表单数据的变化通过状态驱动两边同步更新，性能很好。

图片上传与预览：这是涉及前后端协作的典型场景。

前端：使用<input type="file">或更友好的拖拽库（如react-dropzone），监听文件选择事件。
预处理：在上传前，通常会在前端进行一些校验（文件类型、大小）和预览（通过URL.createObjectURL生成临时本地URL显示缩略图）。
上传：当用户确认后，前端调用一个API路由（Next.js API Route）或直接使用Supabase客户端库。为了安全，绝对不应该将Supabase的服务端密钥暴露给前端。最佳实践是通过Next.js的API Route作为代理，或者使用Supabase针对前端生成的、权限受限的anon key配合RLS策略。
后端处理：API Route接收到文件后，将其上传至Cloudflare R2，生成一个永久的公开访问URL，并将这个URL存回数据库的prompts表。
优化显示：前端使用Next.js的<Image />组件显示该URL，并利用其自动的图片优化（调整大小、格式转换）和懒加载功能。

3.2 响应式布局与深色模式

基于Tailwind的响应式设计：整个UI大量使用了Tailwind的响应式前缀，如md:grid-cols-2 lg:grid-cols-3。这意味着在移动端（默认）可能显示单列，在平板（md:）显示两列，在桌面（lg:）显示三列。这种“移动优先”的断点系统使得响应式开发变得非常直观。

深色模式的系统级集成：深色模式的实现很巧妙。

初始判断：在应用根组件或一个ThemeProvider中，使用useEffect在客户端读取localStorage中用户之前的手动选择（theme），如果不存在，则使用window.matchMedia('(prefers-color-scheme: dark)')来检测系统偏好。
状态存储：将这个主题值（'light' | 'dark' | 'system'）存入Zustand的全局状态，并同时存入localStorage持久化。
应用样式：根据当前主题值，在<html>标签上设置class="dark"或移除。Tailwind CSS的深色模式变体dark:会基于这个类名生效。例如，bg-white dark:bg-gray-900。
监听系统变化：如果用户选择的是“跟随系统”，还需要监听系统主题变化事件window.matchMedia(...).addEventListener('change', ...)，并在变化时更新应用主题。

这种实现兼顾了用户自主选择和系统一致性，体验很完整。

3.3 性能优化策略

Next.js和这套技术栈提供了开箱即用的性能优化，但项目也做了一些针对性配置。

静态生成与增量静态再生：对于不常变化的页面，如“关于我们”、“使用条款”，可以在构建时静态生成（Static Generation）。对于提示词列表页，可以使用增量静态再生（ISR）。在getStaticProps或App Router的页面组件中，设置revalidate: 60，意味着页面最多每60秒重新生成一次，既保证了速度，又保证了内容的相对新鲜。

图片优化：如前所述，全部使用Next.js Image组件。它自动将图片转换为更高效的WebP格式（如果浏览器支持），按需调整尺寸，并通过loading="lazy"实现懒加载。配合Cloudflare R2和CDN，图片加载性能是顶尖的。

代码分割与懒加载：Next.js默认支持基于路由的代码分割。此外，对于首屏不需要的大型组件，可以使用React.lazy和Suspense进行动态导入。例如，复杂的Markdown编辑器或图表库可以懒加载。

React Query的缓存策略：为不同的查询设置合理的staleTime和cacheTime。例如，用户个人资料可能staleTime设为5分钟，而实时性要求高的新提示词列表可能设为30秒。这减少了不必要的网络请求。

4. 从零开始部署与踩坑实录

理论讲完了，我们来点硬的。假设你现在要完全复现或基于这个项目进行二次开发，以下是我一步步走下来的实操记录和遇到的坑。

4.1 环境准备与初始化

首先，把代码拉下来：

git clone https://github.com/StevenQi7/Prompt-Planet.git cd Prompt-Planet npm install

这里第一个可能遇到的坑是Node.js版本。项目要求18.x以上。如果你用nvm管理多版本，确保切换正确：nvm use 18。然后用cp .env.example .env.local复制环境变量模板。

4.2 配置Supabase（最关键的步骤）

创建项目：去Supabase官网新建一个项目，选择离你用户群近的区域。
获取连接信息：在项目设置 -> API页面，找到URL和anon key（公开密钥）。这两个值要填到你的.env.local文件里：
```
NEXT_PUBLIC_SUPABASE_URL=你的项目URL NEXT_PUBLIC_SUPABASE_ANON_KEY=你的anon key
```
运行SQL初始化数据库：Supabase提供了在线SQL编辑器。你需要运行项目supabase目录下的SQL迁移文件（如果项目提供了的话），或者根据项目文档手动创建表。核心表通常包括：
- profiles：扩展自auth.users的用户信息表。
- prompts：提示词主表，包含标题、内容、分类、标签、图片URL、作者ID等字段。
- categories：分类表。
- favorites：用户收藏关系表。
启用认证并配置Email：在Supabase的Authentication -> Providers中启用Email认证。你还需要配置一个邮件服务商（如SendGrid）来发送确认邮件，或者先在项目设置中禁用邮件确认，方便初期测试。

设置Row Level Security：这是Supabase安全的核心。确保为每张表都创建了合适的RLS策略。例如，对于prompts表，基础的策略可能是：

-- 允许任何人读取已发布的提示词 CREATE POLICY "Prompts are viewable by everyone" ON prompts FOR SELECT USING (published = true); -- 允许登录用户创建提示词 CREATE POLICY "Individuals can create prompts" ON prompts FOR INSERT WITH CHECK (auth.uid() = user_id); -- 允许用户更新自己的提示词 CREATE POLICY "Individuals can update own prompt" ON prompts FOR UPDATE USING (auth.uid() = user_id);

踩坑记录1：RLS策略写错是最常见的问题。曾经因为一条FOR INSERT策略漏写了WITH CHECK，导致插入数据时user_id可以为空或被篡改，造成数据混乱。务必理解USING（用于SELECT, UPDATE, DELETE）和WITH CHECK（用于INSERT, UPDATE）的区别。

4.3 配置Cloudflare R2

在Cloudflare控制台创建R2存储桶，名字随意，例如prompt-planet-assets。
创建API令牌，需要赋予Object Read/Write权限。

将存储桶的Bucket Name、Account ID、Access Key ID和Secret Access Key填入.env.local。

R2_ACCOUNT_ID=你的账户ID R2_ACCESS_KEY_ID=你的Access Key R2_SECRET_ACCESS_KEY=你的Secret Key R2_BUCKET_NAME=prompt-planet-assets NEXT_PUBLIC_R2_PUBLIC_DOMAIN=你的R2公开域名

配置CORS（跨域资源共享）。在存储桶设置中，添加CORS规则，允许你的前端域名（如http://localhost:3000和生产域名）的GET、PUT、POST等请求。

踩坑记录2：图片上传后无法在前端显示，控制台报CORS错误。这是因为R2存储桶默认的CORS规则很严格。必须在R2的控制台为存储桶明确添加允许你前端源（Origin）的规则。规则类似：
[ { "AllowedOrigins": ["https://yourdomain.com", "http://localhost:3000"], "AllowedMethods": ["GET", "PUT", "POST", "DELETE"], "AllowedHeaders": ["*"], "ExposeHeaders": ["ETag"] } ]

4.4 配置Next.js环境与部署

环境变量配置好后，运行npm run dev，理论上应用就能在本地跑起来了。但要让图片优化等功能正常工作，还需要配置next.config.js。项目中的配置应该已经包含了R2的远程图像模式：

// next.config.js const nextConfig = { images: { remotePatterns: [ { protocol: 'https', hostname: '你的R2公开域名', // 或者 hostname: '**.r2.cloudflarestorage.com', }, ], }, };

这告诉Next.js Image组件，允许从你的R2域名加载和优化图片。

部署到Vercel：

将代码推送到GitHub仓库。
在Vercel中导入该仓库。
Vercel会自动检测到是Next.js项目。在环境变量配置页面，将你.env.local中的所有变量（除了那些以NEXT_PUBLIC_开头的，它们会自动从构建环境注入）一一添加进去。特别注意：NEXT_PUBLIC_SUPABASE_URL和NEXT_PUBLIC_SUPABASE_ANON_KEY也需要添加，因为它们在构建时被使用。
点击部署。Vercel会自动运行npm run build，然后部署。

踩坑记录3：部署后，应用运行正常，但图片优化（Next.js Image）不工作，图片显示为破碎图标。检查Vercel的构建日志，发现错误提示“Invalid Image Source”。这是因为在构建阶段，next.config.js中images.remotePatterns的域名解析可能有问题，或者R2的令牌权限不足。解决方案：确保R2的API令牌具有读取权限，并且next.config.js中的hostname配置正确。有时使用通配符**.r2.cloudflarestorage.com比具体域名更可靠。

4.5 调试与问题排查

在开发过程中，你一定会遇到各种问题。以下是我的调试工具箱：

前端网络请求：浏览器开发者工具的Network面板是你的第一站。查看请求的URL、Payload、Headers和Response。Supabase的请求出错时，通常会返回详细的错误信息。
Supabase日志：在Supabase控制台的Logs部分，可以查看所有数据库操作、认证事件和Edge Function的日志，对于排查RLS策略失败或SQL错误至关重要。
React Query Devtools：安装@tanstack/react-query-devtools，在开发环境中启用它。它可以可视化地展示所有查询和变更的状态（loading, error, success）、缓存的数据，方便你理解数据流。
状态检查：使用React DevTools检查组件的Props和State，以及Zustand Store的当前状态。
Vercel函数日志：如果使用了Vercel Serverless Functions或Edge Functions，在Vercel项目的Functions标签页下可以查看实时日志。

5. AI生成代码的品鉴与思考

最后，我们来聊聊这个项目最独特的标签——“100% AI Generated”。通读代码后，我有一些非常直观的感受。

优点与惊艳之处：

架构清晰，符合最佳实践：项目的整体结构、组件拆分、Hook的使用方式，都非常规范。没有看到明显的“反模式”代码。AI似乎很好地学习了当前React/Next.js社区的主流范式。
代码一致性极高：由于是同一个AI（或同一系列提示词）生成的，代码风格、命名约定、目录结构高度统一，这比多人协作的项目往往做得更好。
文档和注释齐全：自动生成的JSDoc注释、README、甚至API文档都有模有样，降低了上手成本。
考虑了完整的产品流程：从用户注册登录、创建内容、到浏览、交互，功能链路是完整的，不是一个简单的Demo。

局限性与“非人”痕迹：

缺乏业务逻辑深度：代码在技术实现上很标准，但在真正的业务逻辑复杂性上有所欠缺。例如，提示词的“质量评分”、“智能推荐”、“版权检测”等更高级的功能，要么没有，要么实现得非常基础。AI擅长组合已知模式，但创造全新的、深度的业务逻辑仍是难点。
错误处理有时过于理想化：代码中的错误处理往往是通用的try-catch和显示一个Toast通知。但对于特定场景的、更优雅的降级处理或重试策略，考虑得不够细致。这需要人类开发者基于实际业务经验来判断。
配置和集成细节需要人工校准：就像我们前面在部署中踩的坑一样，AI生成了配置的框架，但具体的API密钥、CORS设置、环境变量等，必须由开发者根据实际情况去填写和调试。AI无法知道你的Cloudflare Account ID是什么。
性能优化的“知其然不知其所以然”：代码中使用了React.memo、useCallback等优化手段，但有时可能在不必要的地方使用，比如对一个简单的、不会重渲染的子组件也用了memo。人类开发者能更准确地判断性能瓶颈所在。

给我的启示：

这个项目不是一个噱头，它实实在在地证明，AI（特别是像Cursor、Claude、GPT-4这类强大的代码生成工具）已经能够承担大量基础性、模式化的编码工作。它极大地提升了开发者的“启动速度”和“生产力下限”。对于一个有经验的开发者来说，利用这样的AI生成项目作为起点，然后注入深度的业务逻辑、进行细致的调优和打磨，可以比从零开始节省70%以上的初始时间。

然而，它远未到替代开发者的地步。架构设计、深度业务理解、复杂问题排查、性能调优、安全审计，这些核心价值依然牢牢掌握在人类开发者手中。AI是一个强大的“副驾驶”，但“机长”仍然需要你来当。这个项目最好的使用方式，是把它看作一个极其优秀的、现代化的“样板间”（Boilerplate），你可以在此基础上快速装修，打造出属于自己的独特产品。

查看全文

http://www.jsqmd.com/news/751148/