用途:在构建 Next.js 14+ 应用时使用,尤其是采用 App Router、服务端组件(RSC)或服务端操作(Server Actions)的项目,目标是兼顾性能与 SEO。
主要能力:规划应用结构、路由、布局与渲染策略;搭建 App Router 的 layouts、templates、loading/error 状态;配置服务端组件、数据获取、缓存与再验证;优化图片、字体、打包、流式渲染与边缘运行时;完成生产构建、环境配置与监控。
使用方式:按上下文加载参考文档,包括 App Router、服务端组件、服务端操作、数据获取与部署等主题。实现功能时输出应用结构、带数据获取的布局与页面组件、必要的服务端操作、配置(next.config.js、TypeScript),并简要说明所选渲染策略。
约束要点:必须使用 app/ 目录的 App Router,不用 pages/;组件默认保持服务端组件,仅在需要交互的叶子边界加 'use client';使用原生 fetch 并显式设置 cache 或 next.revalidate;用 generateMetadata 或静态 metadata 处理 SEO,不在 JSX 中硬编码 title/meta;内容图片用 next/image;异步数据获取的路由段添加 loading.tsx 与 error.tsx。不要仅为取数据而把组件转为客户端组件,不要跳过加载与错误边界,不要在未运行 next build 确认零错误的情况下部署。
验证:本地运行 next build,确认无类型错误,检查 NEXT_PUBLIC_* 与服务端专用环境变量,运行 Lighthouse/PageSpeed 确认 Core Web Vitals 大于 90。
适用场景:Next.js 14+ 全栈应用的路由、数据层、SEO 与部署优化。限制:资料未提供具体收费、价格与平台支持范围等信息。