Next.js App Directory: Faylga asoslangan marshrutlash inqilobi

Next.js doimiy ravishda veb-dasturlash chegaralarini kengaytirib, dasturchilarga unumdor, kengaytiriladigan va foydalanuvchiga qulay ilovalarni yaratish uchun kuchli vositalar va xususiyatlarni taklif etib keladi. App Directory'ning joriy etilishi, ayniqsa faylga asoslangan marshrutlashga innovatsion yondashuvi bilan oldinga qo'yilgan muhim qadamdir. Ushbu maqola App Directory'ning marshrutlash mexanizmini chuqur o'rganadi, uning afzalliklari, asosiy tushunchalari va Next.js bilan zamonaviy veb-ilovalarni yaratish uchun amaliy oqibatlarini ko'rib chiqadi.

Next.js'da marshrutlash evolyutsiyasini tushunish

App Directory'dan oldin Next.js marshrutlash uchun Pages Directory'ga tayangan. Bu yondashuv samarali bo'lsa-da, uning ba'zi cheklovlari bor edi. Pages Directory oddiy faylga asoslangan marshrutlash tizimidan foydalangan, bunda `pages` katalogidagi har bir fayl bitta marshrutga mos kelgan. Masalan, `pages/about.js` `/about` marshrutiga xaritalangan.

To'g'ridan-to'g'ri bo'lishiga qaramay, Pages Directory murakkab layoutlar, ma'lumotlarni olish strategiyalari va server tomonida render qilish naqshlari uchun o'rnatilgan qo'llab-quvvatlashga ega emas edi, bu esa ko'pincha dasturchilardan ushbu xususiyatlarni qo'lda amalga oshirishni talab qilar edi. Bundan tashqari, ma'lumotlarni olish va komponentlarni render qilishning o'zaro yaqin bog'liqligi ba'zida unumdorlikda muammolarga olib kelishi mumkin edi.

App Directory bu cheklovlarni React Server Komponentlari, Layoutlar va boshqa ilg'or xususiyatlar asosida qurilgan yanada moslashuvchan va kuchli marshrutlash tizimini joriy etish orqali hal qiladi. U oddiy fayldan marshrutga xaritalashdan tashqariga chiqib, ilova marshrutlari va layoutlarini belgilash uchun yanada deklarativ va kompozitsion yondashuvni taklif etadi.

App Directory bilan tanishuv: Marshrutlash uchun yangi paradigma

Sizning Next.js loyihangizning ildizida `app` jildida joylashgan App Directory marshrutlashga tubdan farqli yondashuvni taqdim etadi. Fayllarni to'g'ridan-to'g'ri marshrutlarga xaritalash o'rniga, App Directory konvensiyaga asoslangan tizimdan foydalanadi, bunda kataloglar strukturasi va maxsus fayllar ilovaning marshrutlarini belgilaydi.

Bu yondashuv bir nechta asosiy afzalliklarni taqdim etadi:

Yaxshilangan tashkiliylik: App Directory'ning ierarxik tuzilmasi yaxshiroq tashkiliylik va kodni saqlash qulayligini ta'minlaydi. Siz bog'liq komponentlar va marshrutlarni quyi kataloglar ichida mantiqiy guruhlashingiz mumkin.
Yaxshilangan unumdorlik: React Server Komponentlari va ilg'or ma'lumotlarni olish imkoniyatlaridan foydalangan holda, App Directory dasturchilarga unumdorlikni optimallashtirish va klient tomonidagi JavaScript'ni kamaytirish imkonini beradi.
Deklarativ marshrutlash: App Directory'ning faylga asoslangan yondashuvi dasturchilarga marshrutlar va layoutlarni deklarativ tarzda belgilash imkonini beradi, bu esa ilovaning tuzilishini yanada shaffof va tushunarli qiladi.
O'rnatilgan Layoutlar va Shablonlar: App Directory bir nechta sahifalar bo'ylab umumiy bo'lgan layoutlar va shablonlarni aniqlash uchun o'rnatilgan qo'llab-quvvatlashni ta'minlaydi, bu esa kod takrorlanishini kamaytiradi va barqarorlikni yaxshilaydi.

App Directory'ning marshrutlash tizimidagi asosiy tushunchalar

App Directory'ning marshrutlash tizimidan samarali foydalanish uchun uning funksionalligini asoslaydigan asosiy tushunchalarni tushunish muhim:

1. Marshrut segmentlari va jildlar

`app` katalogi ichidagi har bir jild marshrut segmentini ifodalaydi. Jildning nomi URL'dagi yo'l segmentiga mos keladi. Masalan, `app/blog/posts` jild strukturasi `/blog/posts` marshrutiga xaritalanadi.

Ushbu strukturani ko'rib chiqing:

app/
  blog/
    posts/
      page.js

Ushbu struktura `/blog/posts` manzilida marshrutni belgilaydi. `posts` jildi ichidagi `page.js` fayli marshrut segmenti komponenti bo'lib, ushbu marshrut uchun tarkibni render qiladi.

2. `page.js` fayli: Marshrut tarkibini render qilish

page.js (yoki TypeScript uchun page.tsx) fayli ma'lum bir marshrut segmenti uchun render qilinadigan tarkibni belgilaydigan maxsus fayldir. Bu o'sha marshrut uchun kirish nuqtasi hisoblanadi. Ushbu fayl standart eksport sifatida React komponentini eksport qilishi kerak.

Misol:

// app/blog/posts/page.js

export default function PostsPage() {
  return (
    <div>
      <h1>Blog Postlari</h1>
      <p>Blog postlari ro'yxati shu yerda ko'rsatiladi.</p>
    </div>
  );
}

3. Layoutlar: Umumiy UI'ni aniqlash

Layoutlar sizga bir nechta sahifalar yoki marshrut segmentlari bo'ylab umumiy bo'lgan UI'ni aniqlash imkonini beradi. Layout sarlavhalar, altbilgilar, yon panellar yoki ilovangizning bir qismida izchil bo'lishi kerak bo'lgan boshqa komponentlarni o'z ichiga olishi mumkin. Layoutlar `layout.js` (yoki `layout.tsx`) fayli yordamida aniqlanadi.

Layoutlar ichma-ich joylashadi. Bu shuni anglatadiki, ildiz layout (`app/layout.js`) butun ilovani o'rab oladi va ichki layoutlar ma'lum marshrut segmentlarini o'rab oladi. Umumiy layoutga ega marshrutlar o'rtasida navigatsiya qilganda, Next.js layout holatini saqlab qoladi va uni qayta render qilishdan saqlaydi, bu esa unumdorlikni oshiradi va foydalanuvchi tajribasini silliqroq qiladi.

Misol:

// app/layout.js

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <header>
          <nav>
            <a href="/">Bosh sahifa</a> |
            <a href="/blog">Blog</a>
          </nav>
        </header>
        <main>{children}</main>
        <footer>
          <p>Mualliflik huquqi 2023</p>
        </footer>
      </body>
    </html>
  );
}

Ushbu misolda `RootLayout` butun ilova uchun asosiy HTML tuzilmasi, sarlavha, altbilgi va navigatsiyani belgilaydi. `app` katalogi ichida render qilingan har qanday sahifa ushbu layout bilan o'raladi.

4. Shablonlar: Marshrutlar o'rtasida holatni saqlash

Layoutlarga o'xshab, shablonlar ham bolalar marshrutlarini o'rab oladi. Biroq, layoutlardan farqli o'laroq, shablonlar har bir bola marshruti uchun yangi komponent nusxasini yaratadi. Bu shuni anglatadiki, shablon ichidagi marshrutlar o'rtasida navigatsiya qilganda shablonning holati saqlanib qolmaydi. Shablonlar marshrut o'tishlarida holatni qayta o'rnatish yoki qayta ishga tushirish kerak bo'lgan holatlar uchun foydalidir. Shablonlarni yaratish uchun template.js (yoki template.tsx) dan foydalaning.

5. Marshrut guruhlari: URL segmentlarisiz marshrutlarni tashkil etish

Marshrut guruhlari sizga App Directory ichidagi marshrutlaringizni URL tuzilmasiga ta'sir qilmasdan tashkil etish imkonini beradi. Marshrut guruhlari jild nomlarini qavslarga o'rash orqali aniqlanadi, masalan, `(guruh-nomi)`. Bu qavslar Next.js'ga jildni marshrut segmenti emas, balki mantiqiy guruhlash mexanizmi sifatida ko'rib chiqishni aytadi.

Bu, ayniqsa, ko'p marshrutlarga ega katta ilovalarni tashkil qilish uchun foydalidir. Masalan, siz ilovangizning turli bo'limlarini ajratish uchun marshrut guruhlaridan foydalanishingiz mumkin, masalan `(marketing)` va `(app)`. Bu guruhlar faqat fayl tuzilmasiga ta'sir qiladi, URL yo'llariga emas.

Misol:

app/
  (marketing)/
    home/
      page.js  // /home manzilida kirish mumkin
    about/
      page.js  // /about manzilida kirish mumkin
  (app)/
    dashboard/
      page.js  // /dashboard manzilida kirish mumkin

6. Dinamik marshrutlar: O'zgaruvchan segmentlarni boshqarish

Dinamik marshrutlar sizga o'zgaruvchan segmentlarga ega marshrutlar yaratish imkonini beradi. Bu blog postlari, mahsulot sahifalari yoki foydalanuvchi profillari kabi ma'lumotlarga asoslangan marshrutlarni yaratish kerak bo'lgan holatlar uchun foydalidir. Dinamik marshrut segmentlari segment nomini kvadrat qavslarga olish orqali aniqlanadi, masalan, `[id]`. `id` `page.js` komponenti ichida kirish mumkin bo'lgan parametrni ifodalaydi.

Misol:

app/
  blog/
    [slug]/
      page.js

Ushbu misolda `[slug]` dinamik marshrut segmentidir. `/blog/my-first-post` kabi URL ushbu marshrutga mos keladi va `slug` parametri `my-first-post` ga o'rnatiladi. Siz `page.js` komponenti ichida `params` prop orqali `slug` parametriga kirishingiz mumkin.

// app/blog/[slug]/page.js

export default function BlogPost({ params }) {
  const { slug } = params;
  return (
    <div>
      <h1>Blog Posti: {slug}</h1>
      <p>Slug'i {slug} bo'lgan blog postining tarkibi</p>
    </div>
  );
}

Siz ushbu dinamik marshrutlar uchun mumkin bo'lgan qiymatlarni yaratishingiz kerak. Next.js statik sayt generatsiyasi (SSG) va server tomonida renderlash (SSR) uchun `generateStaticParams` funksiyasini taqdim etadi. Ushbu funksiya sizga qurish vaqtida qaysi dinamik marshrutlarni oldindan render qilish kerakligini belgilash imkonini beradi.

// app/blog/[slug]/page.js

export async function generateStaticParams() {
  const posts = [
    { slug: 'my-first-post' },
    { slug: 'my-second-post' },
  ];

  return posts.map((post) => ({ slug: post.slug }));
}

export default function BlogPost({ params }) {
  const { slug } = params;
  return (
    <div>
      <h1>Blog Posti: {slug}</h1>
      <p>Slug'i {slug} bo'lgan blog postining tarkibi</p>
    </div>
  );
}

7. Catch-All segmentlari: Noma'lum marshrutlarni boshqarish

Catch-all segmentlari bu URL'dagi istalgan miqdordagi segmentlarga mos kelish imkonini beradigan dinamik marshrut turidir. Ular segment nomidan oldin uchta nuqta qo'yish orqali aniqlanadi, masalan, `[...path]`. Catch-all segmentlari turli xil URL tuzilmalarini boshqara oladigan moslashuvchan marshrutlarni yaratish uchun foydalidir.

Misol:

app/
  docs/
    [...path]/
      page.js

Ushbu misolda `[...path]` catch-all segmentidir. `/docs/introduction`, `/docs/api/reference` va `/docs/examples/basic` kabi URL'larning barchasi ushbu marshrutga mos keladi. `path` parametri mos kelgan segmentlarni o'z ichiga olgan massiv bo'ladi.

// app/docs/[...path]/page.js

export default function DocsPage({ params }) {
  const { path } = params;
  return (
    <div>
      <h1>Hujjatlar</h1>
      <p>Yo'l: {path.join('/')}</p>
    </div>
  );
}

8. Parallel marshrutlar: Bir vaqtning o'zida bir nechta sahifani render qilish

Parallel marshrutlar bir xil layout ichida bir vaqtning o'zida bir nechta sahifani render qilish imkonini beradi. Bu, ayniqsa, bir nechta panelli boshqaruv panellari yoki joriy sahifaning ustida paydo bo'ladigan modal dialoglar kabi murakkab UI naqshlarini yaratish uchun foydalidir. Parallel marshrutlar @ belgisi yordamida aniqlanadi, masalan, `@children`, `@modal`. Ular to'g'ridan-to'g'ri URL'da belgilanishi yoki `useRouter` hook'i yordamida navigatsiya qilinishi mumkin.

Misol:

app/
  @children/
    page.js // Asosiy tarkibni render qiladi
  @modal/
    login/
      page.js // Kirish modalini render qiladi

Parallel marshrutlarni ko'rsatish uchun `` komponentidan foydalaning.

9. Marshrutlarni to'xtatib qolish: Murakkab UI o'tishlarini yaratish

Marshrutlarni to'xtatib qolish sizga ilovangizning boshqa qismidan marshrutni joriy marshrut kontekstida yuklash imkonini beradi. Bu joriy sahifadan chiqib ketmasdan, havolani bosganda modal dialog oynasini ko'rsatish kabi murakkab UI o'tishlarini yaratish uchun ishlatilishi mumkin. Ular (...) sintaksisi yordamida aniqlanadi.

App Directory'da ma'lumotlarni olish

App Directory ma'lumotlarni olishning yangi va takomillashtirilgan usullarini taqdim etadi, React Server Komponentlari va o'rnatilgan keshlashtirish va qayta tasdiqlash imkoniyatlariga ega `fetch` API'dan foydalanadi. Bu yaxshi unumdorlikka va soddalashtirilgan dasturlash tajribasiga olib keladi. Ham Server, ham Klient komponentlari ma'lumotlarni olishi mumkin, ammo strategiya farqlanadi.

1. Server Komponentlarida ma'lumotlarni olish

App Directory'da standart bo'lgan Server Komponentlari ma'lumotlar bazalari yoki API'lardan to'g'ridan-to'g'ri ma'lumotlarni olishi mumkin. Bu render qilishdan oldin komponent funksiyasi ichida amalga oshiriladi. Server Komponentlari serverda bajarilganligi sababli, siz maxfiy kalitlar va hisob ma'lumotlarini klientga oshkor qilmasdan xavfsiz tarzda qo'shishingiz mumkin. `fetch` API avtomatik ravishda memoizatsiya qilinadi, ya'ni bir xil ma'lumot so'rovlari takrorlanmaydi, bu esa unumdorlikni yanada oshiradi.

// app/page.js

async function getData() {
  const res = await fetch('https://jsonplaceholder.typicode.com/todos/1');
  // Qaytarilgan qiymat seriyalanmagan
  // Siz Date, Map, Set va hokazolarni qaytarishingiz mumkin.

  if (!res.ok) {
    // Bu eng yaqin `error.js` Xatolik Chegarasini faollashtiradi
    throw new Error('Ma\'lumotlarni olishda xatolik yuz berdi');
  }

  return res.json();
}

export default async function Page() {
  const data = await getData();

  return <div>{data.title}</div>;
}

2. Klient Komponentlarida ma'lumotlarni olish

Faylning yuqorisidagi 'use client' direktivasi bilan ko'rsatilgan Klient Komponentlari foydalanuvchining brauzerida ishlaydi. Klient Komponentlarida ma'lumotlarni olish odatda `useEffect` hook'i va `axios` yoki `fetch` API kabi kutubxonadan foydalanishni o'z ichiga oladi. Server Actions klient komponentlaridan server ma'lumotlarini xavfsiz o'zgartirish usulini taqdim etadi. Bu klient komponentlarining API endpointlarini to'g'ridan-to'g'ri oshkor qilmasdan serverdagi ma'lumotlar bilan o'zaro ishlashining xavfsiz usulini taklif etadi.

// app/components/ClientComponent.js
'use client';

import { useState, useEffect } from 'react';

export default function ClientComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    async function fetchData() {
      const res = await fetch('https://jsonplaceholder.typicode.com/todos/1');
      const data = await res.json();
      setData(data);
    }

    fetchData();
  }, []);

  if (!data) {
    return <div>Yuklanmoqda...</div>;
  }

  return <div>{data.title}</div>;
}

App Directory bilan SEO masalalari

App Directory'ning serverga asoslangan yondashuvi SEO uchun sezilarli afzalliklarni taqdim etadi. Tarkib serverda render qilinganligi sababli, qidiruv tizimi o'rgimchaklari sahifa tarkibiga osongina kirishi va uni indekslashi mumkin. Mana bir nechta asosiy SEO masalalari:

Metadata: Sarlavha, tavsif va kalit so'zlar kabi metama'lumotlarni aniqlash uchun layoutlaringiz va sahifalaringiz ichida <head> tegidan foydalaning. Next.js `Metadata` API orqali metama'lumotlarni boshqarish uchun o'rnatilgan qo'llab-quvvatlashni taqdim etadi.
Semantik HTML: Tarkibingizni mantiqiy tuzish va qidiruv tizimlari uchun kontekst taqdim etish uchun semantik HTML elementlaridan (masalan, <article>, <nav>, <aside>) foydalaning.
Kirish imkoniyati: Ilovangiz nogironligi bo'lgan foydalanuvchilar uchun kirish imkoniyatiga ega ekanligiga ishonch hosil qiling. Bu rasmlar uchun muqobil matn taqdim etish, to'g'ri sarlavha ierarxiyasidan foydalanish va yetarli rang kontrastini ta'minlashni o'z ichiga oladi.
Unumdorlik: Foydalanuvchi tajribasini va qidiruv tizimi reytingini yaxshilash uchun ilovangizning unumdorligini optimallashtiring. Bu klient tomonidagi JavaScript'ni minimallashtirish, rasmlarni optimallashtirish va keshlashtirishdan foydalanishni o'z ichiga oladi.

App Directory'ning marshrutlash tizimidan foydalanishning afzalliklari

Dasturlash jarayonini yaxshilaydigan, ilova unumdorligini oshiradigan va yaxshi foydalanuvchi tajribasiga hissa qo'shadigan App Directory'ning marshrutlash tizimi ko'plab afzalliklarni taqdim etadi. Keling, ushbu afzalliklarni batafsil ko'rib chiqamiz: * **Yaxshilangan tashkiliylik va qo'llab-quvvatlanuvchanlik:** Faylga asoslangan marshrutlash tizimi o'z-o'zidan tuzilgan va tartibli kod bazasini rag'batlantiradi. Marshrutlarni to'g'ridan-to'g'ri katalog tuzilmasiga xaritalash orqali dasturchilar URL'lar va tegishli komponentlar o'rtasidagi munosabatni osongina tushunishlari mumkin. Ushbu aniq tuzilma kod bazasi ichida navigatsiyani soddalashtiradi va vaqt o'tishi bilan ilovani qo'llab-quvvatlash va yangilashni osonlashtiradi. * **Server Komponentlari orqali yaxshilangan unumdorlik:** App Directory tarkibni serverda render qilish uchun React Server Komponentlaridan foydalanadi, bu brauzerda yuklanishi va bajarilishi kerak bo'lgan JavaScript miqdorini kamaytiradi. Bu, ayniqsa, sekin internet aloqasi yoki kamroq quvvatli qurilmalarga ega bo'lgan foydalanuvchilar uchun tezroq dastlabki sahifa yuklanish vaqtlariga va umumiy unumdorlikning yaxshilanishiga olib keladi. * **Soddalashtirilgan ma'lumotlarni olish va boshqarish:** App Directory ma'lumotlarni to'g'ridan-to'g'ri Server Komponentlari ichida olish imkonini berib, ma'lumotlarni olishni soddalashtiradi. Bu murakkab klient tomonidagi ma'lumotlarni olish mantig'iga bo'lgan ehtiyojni yo'qotadi va maxfiy ma'lumotlarni klientga oshkor qilish xavfini kamaytiradi. * **Deklarativ va intuitiv marshrutlash:** Faylga asoslangan marshrutlash tizimi ilova marshrutlarini aniqlashning deklarativ va intuitiv usulini taqdim etadi. `app` katalogi ichida shunchaki fayllar va kataloglar yaratish orqali dasturchilar o'z ilovalarining navigatsiya tuzilmasi va xatti-harakatlarini osongina aniqlashlari mumkin. Ushbu yondashuv murakkab konfiguratsiya fayllariga bo'lgan ehtiyojni kamaytiradi va marshrutlash tizimini tushunish va ishlatishni osonlashtiradi. * **Izchil UI uchun o'rnatilgan Layoutlar va Shablonlar:** App Directory layoutlar va shablonlar uchun o'rnatilgan qo'llab-quvvatlashni taqdim etadi, bu dasturchilarga bir nechta sahifalar bo'ylab izchil bo'lgan umumiy UI elementlarini aniqlash imkonini beradi. Bu kod takrorlanishini kamaytiradi va butun ilova bo'ylab izchil ko'rinish va hisni saqlashni osonlashtiradi. * **Murakkab holatlar uchun ilg'or marshrutlash xususiyatlari:** App Directory dinamik marshrutlar, catch-all segmentlari, parallel marshrutlar va marshrutlarni to'xtatib qolish kabi bir qator ilg'or marshrutlash xususiyatlarini taklif etadi. Ushbu xususiyatlar dasturchilarga murakkab marshrutlash stsenariylarini boshqarish va an'anaviy marshrutlash tizimlari bilan erishish qiyin yoki imkonsiz bo'lgan murakkab UI naqshlarini yaratish imkonini beradi. ## App Directory marshrutlashining amaliy misollari App Directory'ning marshrutlash tizimining kuchi va moslashuvchanligini ko'rsatish uchun bir nechta amaliy misollarni ko'rib chiqamiz: ### 1. Dinamik marshrutlar bilan oddiy blog yaratish Har bir blog posti o'zining slug'iga asoslangan o'ziga xos URL'ga ega bo'lgan blog ilovasini ko'rib chiqing. App Directory yordamida buni dinamik marshrutlar yordamida osongina amalga oshirish mumkin: ``` app/ blog/ [slug]/ page.js ``` `[slug]` katalogi dinamik marshrut segmentini ifodalaydi, bu `/blog/` yo'li ostidagi har qanday URL'ga mos keladi. `[slug]` katalogi ichidagi `page.js` fayli tegishli blog posti uchun tarkibni render qiladi. ```javascript // app/blog/[slug]/page.js export async function generateStaticParams() { // Barcha blog postlarini ma'lumotlar bazasidan yoki API'dan oling const posts = await fetchPosts(); // Postlarni slug parametrlari massiviga xaritalang return posts.map((post) => ({ slug: post.slug })); } export default async function BlogPost({ params }) { const { slug } = params; // Mos keladigan slug'ga ega blog postini oling const post = await fetchPost(slug); if (!post) { return <div>Post topilmadi</div>; } return ( <article> <h1>{post.title}</h1> <p>{post.content}</p> </article> ); } ``` Bu misol har bir blog posti uchun alohida sahifalar yaratish uchun dinamik marshrutlardan qanday qilib oddiy va samarali tarzda foydalanishni ko'rsatadi. ### 2. Marshrutlarni to'xtatib qolish bilan modal dialog oynasini amalga oshirish Aytaylik, siz foydalanuvchi havolani bosganda joriy sahifadan chiqib ketmasdan paydo bo'ladigan modal dialog oynasini amalga oshirmoqchisiz. Bunga marshrutlarni to'xtatib qolish orqali erishish mumkin: ``` app/ (.)photos/ [id]/ @modal/ page.js page.js ``` Bu yerda `(.)photos/[id]/@modal/page.js` joriy sahifadan `photos/[id]` ga boradigan so'rovlarni to'xtatib qoladi. Foydalanuvchi ma'lum bir fotosurat havolasini bosganda, yangi sahifaga o'tish o'rniga, joriy sahifa ustida modal dialog oynasi paydo bo'ladi. ### 3. Parallel marshrutlar bilan boshqaruv paneli layoutini yaratish Tasavvur qiling, siz bir vaqtning o'zida render qilinishi kerak bo'lgan bir nechta panelli boshqaruv paneli ilovasini yaratmoqdasiz. Ushbu layoutga erishish uchun parallel marshrutlardan foydalanish mumkin: ``` app/ @analytics/ page.js // Analitika Boshqaruv paneli @settings/ page.js // Sozlamalar Paneli page.js // Asosiy Boshqaruv paneli Layouti ```

Ushbu strukturada `@analytics` va `@settings` asosiy boshqaruv paneli layouti ichida render qilinadigan parallel marshrutlarni ifodalaydi. Har bir parallel marshrutning o'z `page.js` fayli bor, u o'sha panel uchun tarkibni belgilaydi. Layout bu komponentlarni <Slot> komponenti yordamida qaerga joylashtirishni hal qilishi mumkin.

Pages Directory'dan App Directory'ga migratsiya qilish

Mavjud Next.js ilovasini Pages Directory'dan App Directory'ga migratsiya qilish ehtiyotkorlik bilan rejalashtirish va amalga oshirishni talab etadi. App Directory sezilarli afzalliklarni taklif qilsa-da, u shuningdek, dasturchilar tushunishi kerak bo'lgan yangi tushunchalar va naqshlarni joriy etadi. Migratsiya jarayonida sizga yordam berish uchun bosqichma-bosqich qo'llanma:

Asosiy farqlarni tushuning: Migratsiyani boshlashdan oldin, Pages Directory va App Directory o'rtasidagi asosiy farqlarni, jumladan, marshrutlash tizimi, ma'lumotlarni olish va komponent arxitekturasini to'liq tushunganingizga ishonch hosil qiling.
`app` katalogini yarating: Next.js loyihangizning ildizida `app` nomli yangi katalog yarating. Ushbu katalog App Directory'ning bir qismi bo'lgan barcha komponentlar va marshrutlarni o'z ichiga oladi.
Marshrutlarni bosqichma-bosqich migratsiya qiling: Marshrutlarni birma-bir, bosqichma-bosqich migratsiya qilishdan boshlang. Bu sizga har bir marshrutni alohida sinab ko'rish va disk raskadrovka qilish imkonini beradi, xatolar kiritish xavfini kamaytiradi.
Komponentlarni Server Komponentlariga o'tkazing: Mavjud React komponentlaringizni iloji boricha Server Komponentlariga o'tkazing. Bu unumdorlikni oshiradi va brauzerda yuklanishi va bajarilishi kerak bo'lgan JavaScript miqdorini kamaytiradi.
Ma'lumotlarni olish mantig'ini yangilang: App Directory'ning o'rnatilgan ma'lumotlarni olish imkoniyatlaridan foydalanish uchun ma'lumotlarni olish mantig'ini yangilang. Bu ma'lumotlarni olish kodini Klient Komponentlaridan Server Komponentlariga ko'chirishni o'z ichiga olishi mumkin.
Layoutlar va Shablonlarni amalga oshiring: Bir nechta sahifalar bo'ylab izchil bo'lgan umumiy UI elementlarini aniqlash uchun layoutlar va shablonlarni amalga oshiring.
Puxta sinovdan o'tkazing: Har bir migratsiya qilingan marshrutni to'g'ri ishlashini va hech qanday regressiyalar yo'qligini ta'minlash uchun puxta sinovdan o'tkazing.
`pages` katalogini o'chiring: Barcha marshrutlar migratsiya qilinganidan so'ng, `/pages` katalogini o'chirishingiz mumkin.

Xulosa

Next.js App Directory faylga asoslangan marshrutlashda muhim evolyutsiyani ifodalaydi, dasturchilarga zamonaviy veb-ilovalarni yaratishning yanada tartibli, unumdor va moslashuvchan usulini taklif etadi. Asosiy tushunchalarni tushunib va yangi xususiyatlarni qabul qilib, dasturchilar App Directory'dan ajoyib foydalanuvchi tajribalarini yaratish va yuqori mahsuldorlikka erishish uchun foydalanishlari mumkin. Next.js dasturlashining kelajagi App Directory'da yotadi va uni qabul qilish zamonaviy veb-ilovalarni yaratish uchun strategik harakatdir. Bu butun dunyo bo'ylab dasturchilar uchun kuchli vositadir.

Next.js ekotizimi rivojlanishda davom etar ekan, App Directory mustahkam, kengaytiriladigan va unumdor veb-ilovalarni yaratish uchun standartga aylanishga tayyor. O'zgarishni qabul qiling, imkoniyatlarni o'rganing va Next.js'ning to'liq salohiyatini oching!