技能介绍

解决的核心问题

Next.js App Router 的范式转移常让工程师感到困惑。开发者容易陷入将所有组件标记为客户端的误区，导致打包体积膨胀和数据获取碎片化。此外，中间件（Middleware）逻辑臃肿、滥用 useEffect 获取数据、忽略 loading.tsx 与 error.tsx 约定，都会直接拖垮边缘节点的响应速度和页面首屏体验。

核心能力与实践步骤

该技能通过结构化指南重塑 Next.js 工程实践，核心步骤如下：

路由与并发渲染：利用 Route groups 组织代码而不改变 URL，通过 @slot 实现并行路由，让多个页面同时渲染。
服务端优先：默认使用 Server Components 直接访问数据库，实现零 JS 下发；仅在交互叶子节点添加 'use client'。
数据与缓存：在 Server Component 中处理数据获取，结合 ISR 缓存策略；变更数据后通过 revalidateTag 或 revalidatePath 精准刷新。
表单与校验：使用 Server Actions 处理表单提交，并在写入数据库前利用 Zod 进行严格的输入校验。
边界处理：为独立的异步组件包裹 Suspense 边界，确保关键路由具备完善的加载与错误状态。

适用边界与注意事项

该指南高度依赖 Next.js App Router 的底层机制，不适用于传统的 Pages Router 项目。特别注意，Middleware 运行在边缘且拦截所有匹配请求，必须保持轻量级，严禁在其中放置重计算或复杂业务逻辑。此外，Server Actions 的缓存失效需要开发者显式调用 revalidation API，否则可能导致页面展示过期数据。