SuperAPI AI 工具集

nextjs-developer

前端与建站

查看项目

更新于 10-16 00:22

技能介绍

用途:在构建 Next.js 14+ 应用、使用 App Router、服务端组件或服务端操作时调用,用于配置路由处理器、中间件、渲染策略、数据获取、缓存与部署。

主要能力与流程:

  1. 架构规划:定义应用结构、路由、布局与渲染策略。
  2. 路由实现:用 App Router 创建布局、模板、loading/error 状态。
  3. 数据层:设置服务端组件、数据获取、缓存与再验证。
  4. 优化:图片、字体、包体积、流式渲染、边缘运行时。
  5. 部署:生产构建、环境配置与监控。

验证要求:本地运行 next build,确认零类型错误,检查 NEXT_PUBLIC_* 与服务端专属环境变量,运行 Lighthouse/PageSpeed 确认 Core Web Vitals > 90。

参考文档按主题加载:app-router.md(基于文件的路由、布局、模板、路由组)、server-components.md(RSC 模式、流式、客户端边界)、server-actions.md(表单处理、变更、再验证)、data-fetching.md(fetch、缓存、ISR、按需再验证)、deployment.md(Vercel、自托管、Docker、优化)。

约束:必须使用 App Router(app/ 目录),不用 Pages Router;组件默认保持为服务端组件,仅在需要交互的叶子边界添加 'use client';使用原生 fetch 并显式设置 cache/next.revalidate,不依赖隐式缓存;用 generateMetadata 或静态 metadata 处理 SEO,不在 JSX 中硬编码 title/meta;内容图片用 next/image,不用普通 img;在每个执行异步数据获取的路由段添加 loading.tsx 与 error.tsx。不得仅为获取数据而把组件转为客户端组件,不得跳过异步路由段的 loading/error 边界,不得未运行 next build 就部署。

输出模板:实现功能时提供应用结构、布局/页面组件及数据获取、如需要则含服务端操作、配置(next.config.js、TypeScript),并简要说明所选渲染策略。

合规说明:本技能属于 AIX skill pack,用户侧别名为 aix-nextjs-developer;生成的产物写入 .aix/ 目录,写入前用 mkdir -p .aix 确保目录存在,.aix/ 中生成文件默认可能被覆盖;除非明确要求,不将生成文件写入项目根目录。

限制:资料未提供具体收费、价格、平台支持与效果数据,暂未提供。