mcpField
A
architect-nextjs

architect-nextjs

github.com/ivantsxx开发339 次安装36 周前更新
代码仓库

关于 architect-nextjs

为 Next.js 15+ 应用提供架构指导的技能，面向规划目录结构和实现组件的开发者。它依据代码使用范围划分本地与共享位置，并强调 App Router 和服务端优先。

主要功能

  1. 01按功能使用范围放置代码
  2. 02采用功能导向的目录结构
  3. 03遵循 Next.js 15 App Router
  4. 04默认使用服务端组件
  5. 05指导客户端组件与 Server Actions

适用场景

  1. 01规划新应用的目录结构
  2. 02决定组件应本地放置还是共享
  3. 03检查组件是否需要客户端交互

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/ivantsxx/my-next-skills --skill architect-nextjs

安装后在 Claude Code 中输入/architect-nextjs确认已加载。

附带文件references/component_templates.mdreferences/project_structure.md

详细介绍

Scope Rule Architect (Next.js 15+)

本技能通过严格执行 Scope Rules 和 Screaming Architecture，为可扩展的 Next.js 应用奠定架构基础。

核心原则

1. Scope Rule（绝对准则）

“Scope 决定结构。”

  • 局部 Scope：仅供 1 个功能使用的代码 → 必须保留在本地（例如 (user)/profile/_components）。
  • 共享 Scope：供 2 个或更多功能使用的代码 → 必须放入 src/shared/。
  • 没有例外：不要将仅使用一次的组件放入 shared。
2. Screaming Architecture

目录结构必须一目了然地说明应用做什么。

  • 使用 Route Groups (feature) 作为顶层模块。
  • 避免在顶层使用 containers 或 views 等通用文件夹。
3. Next.js 15 标准
  • 仅使用 App Router：不使用 pages/ 目录。
  • 优先使用服务端：组件默认是 Server Components。
  • 数据访问：直接在 Server Components 中获取数据，或通过 Server Actions 获取。

决策框架

放置文件时，请遵循以下决策树：

  1. 统计使用范围：

    • 由 1 个功能使用：放在 app/(feature)/_components/。
    • 由 2 个或更多功能使用：放在 src/shared/components/。

  2. 确定类型：

    • Server Component：默认类型。用于静态内容和初始数据获取。
    • Client Component：仅用于 useState、useEffect 或事件监听器。
    • Server Action：用于数据变更和表单处理。放在 _actions/name.ts。

实施指南

项目结构

有关标准目录布局，请参考 项目结构模板。
新建文件夹或确认特定文件应放置的位置时，请使用此参考。

组件模板

有关确保遵循最佳实践的代码模式，请参考 组件模板。
其中包括：

  • 使用 Suspense 和数据获取的 Server Components。
  • 专门用于交互功能的 Client Components。
  • 类型定义和验证完善的 Server Actions。

质量检查清单

在最终确定结构或创建文件前：

  1. Scope：是否有超过 1 个功能使用？如果没有，请移至 _components。
  2. Server：是否绝对需要 "use client"？能否将它下移到组件树更深处？
  3. Screaming：文件夹名称是否描述了它做什么（例如 (invoices) 而不是 pages）？
  4. 就近放置：特定的 hooks/types/styles 是否与使用它们的组件放在一起？

评论

支持 Markdown