SuperAPI AI 工具集

nextjs-architecture

前端与建站

查看项目

更新于 10-15 20:31

技能介绍

用途:为 Next.js 项目提供 App Router 架构规范,指导创建或重构应用时的目录组织、服务端与客户端边界划分、渲染与缓存策略。默认以 App Router 为标准,仅当项目已使用 Pages Router 时才沿用。

主要能力与规则:默认优先使用 Server Components,仅在需要交互状态、事件处理、浏览器 API 或依赖 DOM 的库时标记 "use client";禁止在 Client Components 中导入服务端模块;在边界(route handlers、Server Actions)用 schema 校验输入;授权始终在服务端完成,不依赖 UI;缓存与再验证需显式决策。

组织方式:app/ 放路由、布局、loading、error;features/<域>/ 放该域的 UI、hooks、schemas、services;components/ui/ 放可复用基础组件;lib/ 放 auth、db、env、utils。数据获取靠近需要数据的路由,领域逻辑放入 features/ 而非通用 utils,布局保持轻量。

数据与缓存:在 static、dynamic、streaming 间有意识选择;使用具名且可文档化的 revalidate / tags / updateTag;避免无理由的全局 force-dynamic;去重 fetch,避免组件级联重复查询;变更优先用 Server Actions,公开 API/webhook 用 route handlers。

限制与反模式:避免根布局无必要地加 "use client"、仅为省事在客户端取数、向客户端传递不可序列化对象、在页面 JSX 中混入业务逻辑、变更后未失效导致缓存陈旧。中间件只做轻量鉴权、重定向、响应头,不做重数据库操作。完成标准包括边界可审计、按域组织路由、服务端校验与授权、显式缓存策略、无密钥泄漏到客户端包。