# Next JS Architecture Fsd

> Scalable project structure using Feature-Sliced Design (FSD). Use when this capability is needed.

- Skill: `tomevault-io/next-js-architecture-fsd` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/next-js-architecture-fsd`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/next-js-architecture-fsd/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/next-js-architecture-fsd

---


# Architecture (Feature-Sliced Design)

## **Priority: P2 (MEDIUM)**

Adopt **Feature-Sliced Design (FSD)** for scalable applications.
**Warning**: FSD introduces boilerplate. Use it only if the project is expected to grow significantly (e.g., 20+ features). For smaller projects, a simple module-based structure is preferred.

## Strategy

1. **App Layer is Thin**: The `app/` directory (App Router) is **only** for Routing.
   - _Rule_: `page.tsx` should only import Widgets/Features. No business logic (`useEffect`, `fetch`) directly in pages.
2. **Slices over Types**: Group code by **Business Domain** (User, Product, Cart), not by File Type (Components, Hooks, Utils).
   - _Bad_: `src/components/LoginForm.tsx`, `src/hooks/useLogin.ts`
   - _Good_: `src/features/auth/login/` containing both.
3. **Layer Hierarchy**: Code can only import from _layers below it_.
   - `App` -> `Widgets` -> `Features` -> `Entities` -> `Shared`.
4. **Avoid Excessive Entities**: Do not preemptively create Entities.
   - _Rule_: Start logic in `Features` or `Pages`. Move to `Entities` **only** when data/logic is strictly reused across multiple differing features.
   - _Rule_: Simple CRUD belongs in `shared/api`, not `entities`.
5. **Standard Segments**: Use standard segment names within slices.
   - `ui` (Components), `model` (State/actions), `api` (Data fetching), `lib` (Helpers), `config` (Constants).
   - _Avoid_: `components`, `hooks`, `services` as segment names.

## Structure Reference

For the specific directory layout and layer definitions, see the reference documentation.

- [**FSD Folder Structure**](references/fsd-structure.md)

## Integration with Next.js Core

- **Server Actions**: Place them in the `model/` folder of a Feature (e.g., `features/auth/model/actions.ts`).
- **Data Access (DAL)**: Place logic in the `model/` folder of an Entity (e.g., `entities/user/model/dal.ts`).
- **UI Components**: Base UI (shadcn) belongs in `shared/ui`. Feature-specific UI belongs in `features/*/ui`.

---
> Converted and distributed by [TomeVault](https://tomevault.io/claim/ngxtm) — claim your Tome and manage your conversions.
<!-- tomevault:4.0:skill_md:2026-04-13 -->