M

MLOG

O'zbek

Next.js'da kengaytiriladigan va dinamik UI'larni oching. Bizning to'liq qo'llanmamiz tashkil etish uchun Marshrutlar Guruhlari va murakkab boshqaruv panellari uchun Parallel Marshrutlarni qamrab oladi. Hoziroq darajangizni oshiring!

Next.js App Router'ni O'zlashtirish: Marshrutlar Guruhlari va Parallel Marshrutlar Arxitekturasini Chuqur Tahlil Qilish

Next.js App Router'ning chiqarilishi, mashhur React freymvorki yordamida dasturchilarning veb-ilovalarni yaratish usulida paradigma o'zgarishini belgilab berdi. Pages Router'ning faylga asoslangan konvensiyalaridan uzoqlashib, App Router yanada kuchli, moslashuvchan va serverga yo'naltirilgan modelni taqdim etdi. Ushbu evolyutsiya bizga katta nazorat va tartib bilan yuqori darajada murakkab va samarali foydalanuvchi interfeyslarini yaratish imkonini beradi. Taqdim etilgan eng transformatsion xususiyatlar orasida Marshrutlar Guruhlari va Parallel Marshrutlar mavjud.

Korporativ darajadagi ilovalarni yaratishni maqsad qilgan dasturchilar uchun bu ikki tushunchani o'zlashtirish shunchaki foydali emas — bu juda muhimdir. Ular maketlarni boshqarish, marshrutlarni tashkil etish va boshqaruv panellari kabi dinamik, ko'p panelli interfeyslarni yaratish bilan bog'liq umumiy arxitektura muammolarini hal qiladi. Ushbu qo'llanma global dasturchilar auditoriyasi uchun asosiy tushunchalardan tortib, ilg'or amalga oshirish strategiyalari va eng yaxshi amaliyotlargacha bo'lgan Marshrutlar Guruhlari va Parallel Marshrutlarning keng qamrovli tahlilini taqdim etadi.

Next.js App Router'ni Tushunish: Tezkor Eslatma

Tafsilotlarga sho'ng'ishdan oldin, keling, App Router'ning asosiy tamoyillarini qisqacha ko'rib chiqaylik. Uning arxitekturasi papkalarga asoslangan tizimga qurilgan bo'lib, unda papkalar URL segmentlarini belgilaydi. Ushbu papkalardagi maxsus fayllar o'sha segment uchun UI va xatti-harakatlarni belgilaydi:

Ushbu tuzilma, React Server Komponentlari (RSC) dan standart foydalanish bilan birgalikda, samaradorlik va ma'lumotlarni olish naqshlarini sezilarli darajada yaxshilashi mumkin bo'lgan serverga ustuvorlik beruvchi yondashuvni rag'batlantiradi. Marshrutlar Guruhlari va Parallel Marshrutlar ushbu poydevorga asoslangan ilg'or konvensiyalardir.

Marshrutlar Guruhlarini Oydinlashtirish: Loyihangizni Tushunarlilik va Kengayish uchun Tashkil etish

Ilova o'sib borishi bilan marshrutlar soni boshqarib bo'lmas holga kelishi mumkin. Sizda marketing uchun bir to'plam sahifalar, foydalanuvchi autentifikatsiyasi uchun boshqasi va asosiy ilova boshqaruv paneli uchun uchinchisi bo'lishi mumkin. Mantiqan, bular alohida bo'limlardir, ammo ularni URL manzillaringizni chalkashtirmasdan fayl tizimida qanday tashkil qilasiz? Aynan shu muammoni Marshrutlar Guruhlari hal qiladi.

Marshrutlar Guruhlari Nima?

Marshrutlar Guruhi - bu fayllaringiz va marshrut segmentlaringizni URL tuzilmasiga ta'sir qilmasdan mantiqiy guruhlarga ajratish mexanizmidir. Siz marshrut guruhini papka nomini qavslarga o'rab yaratasiz, masalan, (marketing) yoki (app).

Qavs ichidagi papka nomi faqat tashkiliy maqsadlar uchun ishlatiladi. Next.js URL manzilini aniqlashda uni butunlay e'tiborsiz qoldiradi. Masalan, app/(marketing)/about/page.js manzilidagi fayl /(marketing)/about URL manzilida emas, balki /about manzilida taqdim etiladi.

Marshrutlar Guruhlarining Asosiy Qo'llanilish Holatlari va Afzalliklari

Oddiy tashkil etish bir afzallik bo'lsa-da, Marshrutlar Guruhlarining haqiqiy kuchi ilovangizni alohida, umumiy maketlarga ega bo'limlarga ajratish qobiliyatidadir.

1. Marshrut Segmentlari uchun Turli Maketlarni Yaratish

Bu eng keng tarqalgan va kuchli qo'llanilish holatidir. Ikki asosiy bo'limga ega veb-ilovani tasavvur qiling:

Marshrutlar Guruhlarisiz, ushbu bo'limlarga turli xil ildiz maketlarini qo'llash murakkab bo'lar edi. Marshrutlar Guruhlari bilan bu juda intuitiv. Siz har bir guruh ichida noyob layout.js faylini yaratishingiz mumkin.

Ushbu stsenariy uchun odatiy fayl tuzilmasi quyidagicha:

app/
├── (marketing)/
│   ├── layout.js      // Public layout with marketing header/footer
│   ├── page.js        // Renders at '/'
│   └── about/
│       └── page.js    // Renders at '/about'
├── (app)/
│   ├── layout.js      // Dashboard layout with sidebar
│   ├── dashboard/
│   │   └── page.js    // Renders at '/dashboard'
│   └── settings/
│       └── page.js    // Renders at '/settings'
└── layout.js          // Root layout (e.g., for <html> and <body> tags)

Ushbu arxitekturada:

2. Segmentni Umumiy Maketdan Chiqarish

Ba'zida, ma'lum bir sahifa yoki bo'lim ota maketdan butunlay ozod bo'lishi kerak. Bunga umumiy misol, saytning asosiy navigatsiyasiga ega bo'lmasligi kerak bo'lgan to'lov jarayoni yoki maxsus ochilish sahifasi bo'lishi mumkin. Bunga marshrutni yuqori darajadagi maketni ulashmaydigan guruhga joylashtirish orqali erishishingiz mumkin. Bu murakkab eshitilsa-da, bu shunchaki marshrut guruhiga ildiz maketidan `children`ni render qilmaydigan o'zining yuqori darajadagi layout.js faylini berishni anglatadi.

Amaliy Misol: Ko'p Maketli Ilova Yaratish

Keling, yuqorida tavsiflangan marketing/ilova tuzilmasining minimal versiyasini yarataylik.

1. Ildiz Maketi (app/layout.js)

Ushbu maket minimal bo'lib, har bir sahifaga qo'llaniladi. U muhim HTML tuzilmasini belgilaydi.

// app/layout.js
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

2. Marketing Maketi (app/(marketing)/layout.js)

Ushbu maket ommaviy sarlavha va altbilgini o'z ichiga oladi.

// app/(marketing)/layout.js
export default function MarketingLayout({ children }) {
  return (
    <div>
      <header>Marketing Header</header>
      <main>{children}</main>
      <footer>Marketing Footer</footer>
    </div>
  );
}

3. Ilova Boshqaruv Paneli Maketi (app/(app)/layout.js)

Ushbu maket boshqacha tuzilishga ega bo'lib, autentifikatsiyadan o'tgan foydalanuvchilar uchun yon panelni o'z ichiga oladi.

// app/(app)/layout.js
export default function AppLayout({ children }) {
  return (
    <div style={{ display: 'flex' }}>
      <aside style={{ width: '200px', borderRight: '1px solid #ccc' }}>
        Dashboard Sidebar
      </aside>
      <main style={{ flex: 1, padding: '20px' }}>{children}</main>
    </div>
  );
}

Ushbu tuzilma bilan /about manziliga o'tish sahifani `MarketingLayout` bilan render qiladi, /dashboard manziliga o'tish esa uni `AppLayout` bilan render qiladi. URL toza va semantik bo'lib qoladi, loyihamizning fayl tuzilmasi esa mukammal tashkil etilgan va kengaytiriladigan bo'ladi.

Parallel Marshrutlar yordamida Dinamik UI'larni Ochish

Marshrutlar Guruhlari ilovaning alohida bo'limlarini tashkil etishga yordam bergan holda, Parallel Marshrutlar boshqa muammoni hal qiladi: bitta maket ichida bir nechta, mustaqil sahifa ko'rinishlarini ko'rsatish. Bu murakkab boshqaruv panellari, ijtimoiy media lentalari yoki turli panellarni bir vaqtning o'zida render qilish va boshqarish kerak bo'lgan har qanday UI uchun umumiy talabdir.

Parallel Marshrutlar Nima?

Parallel Marshrutlar bir xil maket ichida bir yoki bir nechta sahifani bir vaqtning o'zida render qilish imkonini beradi. Ushbu marshrutlar slotlar deb ataladigan maxsus papka konvensiyasi yordamida aniqlanadi. Slotlar @folderName sintaksisi yordamida yaratiladi. Ular URL tuzilmasining bir qismi emas; aksincha, ular avtomatik ravishda eng yaqin umumiy ota `layout.js` fayliga prop sifatida uzatiladi.

Masalan, agar sizda jamoa faoliyati lentasi va tahliliy grafikni yonma-yon ko'rsatishi kerak bo'lgan maket mavjud bo'lsa, siz ikkita slotni aniqlashingiz mumkin: `@team` va `@analytics`.

Asosiy G'oya: Slotlar

Slotlarni maketingizdagi nomlangan o'rin egallovchilar deb o'ylang. Maket fayli ushbu slotlarni prop sifatida aniq qabul qiladi va ularni qayerda render qilishni hal qiladi.

Ushbu maket komponentini ko'rib chiqing:

// A layout that accepts two slots: 'team' and 'analytics'
export default function DashboardLayout({ children, team, analytics }) {
  return (
    <div>
      {children}
      <div style={{ display: 'flex' }}>
        {team}
        {analytics}
      </div>
    </div>
  );
}

Bu yerda `children`, `team` va `analytics` larning barchasi slotlardir. `children` bu katalogdagi standart `page.js` ga mos keladigan yashirin slotdir. `team` va `analytics` esa fayl tizimida `@` prefiksi bilan yaratilishi kerak bo'lgan aniq slotlardir.

Asosiy Xususiyatlari va Afzalliklari

Haqiqiy Dunyo Stsenariysi: Murakkab Boshqaruv Panelini Yaratish

Keling, `/dashboard` URL manzilida boshqaruv panelini loyihalashtiraylik. Unda asosiy kontent maydoni, jamoa faoliyati paneli va samaradorlik tahlili paneli bo'ladi.

Fayl Tuzilmasi:

app/
└── dashboard/
    ├── @analytics/
    │   ├── page.js          // UI for the analytics slot
    │   └── loading.js     // Loading UI specifically for analytics
    ├── @team/
    │   └── page.js          // UI for the team slot
    ├── layout.js            // The layout that orchestrates the slots
    └── page.js              // The implicit 'children' slot (main content)

1. Boshqaruv Paneli Maketi (app/dashboard/layout.js)

Ushbu maket uchta slotni qabul qiladi va tartibga soladi.

// app/dashboard/layout.js
export default function DashboardLayout({ children, analytics, team }) {
  const isLoggedIn = true; // Replace with real auth logic

  return isLoggedIn ? (
    <div>
      <h1>Main Dashboard</h1>
      {children}
      <div style={{ marginTop: '20px', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '20px' }}>
        <div style={{ border: '1px solid blue', padding: '10px' }}>
          <h2>Team Activity</h2>
          {team}
        </div>
        <div style={{ border: '1px solid green', padding: '10px' }}>
          <h2>Performance Analytics</h2>
          {analytics}
        </div>
      </div>
    </div>
  ) : (
    <div>Please log in to view the dashboard.</div>
  );
}

2. Slot Sahifalari (masalan, app/dashboard/@analytics/page.js)

Har bir slotning `page.js` fayli o'sha maxsus panel uchun UI'ni o'z ichiga oladi.

// app/dashboard/@analytics/page.js
async function getAnalyticsData() {
  // Simulate a network request
  await new Promise(resolve => setTimeout(resolve, 3000));
  return { views: '1.2M', revenue: '$50,000' };
}

export default async function AnalyticsPage() {
  const data = await getAnalyticsData();
  return (
    <div>
      <p>Page Views: {data.views}</p>
      <p>Revenue: {data.revenue}</p>
    </div>
  );
}

// app/dashboard/@analytics/loading.js
export default function Loading() {
  return <p>Loading analytics data...</p>;
}

Ushbu sozlama bilan foydalanuvchi `/dashboard` manziliga o'tganda, Next.js `DashboardLayout` ni render qiladi. Maket `dashboard/page.js`, `dashboard/@team/page.js` va `dashboard/@analytics/page.js` dan render qilingan tarkibni prop sifatida qabul qiladi va ularni mos ravishda joylashtiradi. Eng muhimi, tahlil paneli boshqaruv panelining qolgan qismini render qilishni bloklamasdan, 3 soniya davomida o'zining `loading.js` holatini ko'rsatadi.

Mos kelmagan Marshrutlarni `default.js` bilan Boshqarish

Muhim savol tug'iladi: Agar Next.js joriy URL uchun slotning faol holatini ololmasa nima bo'ladi? Masalan, dastlabki yuklanish yoki sahifani qayta yuklash paytida URL `/dashboard` bo'lishi mumkin, bu esa `@team` yoki `@analytics` slotlari ichida nima ko'rsatish kerakligi haqida aniq ko'rsatmalar bermaydi. Standart bo'yicha, Next.js 404 xatosini render qiladi.

Buning oldini olish uchun biz parallel marshrut ichida `default.js` faylini yaratish orqali zaxira UI taqdim etishimiz mumkin.

Misol:

// app/dashboard/@analytics/default.js
export default function DefaultAnalyticsPage() {
  return (
    <div>
      <p>No analytics data selected.</p>
    </div>
  );
}

Endi, agar tahlil sloti mos kelmasa, Next.js 404 sahifasi o'rniga `default.js` tarkibini render qiladi. Bu, ayniqsa, murakkab parallel marshrut sozlamasining dastlabki yuklanishida silliq foydalanuvchi tajribasini yaratish uchun juda muhimdir.

Ilg'or Arxitekturalar uchun Marshrutlar Guruhlari va Parallel Marshrutlarni Birlashtirish

App Router'ning haqiqiy kuchi uning xususiyatlarini birlashtirganingizda namoyon bo'ladi. Marshrutlar Guruhlari va Parallel Marshrutlar murakkab va yuqori darajada tashkil etilgan ilova arxitekturalarini yaratish uchun birgalikda ajoyib ishlaydi.

Qo'llanilish Holati: Ko'p Modalli Kontent Ko'ruvchi

Media galereyasi yoki hujjat ko'ruvchi kabi platformani tasavvur qiling, unda foydalanuvchi biror elementni ko'rishi, shuningdek, fon sahifasining kontekstini yo'qotmasdan uning tafsilotlarini ko'rish uchun modal oyna ochishi mumkin. Bu ko'pincha "Yo'lni Tutib Qolish" (Intercepting Route) deb ataladi va parallel marshrutlarga asoslangan kuchli naqshdir.

Keling, foto galereya yarataylik. Siz rasmni bosganingizda, u modal oynada ochiladi. Ammo agar siz sahifani yangilasangiz yoki rasmning URL manziliga to'g'ridan-to'g'ri o'tsangiz, u rasm uchun maxsus sahifani ko'rsatishi kerak.

Fayl Tuzilmasi:

app/
├── @modal/(..)(..)photos/[id]/page.js  // The intercepted route for the modal
├── photos/
│   └── [id]/
│       └── page.js                  // The dedicated photo page
├── layout.js                        // Root layout that receives the @modal slot
└── page.js                          // The main gallery page

Tushuntirish:

Ushbu naqsh parallel marshrutlarni (`@modal` sloti) ilg'or marshrutlash konvensiyalari bilan birlashtirib, qo'lda amalga oshirish juda murakkab bo'lgan uzluksiz foydalanuvchi tajribasini yaratadi.

Eng Yaxshi Amaliyotlar va Umumiy Xatolar

Marshrutlar Guruhlari uchun Eng Yaxshi Amaliyotlar

Parallel Marshrutlar uchun Eng Yaxshi Amaliyotlar

Qochish Kerak Bo'lgan Umumiy Xatolar

Xulosa: Veb-ilovalarning Kelajagini Qurish

Next.js App Router, Marshrutlar Guruhlari va Parallel Marshrutlar kabi xususiyatlari bilan zamonaviy veb-dasturlash uchun mustahkam va kengaytiriladigan poydevor yaratadi. Marshrutlar Guruhlari URL semantikasiga putur yetkazmasdan kodni tashkil etish va alohida maketlarni qo'llash uchun elegant yechim taklif qiladi. Parallel Marshrutlar esa mustaqil holatlarga ega dinamik, ko'p panelli interfeyslarni yaratish imkoniyatini ochib beradi, bu ilgari faqat murakkab mijoz tomonidagi holatni boshqarish orqali erishilishi mumkin edi.

Ushbu kuchli arxitektura naqshlarini tushunish va birlashtirish orqali siz oddiy veb-saytlardan tashqariga chiqib, bugungi foydalanuvchilarning talablariga javob beradigan murakkab, samarali va qo'llab-quvvatlanadigan ilovalarni yaratishni boshlashingiz mumkin. O'rganish egri chizig'i klassik Pages Router'ga qaraganda tikroq bo'lishi mumkin, ammo ilova arxitekturasi va foydalanuvchi tajribasi nuqtai nazaridan olinadigan foyda juda katta. Keyingi loyihangizda ushbu tushunchalar bilan tajriba o'tkazishni boshlang va Next.js'ning to'liq salohiyatini oching.