React Next27. 2. 20261 min čítania

Štruktúra React/Next projektu pre dlhodobý vývoj

Rozdelenie na components, features, hooks a services bez miešania zodpovedností.

Nejasná štruktúra projektu je spočiatku rýchla, ale po pár mesiacoch brzdí každý nový task. Tu nastavíme jednoduché hranice pre dlhodobý vývoj.

Oficiálne zdroje:

Čo si z článku odnesieš

ako rozdeliť components, features, services a types
ako oddeliť UI od business a API logiky
ako udržať čitateľný import graf bez chaosu

Praktický postup

Vytvor doménové moduly podľa produktu, nie podľa technológie.
API klient a services drž mimo UI komponentov.
Zdieľané typy centralizuj v types alebo doménových moduloch.
Pravidlá vrstiev vynucuj lintom a review checklistom.

Príklad z praxe

src/
  app/
  features/
  components/
  services/
  types/
  utils/

Ako overíš, že je to správne

Skontroluj, že komponenty nevolajú API priamo.
Over, že nový feature modul sa dá pridať bez porušenia štruktúry.
Spusť lint/typecheck/test/build.

Najčastejšie chyby

veľký priečinok utils bez doménového členenia,
business pravidlá v page komponente,
cyklické importy medzi vrstvami.

Mini úloha

Presuň jednu business funkciu z UI vrstvy do service.
Doplň pravidlo import hraníc.
Uprav README o architektúru projektu.

Čo bude ďalej

V ďalšom článku: TypeScript strict ako produkčný štandard.

Späť na zoznam článkov