Structure

Ushbu bo‘lim barcha FIAS shablonlari uchun umumiy tuzilma prinsiplarini tushuntiradi. Agar siz maxsus Next.js yoki React.js uchun tuzilmani ko‘rmoqchi bo‘lsangiz, quyidagilarga murojaat qiling:

🧠 Feature-Sliced Design (FSD) nima?

Feature-Sliced Design — bu frontend arxitekturasi bo‘lib, loyihadagi kodlar texnik rollarga (masalan: components, services, utils) emas, balki biznes funksiyalari asosida tashkil etiladi.

FSD asosiy maqsadlari:

Loyihani kattalashtirish oson bo‘lishi
Feature'larni ajratish (Separation of Concerns)
Koddan qayta foydalanish va kodni soddalashtirish

🗂️ Asosiy qatlamlar (Layer’lar)

FIAS loyihasi quyidagi asosiy bo‘limlarga ajratiladi:

1. `app/` (faqat Next.js uchun)

App Router asosida marshrutlar va layout'lar shu yerda aniqlanadi.

2. `pages/` (faqat React.js uchun)

Asosiy sahifalar va routing sozlamalari shu yerda joylashadi.

3. `shared/`

Loyihaning istalgan qismida qayta foydalaniladigan umumiy komponentlar, hook’lar, util funksiyalar, uslublar va typelar joylashadi.

4. `entities/`

Domen darajasidagi unitlar (masalan: user, product, cart) joylashadi. Har bir entity quyidagilardan iborat bo‘ladi:

O‘ziga xos ma’lumot modellari
UI komponentlar
Minimal biznes logika

5. `features/`

Bitta yoki bir nechta entities asosida qurilgan funksional birliklar. Misol uchun: auth/login, search/filter, cart/addItem.

6. `widgets/`

Bir nechta features yoki entitiesni birlashtirgan murakkab UI bloklari. Misollar: Header, Sidebar, ProductPreview.

7. `processes/` (ixtiyoriy)

Murakkab UI jarayonlari (workflow)ni boshqaruvchi logikalar. Masalan: checkout jarayoni, turli qismdagi widgets va featuresni birlashtiradi.

8. `app/` yoki `pages/`

Ilovaning boshlang‘ich nuqtalari — marshrutlar, layout’lar va umumiy konfiguratsiyalar joylashadi. (Template turiga qarab farq qiladi: Next.js’da app/, React’da pages/ bo‘ladi)

🧱 Nomlash tartibi

Har bir funksional bo‘lim odatda quyidagi ichki tuzilmani egallaydi:

features/
└── login/
    ├── ui/       ← React komponentlar
    ├── model/    ← Holat (state), hook’lar, schema’lar
    └── lib/      ← Ichki yordamchi funksiyalar va mantiqlar

ui/ – Interfeys komponentlari model/ – Holatlarni boshqarish, hook’lar, Zustand yoki schema’lar lib/ – Ichki biznes mantiqlari, yordamchi funksiyalar

📚 Qo'shimcha o'qish uchun

PreviousFoydalanish NextNext Js template

Last updated 9 months ago

hashtag🧠 Feature-Sliced Design (FSD) nima?

hashtag🗂️ Asosiy qatlamlar (Layer’lar)

hashtag1. app/ (faqat Next.js uchun)

hashtag2. pages/ (faqat React.js uchun)

hashtag3. shared/

hashtag4. entities/

hashtag5. features/

hashtag6. widgets/

hashtag7. processes/ (ixtiyoriy)

hashtag8. app/ yoki pages/

hashtag🧱 Nomlash tartibi

hashtag📚 Qo'shimcha o'qish uchun