nextjs-app-router

此技能为使用 Next.js 13+ App Router 架构开发 Web 应用的开发者提供专业协助。它专为希望利用现代 React 范式（包括服务器组件 Server Components、客户端组件 Client Components 和服务器端渲染策略）的前端与全栈工程师所设计。该助手能协助开发者驾驭基于目录的路由系统、管理组件边界，并使用异步组件与缓存策略实现高效的数据获取流程。它非常适合需要架构可扩展、SEO 友好的应用，以实现高效的代码分割、减小包体积并提供渐进式 UI 渲染的开发者。

• 提供 App Router 目录结构 (layout.tsx, page.tsx, route.ts) 的架构指导。

• 实现 React Server Components 以减少客户端 JavaScript 执行。

• 配置 Metadata、动态路由以及使用 generateStaticParams 的静态站点生成 (SSG)。

• 整合使用 React Suspense 与加载状态的流式与渐进式渲染。

• 使用 fetch、数据库查询 (Prisma/ORM) 与自定义缓存验证的服务器端数据获取模式。

• 处理复杂 UI 需求，例如并行路由 (parallel routes)、拦截路由 (intercepting routes) 与错误边界。

• 将旧版 Pages router 逻辑转换为现代 App router 模式。

• 用户应提供具体的组件需求、路由需求或性能瓶颈，以获得最精确的代码结构。

• 定义组件时，请明确说明逻辑是否需要交互式 Hook (useState, useEffect)，这将决定是否使用 'use client' 指令。

• 助手采用 Next.js 标准规范，可用于排除 Hydration 错误、缓存问题或中间件配置。

• 输入通常涉及架构问题或代码片段；输出则提供惯用且高效的 React/Next.js 实现模式。

• 限制包括必须保持在 Next.js App Router 范式范围内，避免在服务器环境中使用过时的仅限客户端模式，并遵守当前的稳定 React 18/19 标准。