SuperAPI AI 工具集

nextjs15-performance

前端与建站

查看项目

更新于 10-15 15:33

技能介绍

用途

本技能用于在编写 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 代码之前:

  1. 阅读 docs/agent/architecture/nextjs-critical-fixes.md 获取完整模式。
  2. 查看 apps/frontend/components/ 中现有组件作为示例。

提交 PR 前的快速检查清单:

  • [ ] 独立数据没有使用顺序 await
  • [ ] 图标为直接导入
  • [ ] 重型组件使用 next/dynamic
  • [ ] Server Actions 内部有鉴权
  • [ ] 慢速请求包裹了 Suspense

适用场景

适用于 Next.js 15 项目的日常开发,特别是涉及 React 组件编写、数据获取逻辑、Server Actions 实现以及打包体积优化的环节。也可作为代码审查和 PR 提交前的自查依据。

限制

资料未提供该技能的具体安装命令、依赖要求、版本兼容范围或与其他工具的集成方式,这些信息暂未提供。