Next.js and React Clean Code Architecture

Apply these conventions to both Next.js and plain React projects. Next.js routing details still come from the installed documentation under node_modules/next/dist/docs/.

First inspect the project

1. Read project-local rules, package scripts, path aliases, and existing feature structure.
2. For Next.js work, follow the source-of-truth workflow in the Next.js AI Coding Agents skill.
3. Preserve established names and boundaries unless the requested change requires migration.
4. Scale the structure to the application; do not create layers or shared folders with no real responsibility.

Dependency direction

Presentation -> Application -> Domain
Infrastructure -> Application/Domain ports
Composition Root -> concrete implementations