AI 开发规范

Next.js + React + 社区类（Community）项目，是 AI 最能提效，但也最容易“翻车” 的场景之一。

我先给你一个结论版，然后拆成可执行的方案。

一句话结论（先记住）

社区类项目 = 内容 + 互动 + 个性化。

AI 最适合“内容 & 交互实现”，人必须死守“数据模型 & 性能 & 社区氛围”。

AI 可以让你 快 2～3 倍上线 MVP，但社区产品的长期生命力，靠的是 人设计的规则和边界。

一、社区类项目的核心特征

维度 特点 AI 角色

内容 UGC、动态、评论 ✅ 列表 / 详情 / 表单

互动 点赞、收藏、关注 ✅ 交互实现

个性化 Feed、推荐 ❌ 算法必须人设计

实时性 通知、未读数 ⚠️ AI 辅助

审核 & 风控 敏感内容 ❌ 绝对不能交给 AI

性能 长列表、分页 ❌ 人主导

二、Next.js 在社区项目里的优势（为什么选对了）

✅ App Router

• RSC（React Server Components）非常适合社区内容页

• 列表页、详情页天然 SSR / ISR

✅ SEO & 发现

• 帖子、话题、用户页都需要被索引

✅ 边缘渲染（Vercel / Edge）

• 首屏内容命中率极高

👉 AI + RSC 是目前社区项目性价比最高的组合

三、AI 在 Next.js 社区项目中的最佳分工

✅ 1️⃣ 数据模型（人）

AI 绝不碰的事：

• 表结构

• 关系建模

• 权限边界

✅ 示例（人设计）：

Post

• id
• title
• content (JSON / MDX)
• authorId
• status (draft / published)
• createdAt

Comment

• id
• postId
• authorId
• content
• parentId (nullable)

👉 AI 只能 根据模型生成代码，不能反向影响模型。

✅ 2️⃣ 页面 & 组件（AI 主力）

AI 非常适合：

• 帖子列表 / 瀑布流

• 帖子详情

• 评论树

• 用户主页

• 关注 / 粉丝列表

• 通知中心 UI

✅ Prompt 示例：

用 Next.js App Router + RSC 实现帖子详情页：

• 服务端获取帖子数据
• 评论列表（嵌套）
• 点赞 / 收藏按钮
• 登录态由 useUser hook 提供
• 使用 Server Actions 提交评论

✅ 3️⃣ Server Actions（AI 的甜区）

社区项目大量“小交互”：

• 点赞

• 收藏

• 关注

• 发表评论

✅ AI 可以稳定写好：

'use server'

⚠️ 但：

• 权限校验必须是人写的

• 防抖 / 限频必须人确认

✅ 4️⃣ 状态 & 交互（人机协作）

推荐组合：

场景 方案

全局用户态 React Context / Zustand

列表数据 TanStack Query

表单 React Hook Form + Zod

乐观更新 useOptimistic / useTransition

✅ AI 写实现

✅ 人定 交互语义

✅ 5️⃣ Feed / 推荐（人主导）

Feed 不是 UI，是规则

AI 可以：

• 生成 Feed 列表 UI

• 下拉刷新 / 无限加载

但以下必须人做：

• Feed 排序规则

• 推荐权重

• 冷启动策略

• 黑名单 / 屏蔽逻辑

四、Next.js 社区项目推荐技术栈（AI 友好版）

Next.js (App Router)

TypeScript

Tailwind CSS

shadcn/ui

Zustand（轻量状态）

TanStack Query

Prisma + PostgreSQL

Zod（前后端校验）

UploadThing / Vercel Blob（图片）

Server Actions

✅ 这套栈 AI 熟悉度高、出错率低

五、AI 使用红线（社区项目特别重要）

🚨 绝对不能交给 AI 的 6 件事

1. 权限模型
2. 举报 / 审核逻辑
3. 敏感词 / 风控规则
4. Feed 排序算法
5. 数据库 schema 设计
6. 用户体验决策

社区产品一旦“价值观”出问题，技术再好也没用。

六、一个可直接用的 AI Prompt（社区专用）

你是资深 Next.js 工程师，正在开发一个社区项目。

技术栈：

• Next.js App Router
• React Server Components
• Server Actions
• Tailwind + shadcn/ui
• TypeScript

任务：

实现「帖子详情 + 评论」页面。

要求：

• 帖子数据服务端获取
• 评论支持嵌套
• 登录后才能评论
• 使用 Server Action 提交评论
• 做好权限校验
• 不直接操作数据库以外的逻辑

输出：

• 页面组件
• Server Action
• 类型定义

七、总结一句话

Next.js + 社区项目，AI 是你最优秀的“功能实现者”，

人是社区的“规则制定者 & 氛围守护者”。