# Next.js 15 项优化技巧 ## 目标优化Next.js应用实现： * 完美的核心 Web Vitals 分数（LCP < 2.5s、FID < 100ms、CLS < 0.1） * 快速的页面加载时间和最佳的渲染策略 * 高效的数据获取和缓存 * 生产就绪的构建配置 * SEO 和可访问性卓越 ## 何时使用此技能在以下情况下自动调用： * 项目使用Next.js（通过依赖项中的“next”检测） * 用户提到“优化”、“性能”、“缓慢”或“核心网络生命” * 生产部署之前 * 添加新功能或页面后 * 用户请求 Next.js 特定的改进 ## 先决条件检查 **工具**：阅读、Grep 1. **验证 Next.js 版本** : # 读取package.json # 检查“next”：“^15.0.0”或更高版本 2. **检测应用程序路由器**（Next.js 13+）： * 检查`app/`目录 * 检查 `layout.tsx`、`page.tsx` 文件 3. **检测页面路由器**（旧版）： * 检查“pages/”目录 * 建议迁移到 App Router ## 优化类别 ### 1\.渲染策略优化 **目标**：为每个页面/组件选择最佳渲染 **工具**：读取、Grep、编辑 #### 1.1 服务器组件（App Router 中的默认值） **何时使用**： * 从API/数据库获取数据 * 计算量大 * 访问后台资源 **图案**： // 应用程序/仪表板/page.tsx 导出默认异步函数 DashboardPage() { const data = 等待 fetchData(); // 在服务器上运行返回 <仪表板数据={data} />; } **检查是否有违规**： # 在不需要的组件中搜索“use client” grep -r“使用客户端”应用程序/ | grep -v "onClick\|useState\|useEffect" #### 1.2 客户端组件 **何时使用**： * 交互式用户界面（onClick、表单） * 浏览器API（窗口、本地存储） * React钩子（useState，useEffect） **图案**： // 应用程序/组件/Counter.tsx '使用客户端'；导出默认函数 Counter() { const [count, setCount] = useState(0); return ; } **优化**：保持客户端组件较小和叶子节点 #### 1.3 静态生成（SSG） **何时使用**： * 很少改变的内容 * 营销页面、博客、文档 **图案**：导出常量重新验证= 3600； // 每小时重新验证一次导出默认异步函数 BlogPost({ params }) { const post =等待 getPost(params.slug); return <文章post={post} />; } #### 1.4 使用 ISR 进行动态渲染 **何时使用**： * 定期更改的内容 * 电商产品、用户档案 **图案**：导出常量重新验证= 60； // 每分钟重新验证一次导出异步函数generateStaticParams() { const 产品 = 等待 getProducts(); return products.map((p) => ({ slug: p.slug })); } ### 2\.图像优化 **目标**：优化图像的性能和核心网络生命力 **工具**：Grep、阅读、编辑 #### 2.1 使用 Next.js 图像组件 **查找未优化的图像**： grep -rn“ #### 2.2 配置图像域 **阅读 next.config.js** ：模块. 导出 = { 图片：{ 远程模式：[ { 协议：'https'，主机名：'example.com'， }, ], 格式：['image/avif', 'image/webp'], // 现代格式 }, }; #### 2.3 延迟加载策略 * **优先级**：首屏图像（LCP 候选） * **loading="lazy"** ：首屏图像（默认） ### 3\.字体优化 **目标**：消除 FOUT/FOIT 并改进字体加载 **工具**：阅读、编辑 #### 3.1 使用下一个/字体 **图案**： // 应用程序/layout.tsx 从'next/font/google'导入{Inter}；常量间 = 间({ 子集：['拉丁']， display: 'swap', // 防止 FOIT 变量：'--font-inter'， }); 导出默认函数 RootLayout({ Children }) { 返回（ {孩子} ）； } #### 3.2 自托管字体从 'next/font/local' 导入 localFont； const 自定义字体 = localFont({ src: './fonts/CustomFont.woff2', 显示：'交换'，变量：'--font-custom'， }); ### 4\.数据获取优化 **目标**：最小化瀑布并优化缓存 **工具**：读取、Grep、编辑 #### 4.1 并行数据获取 **反模式**（顺序）： const user = 等待 getUser(); const posts = 等待 getPosts(user.id); // 等待用户 **优化**（并行）： const [用户，帖子] =等待 Promise.all([ 获取用户(), 获取帖子(), ]); #### 4.2 悬念直播 **图案**：从'react'导入{Suspense}；导出默认函数 Page() { 返回（ <> <标题/> <悬念后备={<骨架/>}> <慢速组件/> <页脚/> ）； } #### 4.3 缓存配置 // 积极的缓存 fetch('https://api.example.com/data', { next: { revalidate: 3600 }, // 缓存1小时 }); // 没有缓存 fetch('https://api.example.com/data', { cache: 'no-store', // 始终新鲜 }); // 选择退出缓存导出 const 动态 = '力动态'; ### 5\.捆绑优化 **目标**：减少 JavaScript 包大小 **工具**：Bash、阅读、编辑 #### 5.1 分析包 # 添加到package.json脚本 npm 运行构建 npx @next/bundle-analyzer #### 5.2 动态导入 **查找大型组件**：查找应用程序-名称“*.tsx”-exec wc -l {} \; |排序-rn |头-10 **通过动态导入分割**：从“下一个/动态”导入动态； const HeavyComponent = 动态(() => import('./HeavyComponent'), { 加载：() => <骨架/>, ssr: false, // 如果不需要则跳过 SSR }); #### 5.3 树摇动 **检查桶出口**： grep -rn“从”应用程序/导出\* **替换为特定的导入**： // 反模式从“@/components”导入{按钮、卡片、模态}； // 优化从'@/components/Button'导入{Button}； ### 6\.元数据和搜索引擎优化 **目标**：完美的搜索引擎优化和社交分享 **工具**：阅读、编辑 #### 6.1 静态元数据 // 应用程序/layout.tsx 导出常量元数据 = { 标题：{ 默认值：“我的应用程序”，模板：'%s |我的应用程序', }, 描述：“SEO 描述”，打开图：{ 标题：“我的应用程序”， description: '社交分享的描述', 图片：['/og-image.jpg'], }, 推特：{ 卡：'summary_large_image'， }, }; #### 6.2 动态元数据导出异步函数generateMetadata({ params }) { const post =等待 getPost(params.slug); 返回{ 标题：帖子标题，描述：帖子摘录，打开图：{ 图片：[post.ogImage]， }, }; } ### 7\.生产配置 **目标**：优化 next.config.js 以用于生产 **工具**：阅读、编辑 #### 7.1 基本配置 // next.config.js 模块. 导出 = { 反应严格模式：真， poweredByHeader: false, // 安全性 compress: true, // Gzip 压缩 // 编译器优化编译器：{ removeConsole: process.env.NODE_ENV === '生产', }, // 图片优化图片：{ 格式：['image/avif', 'image/webp'], 设备尺寸：[640, 750, 828, 1080, 1200, 1920], }, // React 编译器 (Next.js 15) 实验：{ 反应编译器：正确， }, }; #### 7.2 Turbopack（开发） // 包.json { “脚本”：{ “dev”：“下一个开发--turbo” } } ### 8\.核心网络生命体优化 **目标**：达到完美的灯塔分数 **工具**：Bash、Grep、编辑 #### 8.1 LCP（最大内容油漆）< 2.5 秒 **优化**： * 对英雄图像使用“优先级” * 预加载关键资源 * 服务器端渲染首屏内容 // 预加载关键资源 #### 8.2 FID（首次输入延迟）< 100ms **优化**： * 最小化 JavaScript 执行 * 对非关键代码使用动态导入 * 推迟第三方脚本从“下一个/脚本”导入脚本； <脚本 src =“https://analytics.example.com” strategy="lazyOnload" // 页面交互后加载 /> #### 8.3 CLS（累积布局偏移）< 0.1 **优化**： * 始终指定图像尺寸 * 为动态内容预留空间 * 使用 `font-display: swap` /* 为广告/横幅预留空间 */ .ad-容器{ 最小高度：250px； } ### 9\.缓存策略 **目标**：最大化缓存命中并最小化服务器负载 **工具**：阅读、编辑 #### 9.1 路由段配置 // 应用程序/仪表板/page.tsx 导出常量重新验证= 3600； // 每小时 ISR 导出常量动态 = '自动'; // 自动优化导出 const fetchCache = '强制缓存'; // 积极的缓存 #### 9.2 数据缓存 // 自动去重并缓存 const user = wait fetch('https://api.example.com/user'); // 重新验证基于标签的导出常量重新验证= 60；导出 const 标签 = ['用户', '个人资料']; ### 10\.监控与测量 **目标**：跟踪一段时间内的表现 **工具**：Bash、网络搜索 #### 10.1 添加 Web Vitals 报告 // 应用程序/layout.tsx 从 '@vercel/speed-insights/next' 导入 { SpeedInsights }；导出默认函数 RootLayout({ Children }) { 返回（ <正文> {孩子} <速度洞察/> ）； } #### 10.2 灯塔 CI # 运行灯塔 npx 灯塔 http://localhost:3000 --view # 检查核心网络生命力 npm 运行构建 npm 运行开始 npx 灯塔 http://localhost:3000 --only-categories=performance ## 优化清单 **运行此清单**： * 所有图像均使用具有适当尺寸的“next/image” * 字体使用 `next/font` 和 `display: swap` * 默认使用的服务器组件（没有不必要的“使用客户端”） * 客户端组件是叶节点和最小 * 数据获取尽可能使用并行请求 * 慢速组件包裹在 `` 中 * 大型组件使用动态导入 * 为所有页面配置元数据 * `next.config.js` 具有生产优化 * 启用 React 编译器 (Next.js 15) * 捆绑包分析和优化 * 核心 Web Vitals 达到目标（使用 Lighthouse 进行测试） ## 输出格式 # Next.js 优化报告 ## 目前状态 - **Next.js 版本**：15.0.3 - **渲染**：应用程序路由器 - **反应版本**：19.0.0 ## 发现的问题 ### 🔴 关键 (3) 1. **未优化的图像**：找到 12 个 `` 标签 - 文件：`app/page.tsx`、`app/about/page.tsx` - 修复：替换为“下一个/图像” 2. **大型客户端捆绑包**：342 KB（目标：< 200 KB） - 原因：同步加载大量图表库 - 修复：对“Chart”组件使用动态导入 3. **缺少字体优化**：通过使用 Google 字体 - 修复：迁移到“next/font/google” ### 🟡警告 (2) 1. **顺序数据获取**：在 `app/dashboard/page.tsx` 中检测到瀑布 2. **无元数据**：5 页缺少 OpenGraph 标签 ## 应用优化 ✅ 在 next.config.js 中启用 React 编译器 ✅ 添加了图像优化配置 ✅ 配置正确的缓存标头 ✅ 为慢速路线添加了悬念边界 ## 性能影响（估计） - **加载时间**：3.2s → 1.8s (-44%) - **捆绑包大小**：342 KB → 198 KB (-42%) - **LCP**：3.1s → 2.3s（✅ 好） - **FID**：85ms → 45ms（✅ 好） - **CLS**：0.15 → 0.05（✅ 好） ## 后续步骤 1. 将12个``标签替换为`next/image` 2.动态导入的Split Chart组件 3.为5个页面添加元数据 4. 运行 Lighthouse 来验证改进 ## 最佳实践 1. **服务器优先心态**：默认为服务器组件 2. **渐进式增强**：首先针对慢速网络进行构建 3. **衡量，不要猜测**：使用 Lighthouse 和 Web Vitals 4. **积极缓存**：但适当地重新验证 5. **增量优化**：首先修复关键问题 ## 与其他技能的整合 * `codebase-analysis` \- 检测 Next.js 项目和版本 * `quality-gates` \- 运行构建并验证没有回归 * `react-patterns` \- 确保 React 19 最佳实践 * `testing-strategy` \- 添加性能测试 ## 要避免的常见反模式 ❌ 在顶层使用“使用客户端” ❌ 不指定图像尺寸 ❌ 同步数据获取 ❌ 加载整个组件库 ❌ 无悬念边界 ❌ 忽略核心 Web 生命 ## 版本历史 * **1.0.0** (2025-01-03)：以 App Router 为重点的 Next.js 15 的初始技能

Nextjs优化

包含技能