Parallel Route — @slot — bir sahifada bir nechta kontent

~20 daq · Next.js · Routing Chuqurroq

Muammodan boshlaylik

Siz dashboard yozdingiz. Bir sahifada ikkita mustaqil qism bor:

• Chap panel — foydalanuvchilar ro'yxati (/dashboard/users)
• O'ng panel — statistika (/dashboard/analytics)

Har ikkalasi o'z URL iga ega, mustaqil yuklanadi, mustaqil navigatsiya qiladi. Lekin bir sahifada ko'rinadi.

Oddiy routing bilan bu qiyin — bitta page.tsx da ikki xil URL ni boshqarib bo'lmaydi. Parallel Route aynan shu uchun.

Qanday ishlaydi

@ bilan boshlanadigan papka — slot. Layout da children kabi props sifatida keladi:

app/dashboard/
├── layout.tsx
├── page.tsx
├── @users/
│   └── page.tsx      ← /dashboard da ko'rsatiladi
└── @analytics/
    └── page.tsx      ← /dashboard da ko'rsatiladi

// app/dashboard/layout.tsx
export default function DashboardLayout({
  children,
  users,
  analytics,
}: {
  children: React.ReactNode
  users: React.ReactNode      // @users/page.tsx
  analytics: React.ReactNode  // @analytics/page.tsx
}) {
  return (
    <div>
      <div>{children}</div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr' }}>
        <div>{users}</div>
        <div>{analytics}</div>
      </div>
    </div>
  )
}

@users va @analytics — URL ga kirmaydi. Faqat layout da slot sifatida ko'rinadi.

Har bir slot mustaqil

Har bir slot o'z loading.tsx, error.tsx va page.tsx ga ega bo'lishi mumkin:

app/dashboard/
├── @users/
│   ├── page.tsx
│   ├── loading.tsx   ← faqat users slot uchun
│   └── error.tsx     ← faqat users slot uchun
└── @analytics/
    ├── page.tsx
    ├── loading.tsx   ← faqat analytics slot uchun
    └── error.tsx

@users sekin yuklanayotganda — @analytics allaqachon ko'ringan bo'ladi. Ikkalasi mustaqil.

default.tsx — slot uchun fallback

Foydalanuvchi /dashboard/settings ga o'tganda — @users va @analytics slotlari uchun settings/page.tsx yo'q. Next.js nima ko'rsatadi?

Agar default.tsx bo'lsa — uni ko'rsatadi. Bo'lmasa — 404.

// app/dashboard/@users/default.tsx
export default function UsersDefault() {
  return null  // hech narsa ko'rsatmaslik
}

// app/dashboard/@analytics/default.tsx
export default function AnalyticsDefault() {
  return null
}

default.tsx — slot uchun "bo'sh holat". Navigatsiya qilinganda slot nima ko'rsatishini bilmasa — default.tsx ishlatiladi.

Amaliy misol — tab navigatsiya

Parallel Route bilan tab navigatsiya — har bir tab o'z URL iga ega:

app/dashboard/
├── layout.tsx
├── page.tsx
├── @team/
│   ├── default.tsx
│   └── page.tsx          →  /dashboard (team tab)
└── @revenue/
    ├── default.tsx
    └── page.tsx          →  /dashboard (revenue tab)

// app/dashboard/layout.tsx
import Link from 'next/link'

export default function DashboardLayout({ children, team, revenue }) {
  return (
    <div>
      <nav>
        <Link href="/dashboard">Jamoa</Link>
        <Link href="/dashboard/revenue">Daromad</Link>
      </nav>
      <div>
        {team}
        {revenue}
      </div>
    </div>
  )
}

Parallel Route vs oddiy komponent

Ko'pchilik savol beradi: "Nima uchun Parallel Route? Oddiy komponent import qilsam bo'lmaydimi?"

// Oddiy komponent — bu ham ishlaydi
export default function Dashboard() {
  return (
    <div>
      <UserStats />
      <Analytics />
    </div>
  )
}

Parallel Route kerak bo'lgan holat:

• Har bir qism o'z URL iga ega bo'lishi kerak
• Har bir qism mustaqil navigatsiya qilishi kerak
• Har bir qism mustaqil loading/error holatiga ega bo'lishi kerak

Agar bular kerak bo'lmasa — oddiy komponent yetarli.

Tez-tez uchraydigan xatolar

1. default.tsx yo'q — navigatsiyada 404

// ❌ — /dashboard/settings ga o'tganda @users slot 404
app/dashboard/@users/page.tsx  (default.tsx yo'q)

// ✅
app/dashboard/@users/default.tsx  (null qaytaradi)

2. Slot nomini layout props da noto'g'ri yozish

// ❌ — @team papkasi, lekin props da "users"
export default function Layout({ children, users }) {
  // users — undefined, @team ko'rinmaydi
}

// ✅ — papka nomi bilan bir xil
export default function Layout({ children, team }) {
  // team — @team/page.tsx kontenti
}

3. Slot URL ga kiradi deb o'ylash

// @users papkasi — URL ga kirmaydi
// ❌ — bunday URL yo'q
/dashboard/@users

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

Xulosa

Parallel Route — bir sahifada bir nechta mustaqil slot.

@slot_nomi    → papka nomi, URL ga kirmaydi
layout props  → slot nomi bilan keladi (children kabi)
default.tsx   → navigatsiyada slot nima ko'rsatishini bilmasa

Qachon kerak: har bir qism o'z URL i, mustaqil loading/error, mustaqil navigatsiya. Qachon kerak emas: oddiy komponent import qilish yetarli bo'lsa.

Keyingi dars

27-dars: Intercepting Route — (.) (..) — modal pattern

Sahifani to'liq yuklamasdan modal ko'rsatish — Instagram kabi foto modal, Next.js da qanday amalga oshiriladi.