SuperAPI AI 工具集

next-best-practices

前端与建站

查看项目

更新于 10-16 07:30

技能介绍

用途

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、路由拦截、自托管与调试等方面的常见问题。

限制

具体限制、收费、价格、平台与使用步骤等信息暂未提供。