SuperAPI AI 工具集

nextjs-scope-architecture

前端与建站

查看项目

更新于 10-15 22:39

技能介绍

用途:这是一个 Next.js 15+ 架构规范技能,帮助设计、审查和重构应用结构,让目录清晰表达业务意图,并在代码放置、服务端优先模式、性能与 SEO 上保持一致标准。适用场景包括新建项目结构、决定组件/hook/action/工具的位置、审查既有代码架构问题、以及为扩展性、性能或可读性做重构。

主要能力与规则:一、仅使用 App Router;禁止新代码使用 Pages Router;采用 page.tsx、layout.tsx、loading.tsx、error.tsx、not-found.tsx 等文件约定,用路由组组织,用 _folder 私有文件夹退出路由。二、服务端优先:默认 Server Components,仅在确有需要时添加 "use client";尽量在服务端取数,用 loading.tsx 与 Suspense 做流式,用 Server Actions 处理变更与表单,静态生成或 ISR 优化 SEO 与性能,服务端专用代码使用 server-only。三、Scope Rule 不可妥协:仅一个功能使用则本地保留,两个及以上功能使用才移到 shared/;不提前抽取,也不重复共享逻辑。四、Screaming Architecture:文件夹结构应直接说明应用做什么,功能名描述业务行为而非技术细节,路由结构与业务逻辑对应,读 /app 即可理解应用。

使用方式:放置或审查代码时,先判断组件类型(Server/Client/Hybrid),再统计有多少功能使用,严格套用 Scope Rule,兼顾打包拆分与 SSR,并说明决策理由。质量门要求:Scope 正确应用、服务端优先、无多余 Client Components、路由组符合业务含义、通过“screaming 测试”、保留未来扩展性。

限制:资料未提供安装命令、价格、平台支持范围或具体版本兼容细节;本技能以规则与审查指导为主,不包含完整代码示例。