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:

structure
React js vs Next js

🧠 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

PreviousFoydalanishNextNext Js template

Last updated