手帐 Blog

主题

09 · 用 AI 写 React/Next：审查清单与轻量测试 ​

目标：把 AI 从「代写人」变成「初级同事」——你负责规格与官方对照，它负责起草；并会为纯逻辑写 1～2 个轻量测试。
真源：https://react.dev/ · https://nextjs.org/docs/app/ · Testing

1. 角色分工（默认） ​

角色负责
你需求边界、官方对照、pnpm dev / 测试、是否引入依赖
AI草稿实现、解释报错、提出 idiomatic 改写
官方文档仲裁「该不该这么写」

一句话：AI 可以加速，不能授权。

2. 高质量提示词模板 ​

实现类 ​

text
技术约束：
- Next.js App Router + React（写明大版本若已知）+ TypeScript
- 默认 Server Components；仅交互叶子加 'use client'
- 写操作用 Server Actions；禁止默默加 Zustand / React Query / UI 库
- 禁止 Pages Router、next/router

需求：
- <路由 / 输入输出 / 验收标准>

请先给出：
1) 文件树与每个文件 Server 或 Client
2) 对照的官方文档 URL
3) 再给最小实现

审查类 ​

text
请做 React/Next 代码审查（不重写大段）：
清单见下。只给最小 diff。
每个问题引用 react.dev 或 nextjs.org 章节名。

3. 审查清单（打印级） ​

每次合并 AI 代码前过一遍：

  • [ ] 路由时代：有无 pages/、next/router、过时 getServerSideProps？
  • [ ] 'use client' 范围：是否过大？交互能否下沉到叶子？
  • [ ] 序列化：Server → Client props 是否可序列化？有无传函数？
  • [ ] Effect：是否把派生状态塞进 useEffect？（对照 You Might Not Need）
  • [ ] 数据：首屏列表是否无故 useEffect+fetch？能否 Server？
  • [ ] 写操作：是否有 Server 侧校验？变更后是否 revalidatePath/Tag？
  • [ ] 依赖：本次是否新增 package？你是否点头？
  • [ ] 密钥：有无把 secret 写进 Client 组件？
  • [ ] a11y 底线：按钮有 type、表单有 label/name？
  • [ ] 可运行：你本地 pnpm dev / 相关脚本是否真跑过？

4. 轻量测试（先测纯函数） ​

官方 Testing 页介绍 Jest / Vitest / Playwright 等集成。入门期优先：

  1. 把可测逻辑抽到 lib/（如 slugify、validateTitle）
  2. 用 Vitest（或官方当前推荐）测纯函数
  3. 组件测试（RTL）有余力再加 1 个「渲染 + 点击」

示例纯函数：

ts
// lib/validate-title.ts
export function validateTitle(raw: string): string | null {
  const t = raw.trim()
  if (!t) return null
  if (t.length > 100) return null
  return t
}
ts
// lib/validate-title.test.ts
import { describe, expect, it } from 'vitest'
import { validateTitle } from './validate-title'

describe('validateTitle', () => {
  it('trims and accepts', () => {
    expect(validateTitle('  hi  ')).toBe('hi')
  })
  it('rejects empty', () => {
    expect(validateTitle('   ')).toBeNull()
  })
})

安装与配置以 Next.js Testing 当前文档为准（版本不同步骤略有差异）。目标不是覆盖率刷满，而是：AI 改校验逻辑时你有红灯。

5. AI 常见幻觉（本系列专项） ​

幻觉你怎么验
混用 App/Pages API搜项目里是否出现 getServerSideProps、next/router
发明 use server 写在客户端事件里乱调无边界对照 Server Actions 文档
「必须上 Redux」反问：URL + Server 是否已够？
乱改依赖数组消 ESLint对照 hooks 官方，重构而非删 deps

6. 必做验收 ​

  • [ ] 保存本篇清单；对 08 的 Actions Lab 自审一遍并记下 1 条改进
  • [ ] 抽出至少 1 个纯函数并写 2 个测试用例（能跑或至少写好待跑）
  • [ ] 能向别人说清：你与 AI 与官方的三角关系

7. 下一步 ​

→ 10 · 迷你笔记板小项目落地

官方入口 ​