Feature-Sliced Design

Next.js frontend structure using Feature-Sliced Design organizes code into a 7-layer architecture: app, views, widgets, features, entities, and shared. This structure enforces strict import rules to reduce circular dependencies and separate business logic from App Router routing.

Preventing circular dependencies in a frontend monorepo is achieved by adopting Feature-Sliced Design. It enforces strict layer import rules and slice isolation, ensuring modules are developed independently and composed cleanly into pages without tangled imports.

Feature-Sliced Design works in Turborepo monorepos and scales to apps of any size. It applies the same 7-layer architecture and import rules to manage shared code across multiple packages, maintaining clear ownership and modular slice isolation.

Business logic in Next.js App Router belongs in the custom 'views' layer of Feature-Sliced Design. This separates it from routing concerns, allowing pages in the app layer to route while widgets and features handle the underlying presentation and logic.

Migrating an existing frontend app to Feature-Sliced Design involves moving from monolithic structures to the 7-layer setup. You start by defining core entities under src/entities, build features that consume them, compose widgets, and establish public API conventions.

A views layer in frontend architecture separates business logic from Next.js App Router routing. This isolation prevents routing configurations from tangling with feature composition, keeping slices modular and enabling independent development of UI components.