SuperAPI AI 工具集

next

编程与开发

查看项目

更新于 10-15 23:33

技能介绍

用途:面向 Next.js 13-14 的全栈 React 开发,涵盖 App Router、服务端组件(Server Components)与服务端操作(Server Actions),适合需要 SSR/SSG、API 路由或中间件的 React 应用及全栈部署。不适用于无 React 的静态站点、纯后端 API 或非 React 前端。

主要能力与用法:默认使用服务端组件,仅在需要浏览器 API、状态或事件时添加 "use client";用 layout.tsx 实现跨子路由持久共享 UI;用 "use server" 的服务端操作处理表单提交与数据变更,配合 revalidatePath 刷新缓存;在异步服务端组件中直接 fetch 数据,Next.js 会去重并缓存,可用 next: { revalidate: N } 定期刷新;通过导出 metadata 或 generateMetadata 设置 SEO 元数据;用根目录 middleware.ts 处理鉴权重定向与重写。

决策要点:需要浏览器 API 或状态时加 "use client";展示数据用异步服务端组件而非 useEffect;表单或变更用服务端操作;跨路由共享布局在父段建 layout.tsx;动态标题用 generateMetadata;保护路由用 middleware.ts;按需清缓存调用 revalidatePath() 或 revalidateTag()。

限制与注意:"use client" 会使其及导入项变为客户端,应尽量下推边界;服务端到客户端的 props 必须可序列化(不能传函数、Date、类);顺序 await 会产生瀑布,可用 Promise.all();中间件仅限 Edge Runtime,不能用 Node.js API(如 fs、数据库驱动);混用不同 revalidate 值时取最小值,需谨慎设置。

资料未提供安装命令、收费、价格与平台信息。