SuperAPI AI 工具集

app-router

前端与建站

查看项目

更新于 10-15 20:33

技能介绍

用途:该技能面向 Next.js App Router,在用户要求创建 Next.js 路由、添加页面、设置布局、实现加载状态或添加错误边界时使用。

主要能力:基于 app/ 目录的文件系统路由,覆盖核心文件约定,包括 page.tsx(路由 UI)、layout.tsx(共享布局并跨导航保留状态)、loading.tsx(基于 React Suspense 的加载 UI)、error.tsx(路由段错误边界)、not-found.tsx(404 UI)、template.tsx(导航时重新渲染)、default.tsx(并行路由回退)。同时涵盖文件夹约定:folder/ 路由段、[folder]/ 动态段、[...folder]/ 全捕获、[[...folder]]/ 可选全捕获、(folder)/ 不影响 URL 的路由组、@folder/ 命名插槽、_folder/ 私有文件夹。

使用方式:在 app/ 下新建文件夹并放置 page.tsx 即可创建路由;页面默认是 Server Component,动态路由通过 params 属性获取参数;根布局必须包含 html 与 body;可用 generateMetadata 生成动态元数据;通过 (folder) 组织路由而不影响 URL,通过 @slot 实现并行路由,通过 (.) 模式实现拦截路由。

适用场景:Next.js 项目的路由组织、布局复用、加载与错误处理、元数据配置及复杂布局结构。

限制:资料未提供安装命令、版本要求、收费信息或具体平台支持范围;示例代码仅作模式说明,实际使用需结合项目配置。