fsd-architecture

Feature-Sliced Design organizes your codebase into independent slices with strict layer hierarchy (app, widgets, features, entities, shared), ensuring code scales predictably. Each slice follows a standardized structure with ui, model, api, and lib segments, preventing architectural tangles and reducing onboarding friction.

The downward import rule enforces that higher layers can depend on lower layers, but never the reverse. This creates a clear dependency direction, prevents circular imports, and keeps your architecture maintainable and testable across large codebases.

Define your feature within the appropriate FSD layer (features or entities), organize it into segments (ui, model, api, lib), expose only what's necessary through an index.ts Public API, and use TypeScript path aliases for clean imports. This ensures consistency and prevents exposing internal implementation details.

Yes. FSD works seamlessly with Next.js and TypeScript by leveraging path aliases to map slice imports cleanly. Configure aliases in tsconfig.json to match your layer and slice structure, enabling organized imports that enforce the FSD hierarchy automatically.

Entities represent core business objects (User, Post) shared across features, while features are user-facing workflows that combine multiple entities (UserProfile feature). Entities live lower in the hierarchy, allowing features to depend on them without circular dependencies.

The Public API pattern exposes only the necessary exports from each slice through index.ts, hiding internal implementation. This improves encapsulation, makes refactoring safer, and clarifies what each slice provides to the rest of the application.