技能介绍

解决的核心问题

在 Next.js App Router 开发中，开发者常面临三类典型困惑：路由结构混乱——如何用 Route groups 组织代码而不改变 URL，如何通过 Parallel routes 实现多页面并行渲染；数据获取与渲染边界模糊——不清楚何时该用 Server Components 直接访问数据库，何时需添加 'use client' 让组件在客户端运行；性能与状态管理失控——缓存策略选择（如 ISR）不明确，中间件（Middleware）因逻辑过重导致请求延迟，Server Actions 缺乏输入校验导致数据写入风险。这些问题若不系统梳理，易引发代码维护困难、性能瓶颈和安全漏洞。

技能如何工作

该技能通过结构化知识框架和可落地的实践指南解决上述问题：

路由架构设计：指导用 Route groups（如 name 参数）按功能模块组织代码，不改变 URL 结构；通过 Parallel routes（@slot 语法）实现多页面同步渲染，适用于复杂布局场景。
服务端组件优先策略：明确 Server Components 为默认选择，强调其在服务端运行、可直接访问数据库且零 JavaScript 传输的特性，仅在交互组件（如表单输入）使用 'use client'。
缓存与中间件优化：提供 ISR（增量静态再生）和缓存配置指南，要求中间件（Middleware）仅处理认证、重定向或请求头修改，保持轻量化以避免边缘节点性能损耗。
Server Actions 安全实践：规范 Server Actions 需用 Zod 验证输入后再写入数据库，数据变更后必须调用 revalidateTag 或 revalidatePath 更新缓存。

适用边界与注意点

避免过度客户端化：禁止在顶层 layout 或 page 组件添加 'use client'，防止整页变为客户端组件；能用 Server Components 完成的数据获取，不应在客户端通过 useEffect 实现。
异步组件需隔离：独立的异步组件必须用 <Suspense> 边界包裹，避免单个组件阻塞整个页面渲染；关键路由需配套 loading.tsx 和 error.tsx 处理加载与错误状态。
中间件职责单一：中间件运行于每个匹配请求前，禁止在其中放置重逻辑（如复杂计算或数据库查询），仅保留必要的请求前置处理。
检查清单驱动落地：通过 8 项检查清单（如 Server Components 默认使用、Server Actions 输入校验、缓存更新触发等），确保最佳实践在项目中被强制执行。