Next Js template

Banner Next Js template

🌳 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 bloklarini 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 entitiesni birlashtirib, yuqori darajadagi interfeys qismlarini 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

PreviousStructureNextReact Js template

Last updated