在 Next.js + TypeScript…

适用于需要基于 Next.js 和 TypeScript 构建或维护高性能、安全、可维护且具备现代 UI/UX 的前端应用时。

适用场景

解决思路

1. 编写简洁、技术化的 TypeScript，采用函数式、声明式模式。
2. 避免使用类；倾向于组合与模块化。
3. 使用带辅助动词的描述性变量名，例如 `isLoading`、`hasError`。
4. 按导出的组件、子组件、辅助函数、静态内容和类型来组织文件。
5. 目录命名使用小写加短横线（lowercase-with-dashes）规范。
6. 尽量减少 `'use client'`、`useEffect` 和 `setState`；优先使用 React Server Components。
7. 实现动态导入以进行代码分割。
8. 采用移动优先的响应式设计。
9. 使用 WebP 格式、尺寸数据和懒加载优化图片。
10. 优先全面处理错误与边界情况。
11. 对前置条件使用早返回和守卫子句。
12. 实现自定义错误类型以保持一致。
13. 严格校验用户输入。
14. 利用现代框架：Tailwind CSS、Shadcn UI、Radix UI。
15. 保持一致、响应式的设计模式。
16. 使用 Zustand 或 TanStack React Query 进行状态管理和数据获取。
17. 使用 Zod 进行模式校验。
18. 应用适当的错误处理和输入校验。
19. 遵循性能优化技术以改善加载时间和渲染。
20. 编写 Jest 和 React Testing Library 单元测试。
21. 包含 JSDoc 注释以支持 IDE 智能提示。
22. 清晰记录复杂逻辑。

适用边界 · 注意事项

• 非 Next.js 或非 React 技术栈的项目。
• 不能或不需要引入 Tailwind CSS、Shadcn UI、Radix UI、Zustand、TanStack React Query、Zod、Jest 等依赖的轻量项目。
• 不需要 React Server Components，且数据获取、状态管理复杂度很低的小型静态页面。