app-router

app-router 技能为使用 Next.js App Router 架构进行开发的开发者提供专业协助。它作为基于文件系统的路由指南，确保开发者能正确遵循 React Server Components 和基于文件的路由模式。此技能非常适合希望在扩展 Next.js 项目结构的同时，通过高效的路由区段定义来维持高性能的团队或个人。

• 简化了路由区段必要文件约定的创建，包括 page.tsx、layout.tsx、loading.tsx 和 error.tsx。
• 实现复杂的路由模式，例如动态路由 ([slug])、捕获所有路径区段 ([...slug])、路由分组 ((folder)) 以及平行路由 (@slot)。
• 提供有关管理静态与动态 Metadata 的自动化指导，确保符合 SEO 要求及正确的生成模式。
• 运用 React Suspense 实现加载界面 (Loading UI) 与错误边界 (Error Boundaries)，提升应用程序的强韧性。
• 通过遵循共置 (Colocation) 标准、私有文件夹模式 (_folder) 与拦截路由 (.) 来组织项目目录。

使用说明：

• 当创建新路由时，只需提示该技能新增页面或定义区段；它将根据标准 Next.js 约定生成所需的文件结构。
• 使用此技能将现有的 Pages Router 应用程序重构为 App Router 模型，以确保与 Server Components 的兼容性。
• 非常适合调试路由问题、识别设置错误的加载或错误状态，以及管理复杂的嵌套布局。
• 预期的输入包括路由路径、预期的行为（例如动态参数）以及针对布局或 UI 状态的功能需求。
• 此技能严格遵守 app/ 目录限制，帮助开发者避免诸如将组件放置在无效路由区段等常见陷阱。