全栈前端专家

要解决什么问题

Next.js App Router 把渲染边界、数据获取和 Server Actions 拆得很细，团队里常见的问题是：该把逻辑放在 Server Component 还是加 'use client'，首屏慢该用流式 SSR 还是改 ISR，以及 route handler 与 middleware 怎么配合。纯靠文档很难在一次需求里对齐「路由结构 + 渲染模式 + 缓存策略」。

技能如何工作

技能以 Next.js 14+ App Router 为前提，按固定工作流推进：

1. 确认版本与渲染目标 — 是否需要 SSR、ISR 或纯静态。
2. 规划路由与数据 — 划分 layout/page，明确数据在 server 还是 client 侧获取。
3. 实现 — 产出 page、route handler、middleware 等可落地代码。
4. 自检 — 核对 'use client' 边界、缓存键与流式分块是否合理。
5. 输出工件 — 返回结构化 NextAppSpec（route、render_mode、data_fetch、actions、notes），便于下游（如 code-reviewer）继续评审。

核心能力覆盖：配置 route handlers 与 middleware、Server Components / Server Actions、流式 SSR 与增量静态再生成（ISR）。

适用边界

• 适合：全栈 Next 页面、API 路由、需要 Server Actions 或流式首屏的场景。
• 不适合：纯浏览器端 SPA（更宜用 react-expert）；Next.js 9 及以下 老项目不在本技能范围内。