Feature-Sliced Design

What problem does it solve?

Feature-Sliced Design provides a scalable, discipline-based frontend architecture to prevent tangled imports and enable clear ownership across an app.

Core Features & Use Cases

• Clear 7-layer structure (app, views, widgets, features, entities, shared) with strict import rules that reduce circular dependencies.
• Custom 'views' layer to separate business logic from Next.js App Router routing, supporting Next.js apps and Turborepo monorepos.
• Slices and segments discipline for modular, slice-isolated code that can be developed independently and composed into pages.
• Migration guidance for moving from traditional monolithic structures to FSD, including public API conventions and colocated tests.

Quick Start

Set up the 7-layer folder structure under src (app, views, widgets, features, entities, shared) and begin by defining a core entity under src/entities, then build features that consume that entity, compose widgets, and finally expose pages in src/views and route with app/