آموزش جامع Parallel Routes در Next.js (اسلات‌ها)

مقدمه

Parallel Routes یا مسیرهای موازی یکی از قابلیت‌های پیشرفته App Router در Next.js است که به ما اجازه می‌دهد چند بخش مستقل را به صورت همزمان داخل یک صفحه نمایش دهیم.

به این بخش‌های مستقل Slot (اسلات) گفته می‌شود.

این قابلیت بیشتر در پروژه‌های بزرگ مانند:

• پنل مدیریت
• داشبورد ادمین
• CRM
• فروشگاه‌های اینترنتی
• سیستم‌های آماری

استفاده می‌شود؛ زیرا هر قسمت می‌تواند به صورت مستقل داده دریافت کند، لود شود و خطاهای خودش را مدیریت کند.

Parallel Routes چیست؟

فرض کنید در صفحه داشبورد سه بخش مختلف داریم:

• اطلاعات داشبورد
• لیست سفارش‌ها
• لیست محصولات

در حالت معمول اگر یکی از این بخش‌ها دیر لود شود، ممکن است کل صفحه منتظر بماند.

اما با Parallel Routes هر بخش مستقل از بخش‌های دیگر رندر می‌شود.

Slot چیست؟

Slot همان بخشی است که داخل Parallel Routes نمایش داده می‌شود.

در Next.js هر Slot با علامت @ ساخته می‌شود.

مثلاً:

app
└── dashboard
    ├── layout.js
    ├── page.js
    ├── @order
    │    └── page.js
    └── @product
         └── page.js

در این مثال:

• @order یک Slot است.
• @product نیز یک Slot است.

در واقع Parallel Routes با استفاده از همین Slotها پیاده‌سازی می‌شود.

دریافت Slotها داخل Layout

در فایل layout.js، Next.js تمام Slotها را به صورت پراپ در اختیار ما قرار می‌دهد.

export default function DashboardLayout({
  children,
  order,
  product,
}) {
  return (
    <>
      {children}
      {order}
      {product}
    </>
  );
}

نکته بسیار مهم:

نام پراپ‌ها باید دقیقاً با نام پوشه‌های Slot برابر باشد.

مثلاً:

@order  ---> order
@product ---> product

اگر پوشه @order باشد اما داخل Layout بنویسید:

OrderSlot

هیچ چیزی نمایش داده نمی‌شود.

Parallel Routes چه مزیتی دارد؟

مهم‌ترین مزیت آن مستقل بودن هر Slot است.

هر Slot می‌تواند:

• داده جداگانه دریافت کند.
• Loading مخصوص خودش را داشته باشد.
• Error مخصوص خودش را داشته باشد.
• مستقل از سایر بخش‌ها رندر شود.

مثلاً اگر محصولات دیر لود شوند:

• سفارش‌ها نمایش داده می‌شوند.
• داشبورد نمایش داده می‌شود.
• فقط قسمت محصولات Loading خواهد داشت.

loading.js در Parallel Routes

هر Slot می‌تواند فایل loading.js مخصوص خودش را داشته باشد.

مثلاً:

@order
├── page.js
└── loading.js

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

این Loading فقط مربوط به همان Slot است.

اگر در خود Dashboard نیز loading.js وجود داشته باشد:

dashboard
├── page.js
└── loading.js

در هنگام بارگذاری Route اصلی، این فایل نمایش داده می‌شود.

error.js در Parallel Routes

هر Slot می‌تواند فایل error.js مخصوص خودش را نیز داشته باشد.

مثلاً:

@order
├── page.js
└── error.js

اگر داخل صفحه بنویسیم:

throw new Error("Error")

به جای اینکه کل صفحه خراب شود، فقط error.js همان Slot نمایش داده می‌شود.

نکته مهم:

فایل error.js حتماً باید در ابتدای خود داشته باشد:

"use client";

زیرا Error Boundaryها در React باید Client Component باشند.

تفاوت Suspense و loading.js

یکی از سوالات مهم هنگام یادگیری Parallel Routes تفاوت این دو است.

loading.js

loading.js مخصوص Routeها و Slotهای Next.js است.

Next.js خودش هنگام بارگذاری Route آن را نمایش می‌دهد.

شما فقط فایل را ایجاد می‌کنید و نیازی به استفاده از <Suspense> ندارید.

Suspense

Suspense قابلیت خود React است.

از آن زمانی استفاده می‌کنیم که بخواهیم فقط یک قسمت خاص از صفحه دیرتر لود شود.

مثلاً:

<Suspense fallback={<p>در حال دریافت سفارش‌ها...</p>}>
  {order}
</Suspense>

یا

<Suspense fallback={<Loading />}>
   <Comments />
</Suspense>

در این حالت فقط همان کامپوننت منتظر می‌ماند و بقیه صفحه بدون تأخیر نمایش داده می‌شوند.

چه زمانی از Suspense استفاده کنیم؟

زمانی که بخواهیم:

• فقط یک Widget دیرتر لود شود.
• فقط کامنت‌ها دیرتر نمایش داده شوند.
• فقط جدول محصولات دیرتر دریافت شود.
• بخشی از صفحه مستقل از سایر بخش‌ها رندر شود.

چه زمانی loading.js کافی است؟

اگر فقط می‌خواهید هنگام ورود به Route یا Slot، Loading نمایش داده شود، ساختن loading.js کافی است.

مشکل Refresh شدن Parallel Routes

یکی از مشکلاتی که هنگام استفاده از Parallel Routes مشاهده می‌شود این است که اگر وارد یکی از Slotها شویم و صفحه را Refresh کنیم، ممکن است با خطای 404 روبه‌رو شویم.

مثلاً:

dashboard
└── @order
     └── details
          └── page.js

اگر از طریق Link وارد شویم مشکلی وجود ندارد.

اما اگر همان صفحه را Refresh کنیم، Next.js ممکن است نتواند وضعیت سایر Slotها را تشخیص دهد و در نتیجه 404 نمایش دهد.

default.js چیست؟

برای حل این مشکل از default.js استفاده می‌کنیم.

این فایل به Next.js می‌گوید:

"اگر بعد از Refresh نتوانستی تشخیص بدهی این Slot باید چه چیزی نمایش دهد، این فایل را نمایش بده."

مثلاً:

@product
├── page.js
└── default.js

داخل فایل:

export default function Default() {
  return <p>هیچ محصولی انتخاب نشده است.</p>;
}

در نتیجه بعد از Refresh به جای 404، این صفحه نمایش داده می‌شود.

وظیفه default.js

وظیفه default.js نمایش محتوای پیش‌فرض Slot زمانی است که Next.js وضعیت آن Slot را بعد از Refresh یا ورود مستقیم تشخیص ندهد.

جمع‌بندی

Parallel Routes یکی از قدرتمندترین قابلیت‌های App Router در Next.js است که با استفاده از Slotها چند بخش مستقل را در یک صفحه نمایش می‌دهد.

هر Slot می‌تواند:

• داده مستقل داشته باشد.
• Loading مستقل داشته باشد.
• Error مستقل داشته باشد.
• با استفاده از Suspense به صورت جداگانه رندر شود.
• با کمک default.js بعد از Refresh نیز بدون نمایش 404 مدیریت شود.

به طور خلاصه:

• Parallel Routes = نمایش چند مسیر به صورت همزمان.
• Slot = هر بخش مستقل که با @ ساخته می‌شود.
• loading.js = نمایش Loading هنگام بارگذاری Route یا Slot.
• error.js = مدیریت خطاهای همان Route یا Slot.
• Suspense = کنترل بارگذاری بخش‌های خاص رابط کاربری.
• default.js = نمایش محتوای پیش‌فرض Slot هنگام Refresh یا ورود مستقیم به صفحه.

یادگیری Parallel Routes برای پروژه‌های کوچک ضروری نیست، اما در داشبوردها و پنل‌های مدیریتی حرفه‌ای یکی از مهم‌ترین قابلیت‌های Next.js محسوب می‌شود و باعث می‌شود صفحات ما ماژولار، مستقل، سریع‌تر و قابل نگهداری‌تر باشند.