SuperAPI AI 工具集

nextjs-app

前端与建站

查看项目

更新于 10-15 16:43

技能介绍

用途:该技能面向 Next.js 14+ App Router 开发,用户请求 Next.js 代码或需要 App Router 模式时触发,也可通过 /nextjs 命令调用,用于生成服务端组件、客户端组件、API 路由、中间件和数据获取模式相关代码。

主要能力:服务端组件数据获取(可结合 Suspense 与 ISR,例如 fetch 中使用 next.revalidate);客户端组件表单(使用 useTransition、useRouter,配合 Server Action 提交);Server Action(用 zod 校验表单数据,并通过 revalidatePath 刷新缓存);中间件(读取 cookie 令牌,保护 /dashboard 路由并配置 matcher)。标签包括 nextjs、react、app-router、server-components、fullstack,兼容 Codex 与 Claude Code。

使用方式:通过 /nextjs 命令触发,或直接提出 Next.js 代码需求。资料给出的示例涵盖 app/users/page.tsx 服务端页面、客户端 CreateUserForm 表单、app/users/actions.ts 中的 createUser Server Action,以及 middleware.ts 中的鉴权中间件。

适用场景:需要快速搭建 Next.js 14+ App Router 应用结构、实现服务端与客户端组件分工、表单处理与数据校验、路由保护和缓存刷新时。

限制:资料未说明安装命令、收费模式、价格、具体平台支持范围及运行效果;示例中 API 地址为占位符(https://api.example.com),需替换为真实接口;部分代码片段在原始文本中存在缺失,使用时应结合 Next.js 官方文档补全。