用途
next-best-practices 是一套用于 Next.js 代码编写与评审的规则集。当你正在编写或审查 Next.js 代码时,可以应用这些规则,帮助发现无效模式并遵循框架约定。
主要能力(按主题划分)
文件约定
参见 file-conventions.md,涵盖:项目结构与特殊文件、路由段(动态、捕获所有、分组)、并行与拦截路由、v16 中 middleware 重命名为 proxy(middleware → proxy)。
RSC 边界
检测无效的 React Server Component 模式。参见 rsc-boundaries.md,涵盖:异步客户端组件检测(无效)、不可序列化 props 检测、Server Action 异常。
异步模式
Next.js 15+ 的异步 API 变化。参见 async-patterns.md,涵盖:异步 params 与 searchParams、异步 cookies() 与 headers()、迁移 codemod。
运行时选择
参见 runtime-selection.md,涵盖:默认使用 Node.js 运行时、何时适合使用 Edge 运行时。
指令
参见 directives.md,涵盖:'use client'、'use server'(React);'use cache'(Next.js)。
函数
参见 functions.md,涵盖:导航钩子 useRouter、usePathname、useSearchParams、useParams;服务端函数 cookies、headers、draftMode、after;生成函数 generateStaticParams、generateMetadata。
错误处理
参见 error-handling.md,涵盖:error.tsx、global-error.tsx、not-found.tsx;redirect、permanentRedirect、notFound;forbidden、unauthorized(认证错误);unstable_rethrow 用于 catch 块。
数据模式
参见 data-patterns.md,涵盖:Server Components 与 Server Actions 与 Route Handlers 的对比、避免数据瀑布(Promise.all、Suspense、preload)、客户端组件数据获取。
路由处理器
参见 route-handlers.md,涵盖:route.ts 基础、GET 处理器与 page.tsx 的冲突、环境行为(无 React DOM)、何时使用它与 Server Actions 的对比。
元数据与 OG 图片
参见 metadata.md,涵盖:静态与动态元数据、generateMetadata 函数、使用 next/og 生成 OG 图片、基于文件的元数据约定。
图片优化
参见 image.md,涵盖:始终使用 next/image 而非 <img>、远程图片配置、响应式 sizes 属性、模糊占位符、LCP 的优先加载。
字体优化
参见 font.md,涵盖:next/font 设置、Google Fonts、本地字体、Tailwind CSS 集成、预加载子集。
打包
参见 bundling.md,涵盖:不兼容服务端的包、CSS 导入(不是 link 标签)、Polyfills(已包含)、ESM/CommonJS 问题、包分析。
脚本
参见 scripts.md,涵盖:next/script 与原生 script 标签的对比、内联脚本需要 id、加载策略、使用 @next/third-parties 接入 Google Analytics。
水合错误
参见 hydration-error.md,涵盖:常见原因(浏览器 API、日期、无效 HTML)、使用错误覆盖层调试、针对每种原因的修复方法。
Suspense 边界
参见 suspense-boundaries.md,涵盖:useSearchParams 与 usePathname 导致的 CSR bailout、哪些钩子需要 Suspense 边界。
并行与拦截路由
参见 parallel-routes.md,涵盖:使用 @slot 与 (.) 拦截器的模态框模式、用于回退的 default.tsx、正确使用 router.back() 关闭模态框。
自托管
参见 self-hosting.md,涵盖:用于 Docker 的 output: 'standalone'、面向多实例 ISR 的缓存处理器、哪些可直接工作与哪些需要额外设置。
调试技巧
参见 debug-tricks.md,涵盖:用于 AI 辅助调试的 MCP 端点、使用 --debug-build-paths 重新构建特定路由。
使用方式
在编写或审查 Next.js 代码时应用本规则集中的规则;各主题的详细内容见对应的 .md 文档。
适用场景
适用于 Next.js 项目的开发与代码质量审查环节,帮助检查文件约定、RSC 边界、异步 API、错误处理、数据获取、路由、元数据、图片与字体优化、打包、脚本、水合、Suspense、路由拦截、自托管与调试等方面的常见问题。
限制
具体限制、收费、价格、平台与使用步骤等信息暂未提供。