Next.js Best Practices 是一套在编写或审查 Next.js 代码时应用的规则集合，来源于 timelessco/recollect 项目。它按主题组织为多个参考文档，覆盖 Next.js 开发中的主要方面。
用途 该技能用于在编写或审查 Next.js 代码时提供规范指引，帮助开发者遵循统一的最佳实践，并识别常见错误模式。
主要能力
- 文件约定：涵盖项目结构与特殊文件、路由段（动态、全捕获、分组）、并行与拦截路由，以及 v16 中 middleware 重命名为 proxy。
- RSC 边界：检测无效的 React Server Component 模式，包括异步客户端组件检测（无效）、不可序列化 props 检测、Server Action 异常。
- 异步模式：介绍 Next.js 15+ 的异步 API 变更，包括异步 params 和 searchParams、异步 cookies() 和 headers()，以及迁移 codemod。
- 运行时选择：默认使用 Node.js 运行时，并说明何时适合使用 Edge 运行时。
- 指令：涵盖 'use client'、'use server'（React）以及 'use cache'（Next.js）。
- 函数：包括导航钩子（useRouter、usePathname、useSearchParams、useParams）、服务端函数（cookies、headers、draftMode、after）、生成函数（generateStaticParams、generateMetadata）。
- 错误处理：涵盖 error.tsx、global-error.tsx、not-found.tsx，redirect、permanentRedirect、notFound，forbidden、unauthorized（认证错误），以及用于 catch 块的 unstable_rethrow。
- 数据模式：对比 Server Components、Server Actions 与 Route Handlers，避免数据瀑布（Promise.all、Suspense、preload），以及客户端组件数据获取。
- 路由处理器：介绍 route.ts 基础、GET 处理器与 page.tsx 的冲突、环境行为（无 React DOM），以及何时使用它而非 Server Actions。
- 元数据与 OG 图片：涵盖静态和动态元数据、generateMetadata 函数、使用 next/og 生成 OG 图片、基于文件的元数据约定。
- 图片优化：始终使用 next/image 而非 <img>、远程图片配置、响应式 sizes 属性、模糊占位符、LCP 的优先加载。
- 字体优化：next/font 设置、Google Fonts、本地字体、Tailwind CSS 集成、预加载子集。
- 打包：服务端不兼容的包、CSS 导入（而非 link 标签）、polyfills（已包含）、ESM/CommonJS 问题、包分析。
- 脚本：next/script 与原生 script 标签、内联脚本需要 id、加载策略、使用 @next/third-parties 集成 Google Analytics。
- 水合错误：常见原因（浏览器 API、日期、无效 HTML）、使用错误覆盖层调试、针对每种原因的修复方法。
- Suspense 边界：useSearchParams 和 usePathname 导致的 CSR bailout、哪些钩子需要 Suspense 边界。
- 并行与拦截路由：使用 @slot 和 (.) 拦截器的模态框模式、用于回退的 default.tsx、使用 router.back() 正确关闭模态框。
- 自托管：用于 Docker 的 output: 'standalone'、多实例 ISR 的缓存处理器、哪些功能可用与哪些需要额外设置。
- 调试技巧：用于 AI 辅助调试的 MCP 端点、使用 --debug-build-paths 重建特定路由。
使用方式 该技能以规则集合的形式提供，在编写或审查 Next.js 代码时应用。每个主题对应一个参考文档（如 file-conventions.md、rsc-boundaries.md 等），开发者可按需查阅。
适用场景 适用于 Next.js 项目的开发与代码审查，尤其是需要遵循统一规范、处理 Next.js 15+ 异步 API 变更、优化图片与字体、排查水合错误、配置自托管部署等场景。
限制 资料未提供该技能的具体安装命令、收费方式、价格、平台支持或效果保证等信息。