用途:为使用 Next.js(App Router)、React、TypeScript 和 Tailwind CSS 的现代应用开发提供综合规范与最佳实践,保证项目在一致性、性能和可维护性上达标。
主要能力与原则:默认使用 React 服务端组件(RSC)以减少客户端 JavaScript;仅在需要交互或浏览器 API 时使用 "use client"。所有文件使用 TypeScript,对象形状优先用 interface 而非 type,避免 enum,改用对象映射或联合类型。严格遵循 App Router 约定,正确使用 layout.tsx、page.tsx、loading.tsx、error.tsx 和 route.ts。使用函数组件与声明式模式,完全避免类组件。
项目结构与命名:目录和文件名使用小写加连字符(如 components/auth-wizard、app/dashboard);按功能分组文件;组件使用具名导出,App Router 特殊文件(page.tsx、layout.tsx)除外需默认导出;类型与接口就近定义或放入共享 types 目录。
数据获取与状态:在服务端组件中用 fetch 或直接数据库调用(如 Drizzle、Prisma)获取数据;不要用 useEffect 或 useState 做数据获取;用 Server Actions 处理数据变更与表单提交;将预期错误建模为 Server Actions 的返回值,而非依赖 try/catch 控制流程;URL 搜索参数状态管理可用 nuqs 等工具。
样式与 UI:全部使用 Tailwind CSS,采用移动优先;UI 组件优先选用 Shadcn UI 或 Radix UI 等可访问库;用 clsx 和 tailwind-merge 构建动态类名;图片使用 next/image 以获得 WebP、懒加载与正确尺寸。
错误处理:用 Zod 等校验库验证所有传入数据,尤其是 Server Actions;用 error.tsx 和 global-error.tsx 优雅捕获意外错误并提供回退 UI;在函数顶部处理边界情况(提前返回),避免深层嵌套条件。
反模式(禁止):不要无理由全局或顶层使用 "use client";不要在可服务端获取时用 useEffect 在客户端获取数据;避免不必要的复杂内联条件逻辑;不要使用类组件;不要忽略 Next.js 路由约定(如在 app 目录内命名 index.tsx)。
限制:资料未提供具体安装命令、版本要求、收费信息或平台支持细节,暂未提供。