Route Group — (group) — URL ga ta'sir qilmasdan guruhlash

~15 daq · Next.js · Routing Chuqurroq

Muammodan boshlaylik

Siz loyihada ikkita xil layout kerak:

• Marketing sahifalar (/, /about, /pricing) — Navbar, Footer bilan
• Auth sahifalar (/login, /register) — faqat markazlashgan forma, Navbar yo'q
• Dashboard sahifalar (/dashboard, /dashboard/settings) — Sidebar bilan

Agar hammasi app/ da bo'lsa — bitta layout.tsx barchaga qo'llanadi. Har bir sahifada if (route === '/login') tekshiruvi yozish kerak bo'ladi.

Route Group bu muammoni hal qiladi — papkalarni URL ga kirmagan holda guruhlash.

Qanday ishlaydi

Papka nomini qavsga olish — u URL ga kirmaydi, faqat fayl tizimida guruh bo'ladi:

app/
├── (marketing)/
│   ├── layout.tsx       ← Navbar + Footer
│   ├── page.tsx         →  /
│   ├── about/
│   │   └── page.tsx     →  /about
│   └── pricing/
│       └── page.tsx     →  /pricing
│
├── (auth)/
│   ├── layout.tsx       ← faqat markazlashgan forma
│   ├── login/
│   │   └── page.tsx     →  /login
│   └── register/
│       └── page.tsx     →  /register
│
└── (dashboard)/
    ├── layout.tsx       ← Sidebar
    ├── dashboard/
    │   └── page.tsx     →  /dashboard
    └── dashboard/
        └── settings/
            └── page.tsx →  /dashboard/settings

(marketing), (auth), (dashboard) — URL da ko'rinmaydi. Faqat layout larni ajratish uchun.

Har bir guruh uchun layout

// app/(marketing)/layout.tsx
export default function MarketingLayout({ children }) {
  return (
    <>
      <header>
        <nav>Logo | Sahifalar | Kirish</nav>
      </header>
      <main>{children}</main>
      <footer>© 2026</footer>
    </>
  )
}

// app/(auth)/layout.tsx
export default function AuthLayout({ children }) {
  return (
    <div style={{
      minHeight: '100vh',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
    }}>
      {children}  {/* faqat forma, Navbar yo'q */}
    </div>
  )
}

// app/(dashboard)/layout.tsx
export default function DashboardLayout({ children }) {
  return (
    <div style={{ display: 'flex' }}>
      <aside>Sidebar</aside>
      <main>{children}</main>
    </div>
  )
}

Har bir guruh o'z layoutiga ega. /login ga kirganda — faqat (auth)/layout.tsx qo'llanadi, Navbar ko'rinmaydi.

Bir xil URL, turli layout

Route Group ning yana bir foydasi — bir xil URL prefixida turli layoutlar:

app/
├── (shop)/
│   ├── layout.tsx        ← do'kon layouti
│   └── products/
│       └── page.tsx      →  /products
│
└── (blog)/
    ├── layout.tsx        ← blog layouti
    └── products/         ← bir xil nom, boshqa guruh
        └── page.tsx      →  /products  ← xato! to'qnashadi

⚠️ Bir xil URL ikki guruhda bo'lsa — Next.js xato beradi. Route Group URL ni o'zgartirmaydi, shuning uchun to'qnashuv bo'ladi.

Root layout bilan birga

Root app/layout.tsx — barcha guruhlarga qo'llanadi. Guruh layoutlari uning ichida ishlaydi:

app/layout.tsx           ← hammaga (html, body, font, global CSS)
  └── (marketing)/layout.tsx  ← faqat marketing sahifalarga
  └── (auth)/layout.tsx       ← faqat auth sahifalarga
  └── (dashboard)/layout.tsx  ← faqat dashboard sahifalarga

Root layout da faqat umumiy narsalar — <html>, <body>, global font, global CSS.

Kod tashkil qilish uchun

Route Group faqat layout ajratish uchun emas — katta loyihalarda kodni tartibli saqlash uchun ham ishlatiladi:

app/
├── (auth)/
│   ├── login/page.tsx
│   └── register/page.tsx
├── (main)/
│   ├── page.tsx
│   ├── about/page.tsx
│   └── contact/page.tsx
└── (admin)/
    ├── admin/page.tsx
    └── admin/users/page.tsx

Guruhlar ichida bir xil mavzudagi sahifalar — topish oson, boshqarish oson.

Tez-tez uchraydigan xatolar

1. Route Group URL ga kiradi deb o'ylash

// app/(auth)/login/page.tsx
// ❌ — bunday URL yo'q
/auth/login

// ✅ — to'g'ri URL
/login

2. Bir xil URL ikki guruhda

// ❌ — ikkalasi ham /about ga map bo'ladi — xato
app/(marketing)/about/page.tsx
app/(info)/about/page.tsx

// ✅ — har xil URL
app/(marketing)/about/page.tsx      →  /about
app/(info)/company/about/page.tsx   →  /company/about

3. Root layout ni guruh ichiga qo'yish

// ❌ — root layout app/ da bo'lishi shart
app/(main)/layout.tsx  ← bu root layout emas

// ✅
app/layout.tsx         ← root layout
app/(main)/layout.tsx  ← guruh layouti

Xulosa

Route Group — (nom) — URL ga kirmaydi, faqat fayl tizimida guruh.

(marketing)  →  Navbar + Footer layout
(auth)       →  markazlashgan forma layout, Navbar yo'q
(dashboard)  →  Sidebar layout

URL:  /login  (auth ko'rinmaydi)
URL:  /about  (marketing ko'rinmaydi)

Bir xil URL ikki guruhda bo'lmaydi — to'qnashadi.

Keyingi dars

26-dars: Parallel Route — @slot — bir sahifada bir nechta kontent

Bir sahifada bir vaqtda ikki xil kontent ko'rsatish — masalan, modal va asosiy sahifa bir vaqtda.