mcpField
N
nextjs-performance

nextjs-performance

github.com/srbhr开发28.9k63 次安装1 周前更新
代码仓库

关于 nextjs-performance

面向 Next.js 项目的性能开发技能，汇总数据加载、代码包体积、Server Actions 和生产构建方面的实践。适用于优化前端性能并在提交前检查关键实现的开发者。

主要功能

  1. 01用 Promise.all 并行获取独立数据
  2. 02通过 Suspense 和延迟 await 处理慢请求
  3. 03避免 barrel imports 并动态加载重型组件
  4. 04要求 Server Actions 内部验证身份与资源归属
  5. 05提供生产构建和提交前检查清单

适用场景

  1. 01减少页面中独立数据请求的串行等待
  2. 02控制 Next.js 前端代码包体积
  3. 03检查 Server Actions 的授权和资源校验

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/srbhr/resume-matcher --skill nextjs-performance

安装后在 Claude Code 中输入/nextjs-performance确认已加载。

详细介绍

Next.js 性能

编写代码之前

  1. 阅读 docs/agent/architecture/nextjs-critical-fixes.md 获取完整模式
  2. 检查 apps/frontend/components/ 中的现有组件

关键规则

瀑布请求
  • 对独立的请求使用 Promise.all()
  • 将慢速数据包裹在 <Suspense> 边界中
  • 在需要的分支中再执行 await
// WRONG
const resumes = await fetchResumes();
const jobs = await fetchJobs();

// RIGHT
const [resumes, jobs] = await Promise.all([fetchResumes(), fetchJobs()]);
包体积
  • 禁止 barrel 导入：import X from 'lucide-react' 是错误的
  • 推荐直接导入：import X from 'lucide-react/dist/esm/icons/x'
  • 对大型组件（编辑器、图表、PDF）使用 next/dynamic
  • 使用 ssr: false 延迟加载分析工具
import dynamic from 'next/dynamic';
const HeavyEditor = dynamic(() => import('./HeavyEditor'), { ssr: false });
Server Actions
  • 必须在 action 内部检查认证，而不只依赖中间件
  • 在执行变更操作前验证资源归属
生产构建
  • 运行 npm run build && npm run start，而不是 npm run dev
  • Docker 必须使用 standalone 输出

提 PR 前检查清单

[ ] No sequential awaits for independent data
[ ] Icons imported directly (not barrel)
[ ] Heavy components use next/dynamic
[ ] Server Actions have auth inside
[ ] Suspense around slow fetches

评论

支持 Markdown