该技能用于按 Feature-Sliced Design(FSD)组织 Next.js 项目:以业务域而非文件类型分组代码,并强制严格的层间导入层级。层级为 App(app/)→ Widgets → Features → Entities → Shared,代码只能向下导入。创建新特性切片的流程:在 src/features/auth/login/ 下建 ui、model、api 等分段;通过该目录 index.ts 暴露公共 API;在 app/login/page.tsx 中导入特性组件,保持页面轻薄;检查是否存在向上或跨切片导入。
策略要点:app/ 仅负责路由,page.tsx 只导入 Widgets/Features,不写 useEffect、fetch 等业务逻辑;按业务域(User、Product、Cart)而非组件/钩子归类;分片内使用标准分段名 ui、model、api、lib、config,避免 components、hooks、services;不要预先创建 Entities,逻辑先放 Features,仅在跨多个不同特性严格复用时才移入 Entities,简单 CRUD 放 shared/api;Server Actions 放特性的 model/(如 features/auth/model/actions.ts),数据访问逻辑放实体的 model/(如 entities/user/model/dal.ts);基础 UI(shadcn)放 shared/ui,特性专用 UI 放 features/*/ui。
限制与注意:资料明确警告 FSD 会引入样板代码,仅在项目预期显著增长时使用,较小项目建议简单模块化结构。禁止跨切片导入:同层切片之间不得相互导入。强制 RSC 边界序列化规则,Server/Client 组件需正确设置 'use client' 边界。资料未提供具体版本、收费或平台信息,暂未提供。