← ClaudeAtlas

nextjs-architecturelisted

Arquitectura modular de Next.js con capa de acceso a datos — módulos en `app/` con `_actions/`, `_components/`, `_internal/` y `_schemas/`, todo el acceso a backend confinado en `_internal` con `import 'server-only'`, Server Actions como controladores delgados que validan con Zod y delegan, DTOs mínimos en camelCase que nunca exponen el registro crudo ni el token, y autorización comprobada por recurso dentro de la DAL. Úsala al crear o modificar un módulo, una página, un Server Action, un componente cliente o una función de acceso a datos en un proyecto Next.js que siga esta convención; al integrar una API externa desde el servidor; al decidir dónde colocar código nuevo; o al revisar que un componente cliente no esté importando `_internal` ni recibiendo datos privados.
JoseLuis21/claude-plugins · ★ 0 · Web & Frontend · score 70
Install: claude install-skill JoseLuis21/claude-plugins
# Next.js Modular Architecture Skill This skill enforces the project architecture for all Next.js code. ## Core Guidelines ### 1. Technology Stack - **Package Manager**: `pnpm` only. - **Authentication**: AuthJS. - **UI**: Shadcn UI + Tailwind CSS. - **Validation**: Zod for schemas, forms, server actions, API responses, and DTO validation. - **State Management**: Zustand when client-side state is needed. - **Data Security Pattern**: Next.js Data Access Layer (DAL) using `_internal`. --- ## 2. Global Directory Structure Global shared folders MUST be prefixed with `_`: ```txt _components/ _enums/ _fonts/ _hooks/ _interfaces/ _internal/ _providers/ _utils/ ``` ### Folder responsibilities - `_components/`: Shared reusable UI components. - `_hooks/`: Shared client hooks. - `_interfaces/`: Shared TypeScript interfaces/types that are safe to import from client or server. - `_schemas/`: Shared Zod schemas only when truly global. - `_utils/`: Generic utilities that are safe for client and server. - `_internal/`: Server-only Data Access Layer, API clients, authorization helpers, mappers, and private business logic. --- # 3. Mandatory Data Access Layer Convention ## 3.1 `_internal` is the official DAL The `_internal` folder is the only allowed place for: - External backend API calls. - Direct access to `process.env`, except public `NEXT_PUBLIC_*` config when unavoidable. - Authenticated fetch wrappers. - Authorization checks. - Backend `snake_case` to frontend `camelCase`