What is Clean Architecture?
Before writing a single line of code, it is essential to understand the core idea. Clean Architecture is neither a directory structure nor a third-party library: it is a systematic approach to deciding which parts of software are allowed to depend on which other parts. In this lesson, we will explore what it is, what problem it solves, its main goals, its core propositions, and its fundamental components.
The Monolithic Component Anti-Pattern
When building applications with Next.js, the most common developer instinct is to place all application logic directly inside React components. This approach, known as an exclusively component-driven architecture, works for toy prototypes but rapidly devolves into a maintenance nightmare in real engineering projects.
Domain Layer: Entities and Use Cases
The Domain Layer constitutes the foundational core of any application engineered under Clean Architecture. Within this layer reside the system's entities and its most stable business rules.
Data Access: Repository, Datasources, and Mappers
In the previous session, we constructed the system's core HTTP calls to NestJS servers, local browser storage, and in-memory mock data fixtures.
Dependency Injection, Presenters, and Next.js
Having designed the Domain Layer and the Infrastructure Layer, we face the final architectural question: how do we connect all of this to React visual components in Next.js without polluting the user interface with direct network calls once again?
Week Slides
Official slides corresponding to Week 11: Frontend Clean Architecture with Next.js and TypeScript, Dependency Inversion Principle (DIP), Domain Layer, Use Cases, Repository Pattern, Defensive Mappers, and Composition Root.