SuperAPI AI 工具集

structuring-nextjs-app-router

前端与建站

查看项目

更新于 10-15 22:17

技能介绍

用途:在 Next.js App Router 仓库中把新代码放到正确位置,并在重构时保持架构一致。核心目标包括:让 src/app 专注路由、保持路由文件轻薄;页面 UI 放在 src/components/<page-name>/<PageName>.tsx;按职责组织域逻辑;统一命名(目录 kebab-case、组件文件 PascalCase)。

使用方式:先检查仓库是否已采用该约定,已采用则沿用;仅有小偏差时引导新代码靠拢;若仓库有明确不同的架构,则保留原有模式,除非用户要求迁移。然后对任务分类(路由文件、页面 UI、共享组件、API 客户端、server action、hook、context/provider、工具类型等),按参考文档放置。

放置规则要点:路由处理器放 src/app/api/**/route.ts;页面 UI 放 src/components/<page-name>/<PageName>.tsx;域 API 代码放 src/api/<domain>/module.ts、queries.ts、types.ts;server actions 放 src/actions/<domain>/index.ts;context 放 src/context/<context-name>/;provider 放 src/providers/<provider-name>/。共享 UI 放 src/components/common/<component-name>/,页面专属 UI 放 src/components/<page-name>/。通用工具、常量、类型分别放 src/utils、src/constants、src/types,项目专用 helper 放 src/helpers。

命名:目录用 kebab-case;React 组件文件用 PascalCase;context 文件为 <ContextName>Context.tsx;provider 文件为 <ProviderName>Provider.tsx;hook 文件为 useX.ts,尽量让导出名与文件名一致。

重构:逐步迁移文件、保持导入一致、避免请求范围外的改动,不擅自新增顶层 src 目录,除非仓库已有或用户要求。完成后检查路由文件是否仍在 src/app、页面 UI 是否被不必要地困在 page.tsx、域逻辑是否位于正确顶层目录、命名是否合规。

限制:具体参考矩阵见 references/REFERENCE.md,本资料未提供其完整内容;该技能主要关注结构约定,未涉及安装命令、收费、平台或效果信息。