SuperAPI AI 工具集

nextjs-expert

前端与建站

查看项目

更新于 10-16 06:51

技能介绍

用途:这是一份供 AI 在编写 Next.js 14+ 代码时参考的要点清单,集中说明常见易错点与取舍判断。作者的说明指明它是“AI 消费型参考”,面向 Claude 执行时阅读;人类可读解释见 docs/architecture/HIERARCHICAL_PLANNING.md 或 docs/getting-started/。完整 Next.js 文档建议使用 Context7。

主要决策:服务端与客户端组件之间默认用服务端,仅在需要交互(useState/onClick)时加 'use client',并尽量把边界下沉;缓存策略可选 force-cache(静态)、revalidate:N(按时间)、revalidateTag(按需)、no-store(始终最新);表单变更用 Server Actions,外部消费者与 webhook 用 API 路由;慢数据用 Suspense 包裹,并行请求始终用 Promise.all。

易错点:服务端组件不能用 useState/useEffect,交互部分应拆到子客户端组件;'use client' 会让该文件全部导入变成客户端,应保持在叶子组件;服务端组件的 fetch() 只会在同一次渲染中自动去重;Server Actions 必须用 Zod 校验,因为 formData 来自不可信客户端;error.tsx 必须是客户端组件,global-error.tsx 需渲染 html 与 body;loading.tsx 已用 Suspense 包裹页面,勿手动重复包裹;动态路由参数在 Next.js 15 是 Promise,需 await;revalidatePath('/') 会刷新所有页面而非仅首页,精确刷新用 revalidateTag;Image 使用 fill 时必须提供 sizes,否则发送完整尺寸图片;Middleware 运行在 Edge,不能用 fs、Buffer 等 Node.js API。

使用方式与限制:资料未提供安装命令、版本范围与授权信息;仅适用于 Next.js 14+ 语境下的编码参考。