用途
Next.js Developer 是一个面向 Next.js 14+ 应用开发的技能，定位为资深 Next.js 开发者，专注于 App Router、服务端组件（Server Components）以及全栈部署，并强调性能与 SEO 表现。当需要构建 Next.js 14+ 应用、使用 App Router、服务端组件或服务端操作时，可调用该技能来配置路由处理器、实现中间件等。
主要能力
该技能围绕以下核心工作流展开：
- 架构规划：定义应用结构、路由、布局与渲染策略。
- 实现路由：创建 App Router 结构，包含布局、模板、加载/错误状态。
- 数据层：搭建服务端组件、数据获取、缓存与重验证。
- 优化：图片、字体、打包、流式渲染、边缘运行时。
- 部署：生产构建、环境配置、监控。
验证环节要求：在本地运行 next build，确认零类型错误，检查 NEXT_PUBLIC_* 与服务端专用环境变量已设置，运行 Lighthouse/PageSpeed 确认 Core Web Vitals 大于 90。
该技能内置参考指南，按上下文加载对应主题：App Router（基于文件的路由、布局、模板、路由组）、服务端组件（RSC 模式、流式渲染、客户端边界）、服务端操作（表单处理、变更、重验证）、数据获取（fetch、缓存、ISR、按需重验证）、部署（Vercel、自托管、Docker、优化）。
使用方式
该技能以约束规则与代码示例指导开发。其 MUST DO（Next.js 专属）要求：
- 使用 App Router（app/ 目录），绝不使用 Pages Router（pages/）。
- 默认保持组件为服务端组件；仅在需要交互的叶子边界添加 'use client'。
- 使用原生 fetch 并显式声明 cache / next.revalidate 选项，不依赖隐式缓存。
- 所有 SEO 使用 generateMetadata（或静态 metadata 导出），绝不在 JSX 中硬编码 <title> 或 <meta> 标签。
- 所有图片使用 next/image 优化；内容图片绝不使用普通 <img> 标签。
- 在每个执行异步数据获取的路由段添加 loading.tsx 与 error.tsx。
MUST NOT DO 要求：
- 不要仅为访问数据而将组件转换为客户端组件——应先在服务端获取。
- 不要在异步路由段跳过 loading.tsx/error.tsx 边界。
- 不要在未运行 next build 确认零错误的情况下部署。
技能提供代码示例，包括：带数据获取与缓存的服务端组件（使用 fetch 的 next.revalidate 实现 ISR，配合 Suspense）；带表单处理与重验证的服务端操作（'use server'、revalidatePath）；用于动态 SEO 的 generateMetadata。
实现 Next.js 功能时，输出模板要求提供：应用结构（路由组织）、带正确数据获取的布局/页面组件、如需要变更则提供服务端操作、配置（next.config.js、TypeScript），以及所选渲染策略的简要说明。
适用场景
适用于构建 Next.js 14+ 全栈应用、使用 App Router 与服务端组件、实现服务端操作与表单处理、配置路由处理器与中间件、进行数据获取与缓存策略设计、优化图片与字体、以及部署到 Vercel 或自托管环境等场景。
限制
该技能要求严格遵循 App Router 而非 Pages Router，默认使用服务端组件，并强制在异步路由段添加加载与错误边界。部署前必须运行 next build 确认零错误。关于收费、价格、平台支持范围等具体信息，资料中暂未提供。