Sahifalar va fayl asosidagi routing

Papkalar URL manzillarga aylanadi

App Router'da app/ ichidagi papka tuzilishi sizning marshrutlash jadvalingizdir. Siz marshrutlarni hech qayerda ro'yxatdan o'tkazmaysiz — siz papkalar yaratasiz va page.tsx fayli bo'lgan har bir papka URL manzilga aylanadi.

app/
  page.tsx            ->  /
  about/
    page.tsx          ->  /about
  blog/
    page.tsx          ->  /blog
    contact/
      page.tsx        ->  /blog/contact

Papkaning nomi URL segmentidir. Yo'llarni ichma-ich joylashtirish uchun papkalarni ichma-ich joylashtiring. page.tsx fayli bo'lmagan papka marshrut yaratmaydi — u shunchaki konteyner (fayllarni guruhlash uchun foydali).

page.tsx marshrutdir

Faqat page.tsx (yoki page.js) deb nomlangan fayl papkani tashrif buyuriladigan sahifaga aylantiradi. U React komponentini default-export qilishi shart:

// app/about/page.tsx
export default function AboutPage() {
  return <h1>About us</h1>;
}

Siz bir xil papkada boshqa fayllarni — yordamchi komponentlar, uslublar, testlar — saqlashingiz mumkin va ular marshrutga aylanmaydi. Faqat page.tsx aylanadi.

Ichma-ich marshrutlar va umumiy layoutlar

Marshrutlar papka bo'yicha ichma-ich joylashgani uchun, saytingizning biror bo'limi bo'ylab UI'ni layout.tsx orqali ulashishingiz mumkin. Layout o'z darajasidagi va undan pastdagi har bir sahifani o'rab oladi:

// app/blog/layout.tsx
export default function BlogLayout({ children }: { children: React.ReactNode }) {
  return (
    <div>
      <nav>Blog menu</nav>
      {children}   {/* the active page renders here */}
    </div>
  );
}

Endi app/blog/ ostidagi har bir sahifa blog navigatsiyasini ko'rsatadi va siz blog sahifalari o'rtasida harakatlanganingizda u joyida qoladi.

Next.js taniydigan maxsus fayllar

Ba'zi fayl nomlari marshrut papkasi ichida o'rnatilgan ma'noga ega. Siz bularni boshqa mavzular davomida uchratasiz, lekin mana ularning xaritasi:

• page.tsx — sahifa mazmuni (marshrutni tashrif buyuriladigan qiladi).
• layout.tsx — sahifa va uning bolalarini o'rab turadigan umumiy qobiq.
• loading.tsx — sahifa yuklanayotgan paytda ko'rsatiladigan yuklanish UI'si.
• error.tsx — sahifa xatolik chiqarganda ko'rsatiladigan xatolik UI'si.
• not-found.tsx — mavjud bo'lmagan marshrut uchun yoki siz notFound() chaqirganingizda ko'rsatiladi.

Har qanday boshqa fayl shunchaki oddiy fayl — marshrut emas.

Route grouplar va URL

Ba'zan siz papkalarni URL'ga qo'shmasdan tashkil qilmoqchi bo'lasiz. Papka nomini qavslar ichiga o'rab, route group yarating:

app/
  (marketing)/
    about/page.tsx    ->  /about   (the "(marketing)" is ignored in the URL)

Bu sizga bog'liq marshrutlarni (aytaylik, barcha marketing sahifalarini bitta layout ostida) guruhlash imkonini beradi va ayni paytda toza URL manzillarni saqlaydi.

Asosiy fikrlar

• app/ ichidagi papkalar to'g'ridan-to'g'ri URL yo'llarga moslashadi; papkalarni ichma-ich joylashtirish yo'llarni ichma-ich joylashtiradi.
• Marshrut faqat papkada default-export qilingan komponentli page.tsx bo'lganda yaratiladi.
• layout.tsx UI'ni marshrut va uning ostiga joylashtirilgan hamma narsa bo'ylab ulashadi.
• Maxsus fayllar (loading, error, not-found) xatti-harakat qo'shadi; qavsli (grouplar) esa URL'ni o'zgartirmasdan fayllarni tashkil qiladi.