SuperAPI AI 工具集

nextjs-optimization

前端与建站

查看项目

更新于 10-15 16:45

技能介绍

用途:优化 Next.js 15 应用,目标为改善 Core Web Vitals(LCP<2.5s、FID<100ms、CLS<0.1)、页面加载速度、渲染策略、数据获取与缓存、生产构建配置及 SEO 与可访问性。

主要能力:检查 Next.js 版本与路由类型(app/ 或 pages/);判断渲染策略(Server Components、Client Components、SSG、ISR);用 next/image 替换 <img> 并配置远程图片域与格式;用 next/font 优化字体;并行数据获取、Suspense 流式渲染与缓存配置;打包分析与动态导入、tree shaking;静态与动态 metadata;next.config.js 生产配置;Web Vitals 报告与 Lighthouse 检测。

必要用法:确认依赖含 next 15 或更高,检测 app/ 目录与 layout.tsx、page.tsx;查找未优化图片用 grep -rn "<img " app/ src/;分析包用 npx @next/bundle-analyzer;本地检测用 npx lighthouse http://localhost:3000 --only-categories=performance。

适用场景:生产部署前优化、新增功能或页面后、用户提及优化、性能、慢或 Core Web Vitals 时。

限制:该技能为优化指导,不保证具体性能提升数值;效果需以实际测量为准。资料未提供收费、价格、平台限制与安装步骤等信息。