🚀 مسیرهای موازی و مسیرهای رهگیری در Next.js — راهنمای کامل مبتدیان

Next.js App Router دو مسیریابی اولیه را معرفی کرد:

• مسیرهای موازی
• رهگیری مسیرها

این‌ها ویژگی‌های تصادفی نیستند – آنها برای حل چالش‌هایی که به طور طبیعی در آنها ایجاد می‌شوند اختراع شده‌اند مسیریابی مبتنی بر فایل.

این راهنما مسیرهای موازی را از ابتدا توضیح می دهد (در ابتدا بدون استفاده از مورد)، سپس به طور طبیعی مورد استفاده مودال در دنیای واقعی را معرفی می کند، نشان می دهد که چرا مسیرهای موازی به خودی خود شکست می خورند، و چگونه مسیرهای تله این مشکل را حل می کنند. در نهایت، ما تمام الگوهای رهگیری را پوشش خواهیم داد (.)، (..)، (..)(..)، (...) با URL های واقعی – و با موارد استفاده عملی پایان دهید.

بیایید شروع کنیم.

🦄 1. مسیرهای موازی چیست؟

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

طرح نمونه:

export default function RootLayout({ children, modal }) {
  return (
    
      {children}
      {modal}
    >
  );
}

این طرح انتظار دو شاخه دارد:

• children → محتوای عادی صفحه
• modal → رابط کاربری ثانویه (مدال/نوار کناری/غیره)

ساختار پوشه

app/
 ├─ layout.tsx
 ├─ page.tsx
 └─ @modal/
      ├─ default.tsx
      └─ settings/page.tsx

یک بازدید /

• کودکان → page.tsx
• modal → default.tsx

یک بازدید /settings

• کودکان ← page.tsx ثابت
• modal → settings/page.tsx

هنوز مدال وجود ندارد. هیچ مورد استفاده ای فرض نمی شود.
مسیرهای موازی به سادگی به شما امکان رندر می دهند دو مسیر فعال به طور همزمان.

2. تفاوت های ظریف مهم – شکاف های مودال باید در یک طرح بندی باشند، نه در یک صفحه

شکاف های مسیر موازی (modal، sidebar، feed) فقط در layout.tsx.

آنها در کار نمی کنند page.tsx.

این یک اشتباه رایج است:

❌ این هرگز کار نخواهد کرد:

export default function Page({ modal }) {
  return {modal}>;
}

✔ مکان مناسب:

// layout.tsx
export default function RootLayout({ children, modal }) {
  return (
    
      {children}
      {modal}
    >
  );
}

مسیرهای موازی فقط به طرح‌بندی‌ها تزریق می‌شوند.

🥥 3. ارائه مورد استفاده واقعی

اکثر برنامه های کاربردی واقعی این رفتار را می خواهند:

✔ ناوبری داخلی → نمایش معین

/posts → /posts/42 → معین بیش از فهرست

✔ URL مستقیم یا تازه کردن → نمایش تمام صفحه

/posts/42 → نمایش کامل صفحه

در اینجا به این صورت است:

• مدال برای پست های اینستاگرام
• مدال های تصویر در توییتر
• مدال های ویدیوی YouTube
• مدل های لیست Airbnb

همه کار

بیایید ببینیم چرا مسیرهای موازی برای این مورد استفاده شکست می‌خورند.

4. چرا مسیرهای موازی به خودی خود شکست می خورند

پوشه ای که می توانید ایجاد کنید:

app/
 ├─ posts/page.tsx
 ├─ posts/[id]/page.tsx
 └─ @modal/
      ├─ default.tsx
      └─ posts/[id]/page.tsx

سناریوی 1 – /posts → /posts/42

مسابقات:

• کودکان → صفحه کامل
• معین → نوع معین

❌ هر دو را ارائه می دهد – اشتباه است.

سناریو 2 – بارگذاری مجدد /posts/42

مسابقات مشابه:

• کودکان → صفحه کامل
• معین → نوع معین

❌ هر دو را در رفرش نشان می دهد – اشتباه است.

سناریو 3 – باز /posts/42 مستقیما

دوباره همان مسابقات
❌ رفتار اشتباه

چرا

زیرا مسیرهای موازی بر هم منطبق هستند کاملا بر اساس سیستم فایلو نه در زمینه ناوبری.

آنها نمی توانند بدانند:

• کاربر از /posts?
• آیا کاربر آپدیت کرد؟
• آیا کاربر URL را مستقیماً باز کرده است؟
• آیا کاربر از صفحه دیگری می آید؟

اگر مسیر وجود داشته باشد، آنها همیشه مدال را نشان می دهند.

بنابراین مسیرهای موازی به تنهایی کافی نیستند.

🦄 5. راه حل – رهگیری مسیر

مسیرهای رهگیری به شما امکان کنترل می دهد چه زمانی یک مسیر باید ارائه شود.

ساختار صحیح پوشه:

app/
 ├─ posts/page.tsx
 ├─ posts/[id]/page.tsx
 └─ @modal/
      ├─ default.tsx
      └─ (.)posts/[id]/page.tsx

این (.) پیشوند به Next.js می گوید:

“از این نسخه فقط برای ناوبری داخلی در همان سطح مسیر استفاده کنید.”

و ناگهان همه چیز به درستی رفتار می کند:

مسیرهای موازی + رهگیری UX مودال عالی را به شما می دهد.

6. همه پیشوندهای مسیر رهگیر توضیح داده شده (با URLهای واقعی)

Next.js 4 مدل رهگیری ارائه می دهد.

بیایید از URL های واقعی برای پیدا کردن استفاده کنیم.

1️⃣ (.) – رهگیری در همان سطح

پوشه کاری:

@modal/(.)posts/[id]/page.tsx

برای:

/posts → /posts/42 → معین ✔

رهگیری نمی کند:

refresh /posts/42
/home → /posts/42

این رایج ترین شکل است.

2️⃣ (..) “یک سطح بالاتر.”

آدرس های اینترنتی نمونه:

/settings/profile
/settings/profile/edit
/settings/edit

UX مورد نظر:

• فقط زمانی که کاربر از یک نمایه می آید، حالت مودال دارد

پوشه:

@modal/(..)settings/profile/edit/page.tsx

آثار:

/settings/profile → /settings/profile/edit → معین ✔

نه:

/settings → /settings/profile/edit
refresh /settings/profile/edit

3️⃣ (..)(..) “دو سطح بالاتر.”

برای URL های عمیق مفید است.

مثال:

/dashboard/users
/dashboard/users/42
/dashboard/users/42/edit

فقط زمانی که ناوبری در راه است رهگیری کنید /dashboard/users:

@modal/(..)(..)dashboard/users/[id]/page.tsx

4️⃣ (...) – رهگیری سطح پایه

مفید برای مدال های جهانی مانند /login و /signup.

@modal/(...)login/page.tsx

آثار (معمول):

/home → /login
/posts → /login

رهگیری نمی کند:

refresh /login → صفحه کامل
مستقیم /login → صفحه کامل

🎉 7. موارد استفاده واقعی که در آن از این ویژگی ها استفاده خواهید کرد

در اینجا رایج ترین سناریوهایی است که در آن مسیرهای موازی + رهگیری می درخشند:

1. نمای جزییات معین در صفحه فهرست

• /posts
• /posts/[id] (مدال بیش از فهرست)
• شارژ مجدد /posts/[id] → صفحه کامل این مدل اینستاگرام/تویتر/یوتیوب است.

2. تنظیمات تودرتو با ویرایشگر معین

مسیرها:

• /settings/profile
• /settings/profile/edit (مدال)
• /settings/edit (صفحه کامل) مناسب برای تابلوهای پیچیده.

3. Modal Login Global

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

4. نوار کناری + محتوا + مدال همه به یکباره فعال هستند

مسیرهای موازی به شما امکان می دهند:

• نوار کناری
• محتوا
• معین
  هر کدام به عنوان مسیرهای مستقل.

5. Split View Apps (Inbox, Email, Admin Interface)

مانند جیمیل:

• /inbox
• /inbox/[id] (بررسی)
• /inbox/[id]/details (پنل مدال یا مجزا)

مسیرهای موازی به پنل های متعدد اجازه می دهد تا همزمان فعال باشند.

6. پخش کننده موسیقی/ویدئو که در حین پیمایش روشن می ماند

مسیر موازی (بازیکن) + مسیر اصلی (محتوا).

7. جریان های چند مرحله ای با پانل های جانبی

• /reports
• /reports/create
• /reports/create/confirm

  جایی که بخش‌هایی از رابط کاربری باید به‌عنوان مسیرهای جداگانه زنده بماند.

🧠 مدل ذهنی نهایی

✔ مسیرهای موازی

چندین مسیر را زنده نگه دارید.
مناسب برای: اسلات های طرح بندی (نوار کناری، مدال، کانال، نوار ابزار).

❌ اما مسیرهای موازی همیشه با سیستم فایل مطابقت دارند

بد برای رفتار مودال: محتوای تکراری در بارگذاری مجدد.

✔ رهگیری مسیرها

تصمیم بگیرید چه زمانی برای نمایش یک مدال:

• ناوبری داخلی → معین
• در بارگذاری مجدد/لینک مستقیم → صفحه کامل

✔ پیشوندها

• (.) همان سطح
• (..) یک سطح بالاتر
• (..)(..) دو سطح بالاتر
• (...) سطح ریشه

✔ شیار مسیر موازی باید داخل a باشد طرح بندیو نه داخل یک صفحه

نتیجه گیری 👨🏻‍🚀

مسیرهای موازی به شما این امکان را می دهند که چندین بخش مسیر را زنده نگه دارید و مسیرهای تله ای باعث می شوند که فقط با فعال کردن یک مسیر در صورت لزوم رفتار مناسبی داشته باشند. آنها با هم مدرن را ارائه می دهند، مسیریابی آگاه از متن که مسیریابی مبتنی بر فایل به تنهایی نمی تواند ارائه دهد – ممنون که خواندید!