有用科技小编2026/05/26
浏览9761
阅读7分钟「Next.js 最佳实践」是「龙虾部署大师」技能市场中的规范型技能：作用是指导 Next.js 项目的编写、审查与重构，覆盖文件约定、React Server Component 边界、异步 API、数据获取、路由处理、元数据、图片字体优化、脚本加载和打包问题。它按主题进入对应参考文档，识别风险模式并给出符合版本特性的修正建议，帮助团队减少水瀑请求、边界误用、hydration 错误和部署配置偏差。
技能效果
拿到一段用 useEffect 客户端取数的 Next.js 页面时，它按最佳实践重构成 async 服务端组件加 Suspense 取数，并解释了为何这样更稳。
App Router 的坑，为什么不容易自己发现
Next.js 进入 App Router 时代后，许多问题不是"报错"，而是"写法不符合框架预期"。服务端组件和客户端组件的边界没划清，可能引出 hydration 错误或把不该上客户端的逻辑带过去；数据获取顺序没排好，一串串行请求拖成水瀑式加载；升级到 Next.js 15 后，params、cookies、headers 变成异步 API，旧写法会冒出构建警告和运行时报错；metadata、OG 图、图片字体优化和自托管部署各有约定，稍不留意就偏离规范。这些坑往往要等性能下滑或线上异常才暴露。
这个技能怎么帮你写对 Next.js
它是一套规则型指南，按主题进入对应参考文档，专门识别 Next.js 项目里的风险模式并给出符合版本特性的修正。文件约定方面，梳理特殊文件和路由段的组织规则，统一目录结构与命名。边界方面，检查 RSC 边界、客户端组件和 Server Action 的使用风险，是处理 hydration 错误的关键。迁移方面，指导异步 params、cookies、headers 等新 API 的正确写法，避免升级后构建警告与运行时报错。优化方面，提供图片、字体、脚本、打包和自托管的准则。它的定位是"审查与重构"——告诉你哪里写得不对、该怎么改，而非替你从零搭项目。
用前须知
该技能无需 API Key 或额外服务，作为规则型文档使用。若要在此基础上执行项目构建与诊断，需要本机具备 Node.js、Next.js 项目依赖和相应的包管理器。
怎么用它
用法是把要审查或重构的 Next.js 代码、要解决的问题用自然语言说清楚，由它对照规范给出修正。例如可以这样对它说：
可以这样对它说
- "这个 Next.js 路由用了客户端取数，按最佳实践帮我重构得稳一点。"
- "检查 App Router 项目的 metadata 和 OG 图写法是否合规。"
- "把 Next.js 15 的异步 params 改对，别再出构建警告和运行时报错。"
它适合这些场景：新建 Next.js 应用时统一目录结构、路由命名和特殊文件放置；审查 App Router 项目中服务端组件、客户端组件和数据流边界；升级 Next.js 15+ 后处理异步 API、元数据和错误页面变化；定位 hydration 错误、打包异常、图片字体加载或自托管部署问题。
注：技能的实际效果与所选用的 AI 模型能力有关，不同模型下的表现可能存在差异。
提示