SuperAPI AI 工具集

nextjs

前端与建站

查看项目

更新于 10-15 21:40

技能介绍

用途:该技能用于构建 Next.js 16 应用,覆盖完整生命周期——新建应用、添加页面或功能、添加 Server Action(变更)、添加 Route Handler(API 端点)、调试、编写测试、优化性能与部署。

主要能力:基于 App Router 与 React Server Components,组件默认在服务端运行,可直接取数,减少客户端 JS;采用 BFF 模式,由 Server Components 取数、Server Actions 处理变更、Route Handlers 提供 API 端点,敏感逻辑保留在服务端。Next.js 16 引入 Cache Components,通过 "use cache" 指令显式选择缓存,动态代码默认在请求时运行;新缓存 API 包括 revalidateTag(tag, profile)、updateTag(tag) 与 refresh()。Turbopack 为默认打包器,可用 next dev --webpack 或 next build --webpack 退出。包含 React 19.2 的 View Transitions、Activity、useEffectEvent。文件约定含 page.tsx、layout.tsx、loading.tsx、error.tsx、route.ts、proxy.ts(替代 middleware.ts)。

使用方式:先判断任务类型,再阅读 workflows/ 中对应工作流并严格遵循。每次改动后执行验证:bunx tsc --noEmit、bun run lint、bun run dev,并检查浏览器控制台无 hydration 错误、无 "use client"/"use server" 边界违规、数据正确加载。

适用场景:Next.js 16 应用的开发、调试、测试、性能优化与部署。

限制:资料未提供具体收费、价格、平台支持范围与效果数据;部分能力依赖 Rails 后端 API 示例,实际后端需自行适配。