# Next Js template

<figure><img src="https://2732173407-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT4YO4oylbhJSf6A9M9vf%2Fuploads%2FUnf5actuWM8cQ6CReejT%2Fstart%20(1).svg?alt=media&#x26;token=7ac34531-f6d5-4dd0-9317-698d471b31d8" alt=""><figcaption><p>Banner Next Js template</p></figcaption></figure>

## :deciduous\_tree: Root folder

```
.
├── .git / .husky          # Git va pre-commit hook’lar
├── node_modules           # Loyiha bog‘liqliklari (dependencies)
├── public                 # Statik fayllar (rasmlar, ikonlar va h.k.)
├── src                    # Asosiy dastur kodi
├── .eslintrc.js           # ESLint sozlamalari
├── prettier.config.ts     # Prettier sozlamalari
├── package.json           # Bog‘liqliklar va script’lar
├── README.md              # Loyiha hujjati
```

***

## 🧠 `src/` – Asosiy qisim

Barcha **asosiy kodlar** `src/` papkasida joylashgan.

***

### 🗂️ `app/` – App router (Next.js uchun)

Routing (yo‘nalishlar), layout’lar va sahifalar shu yerda Next.js’ning App Router orqali aniqlanadi.

**Tuzilmasi:**

```
/
├── layout.tsx           # Root (asosiy) layout
├── page.tsx             # Asosiy sahifa
├── [locale]/            # Dinamik lokal (til) qo‘llab-quvvatlovi
│   ├── layout.tsx
│   └── page.tsx
├── globals.css          # Global uslublar
```

***

### ⚙️ `shared/` – Umumiy xizmatlar va yordamchilar

`shared/` papkasi butun loyihada ishlatiladigan **umumiy qurilish bloklari**ni o‘z ichiga oladi.

**Tuzilmasi:**

```
/
├── api/                 # API mijozlari va endpoint’lar
├── config/              # Umumiy konfiguratsiyalar
├── constants/           # Doimiy qiymatlar va enum’lar
├── hooks/               # Qayta foydalaniladigan custom hook’lar
├── i18n/                # Xalqaro til qo‘llab-quvvatlovi (i18next)
├── lib/                 # Yordamchi funksiyalar
├── react-query/         # React Query Provider konfiguratsiyasi
├── types/               # Umumiy TypeScript typelar
├── ui/                  # Qayta ishlatiladigan UI komponentlar (shadcn/ui asosida)
```

**Muhim fayllar:**

* `api/httpClient.ts` – Axios yoki fetch uchun abstraksiya
* `i18n/messages/` – Til fayllari (`uz`, `ru`, `en`, va h.k.)
* `lib/` – `formatDate`, `formatPhone` kabi yordamchi funksiyalar
* `hooks/` – `useWindowSize`, `useCloser` kabi foydali hook’lar

***

### 🧩 `features/` – Funksional modullar

Muayyan biznes mantiqiga ega bo‘lgan, mustaqil funksional bo‘limlar.

**Tuzilmasi (misol uchun `auth/`):**

```
/
└── auth/
    ├── lib/             # Ichki yordamchi funksiyalar
    ├── model/           # Holat boshqaruvi (state), schema’lar
    ├── ui/              # Auth bilan bog‘liq UI komponentlar
    └── index.ts         # Barcha fayllarni bitta joyga yig‘uvchi eksport
```

Har bir feature moduli o‘zining mantiqi, UI komponentlari, xizmatlari va holatini o‘z ichiga olishi mumkin.

***

### 🧱 `widgets/` – Murakkab UI bloklar

Bir nechta `features` yoki `entities`ni birlashtirib, **yuqori darajadagi interfeys qismlari**ni hosil qiladi.

**Misol papkalar:**

```
/
├── footer/
├── navbar/
└── welcome/
```

Har bir `widget` o‘zining ichki uslublari, mantiqlari va layout komponentlarini o‘z ichiga oladi.

***

### 🌐 `middleware.ts`

Bu fayl quyidagilar uchun ishlatiladi:

* Lokal tilni aniqlash (locale detection)
* Next.js middleware funksiyalar: yo‘naltirishlar (redirects), autentifikatsiya tekshiruvlari (auth checks) va boshqalar

***

## ✅ Xulosa

Ushbu Next.js shabloni quyidagilarni taqdim etadi:

* ⚡ **Tez ishga tushirish**: App Router va Turbopack bilan
* 🧠 **FSD asosida tuzilgan**: kengaytiriluvchi va tartibli kod arxitekturasi
* 🎨 **Tailwind CSS + Shadcn UI**: dark/light theme bilan
* 🌍 **i18n qo‘llab-quvvatlovi**
* 🔌 **React Query integratsiyasi**
* ✅ **ESLint, Prettier, Husky**: git commit/push uchun hook’lar
* 🔧 **Tayyor foydali hook’lar va util funksiyalar**

***

### 🔗 Tegishli sahifalar

* [Structure Overview](https://fias.gitbook.io/docs/boshlash/structure)
* [React Template Structure](https://fias.gitbook.io/docs/boshlash/structure/react-js-template)
