Parallel Routes در Next.js — رندر هم‌زمان صفحات با اسلات‌های پویا

۱. Parallel Routes چیست؟

Parallel Routes به شما اجازه می‌دهد چند مسیر را به‌صورت هم‌زمان یا شرطی در یک layout نمایش دهید. این قابلیت برای بخش‌های پویا مانند داشبوردها و فیدهای اجتماعی بسیار کاربردی است.

۲. تعریف اسلات‌ها با @folder

برای تعریف اسلات، از پوشه‌هایی با پیشوند @ استفاده کنید. مثلاً:

app/@team/page.tsx
app/@analytics/page.tsx

در layout اصلی، این اسلات‌ها به‌صورت prop دریافت می‌شوند:

export default function Layout({ children, team, analytics }) {
  return (
    <>
      {children}
      {team}
      {analytics}
    </>
  )
}

۳. default.js — نمایش fallback برای اسلات‌های نامشخص

اگر یک اسلات در مسیر فعلی فعال نباشد، Next.js از default.js برای نمایش fallback استفاده می‌کند. در غیر این صورت، خطای 404 نمایش داده می‌شود.

// app/@auth/default.tsx
export default function Default() {
  return null
}

۴. رفتار ناوبری

• Soft Navigation: فقط subpage مربوط به اسلات تغییر می‌کند
• Hard Navigation: اسلات‌هایی که با URL فعلی مطابقت ندارند، default.js یا 404 نمایش می‌دهند

۵. خواندن segment فعال با useSelectedLayoutSegment

'use client'
import { useSelectedLayoutSegment } from 'next/navigation'

export default function Layout({ auth }) {
  const loginSegment = useSelectedLayoutSegment('auth')
}

۶. مسیرهای شرطی بر اساس نقش کاربر

export default function Layout({ user, admin }) {
  const role = checkUserRole()
  return role === 'admin' ? admin : user
}

۷. ساخت تب‌های مستقل با layout درون اسلات

برای ساخت تب، یک layout درون اسلات تعریف کنید:

// app/@analytics/layout.tsx
<nav>
  <Link href="/page-views">Page Views</Link>
  <Link href="/visitors">Visitors</Link>
</nav>
<div>{children}</div>

۸. ساخت مودال با Parallel + Intercepting Routes

• مسیر اصلی: /login
• مودال: @auth/(.)login/page.tsx

// app/@auth/(.)login/page.tsx
<Modal>
  <Login />
</Modal>

باز کردن مودال:

// app/layout.tsx
<Link href="/login">Open modal</Link>
<div>{auth}</div>
<div>{children}</div>

بستن مودال:

'use client'
import { useRouter } from 'next/navigation'

export function Modal({ children }) {
  const router = useRouter()
  return (
    <>
      <button onClick={() => router.back()}>Close modal</button>
      <div>{children}</div>
    </>
  )
}

بستن مودال با Link:

<Link href="/">Close modal</Link>

اسلات خنثی برای بستن مودال:

// app/@auth/page.tsx
export default function Page() {
  return null
}

۹. حالت‌های بارگذاری و خطا برای هر اسلات

هر اسلات می‌تواند loading.js و error.js مستقل داشته باشد تا تجربه کاربری بهتری فراهم شود.

جمع‌بندی

Parallel Routes در Next.js ابزاری قدرتمند برای ساخت رابط‌های پویا، تب‌محور، شرطی و مودال‌محور است. با استفاده از اسلات‌ها، default.js، و ترکیب با Intercepting Routes، می‌توانید تجربه‌ای روان، قابل اشتراک‌گذاری و قابل کنترل برای کاربران بسازید.