关于 nextjs15-performance
nextjs15-performance 是面向 Next.js 代码开发的性能与安全规范技能，指导开发者处理数据获取、包体积、Server Actions 和生产构建。
主要功能
- 01并行执行相互独立的数据请求
- 02通过直接导入减小包体积
- 03动态加载大型组件
- 04在 Server Actions 中检查授权
- 05采用生产构建设置
适用场景
- 01审查 Next.js 数据获取模式
- 02避免不必要的客户端包代码
- 03通过所有权检查保护变更操作
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/nextjs15-performance确认已加载。
详细介绍
编写 Next.js 代码前
- 阅读
docs/agent/architecture/nextjs-critical-fixes.md，了解完整模式 - 查看
apps/frontend/components/中的现有组件，参考示例
关键规则（始终遵守）
瀑布流
- 对相互独立的获取操作使用
Promise.all() - 使用
<Suspense>边界包裹较慢的数据 - 必要时，将
await延后到分支中
包体积
- 禁止使用聚合导入：
import X from 'lucide-react'❌ - 应使用直接导入：
import X from 'lucide-react/dist/esm/icons/x'✅ - 对较重的组件（编辑器、图表、PDF 查看器）使用
next/dynamic - 使用
ssr: false延后加载分析功能
服务端操作
- 始终在操作内部检查身份验证，而不只是依赖中间件
- 执行变更前，验证资源所有权
生产构建
- 用户运行
npm run build && npm run start，而不是npm run dev - Docker 必须使用独立输出，而不是开发模式
PR 前快速检查
[ ] No sequential awaits for independent data
[ ] Icons imported directly
[ ] Heavy components use next/dynamic
[ ] Server Actions have auth inside
[ ] Suspense around slow fetches
评论
支持 Markdown