用途
本技能用于在编写 Next.js 15 应用时应用关键性能修复,尤其适用于编写 React 组件、进行数据获取、编写 Server Actions 或优化打包体积的场景。它提供了一组在写代码前和写代码时应遵循的规则与检查清单。
主要能力
技能围绕四类关键规则展开:
瀑布式请求(Waterfalls)
- 对相互独立的请求使用 Promise.all()。
- 用 <Suspense> 边界包裹慢速数据。
- 在需要时把 await 延迟到分支内部。
打包体积(Bundle Size)
- 禁止桶式导入(barrel imports):
import X from 'lucide-react'为错误写法。 - 使用直接导入:
import X from 'lucide-react/dist/esm/icons/x'为正确写法。 - 对重型组件(编辑器、图表、PDF 查看器)使用 next/dynamic。
- 用 ssr: false 延迟加载分析脚本。
Server Actions
- 始终在 action 内部检查鉴权,而不仅仅依赖中间件。
- 在变更操作前验证资源归属。
生产构建(Production Build)
- 用户运行
npm run build && npm run start,而不是npm run dev。 - Docker 必须使用 standalone 输出,而不是开发模式。
使用方式
在编写 Next.js 代码之前:
- 阅读
docs/agent/architecture/nextjs-critical-fixes.md获取完整模式。 - 查看
apps/frontend/components/中现有组件作为示例。
提交 PR 前的快速检查清单:
- [ ] 独立数据没有使用顺序 await
- [ ] 图标为直接导入
- [ ] 重型组件使用 next/dynamic
- [ ] Server Actions 内部有鉴权
- [ ] 慢速请求包裹了 Suspense
适用场景
适用于 Next.js 15 项目的日常开发,特别是涉及 React 组件编写、数据获取逻辑、Server Actions 实现以及打包体积优化的环节。也可作为代码审查和 PR 提交前的自查依据。
限制
资料未提供该技能的具体安装命令、依赖要求、版本兼容范围或与其他工具的集成方式,这些信息暂未提供。