المقدمة

Parallel Route أو المسار المتوازي هو مصطلح لتقنية في إطار العمل Next.js وهو العملية التي تسمح بـ render صفحة أو أكثر في صفحة بصورة متزامنة أو بناء على شرط معين في نفس الـlayout. ويُستفاد من هذا المفهوم في بناء لوحات تحكم لعرض أكثر من صفحة داخل لوحة التحكم مثل عرض صفحة الـ team & صفحة الـanalytics أو في بناء الـModals والتي يمكن مشاركتها عن طريق الـURL How parallel routes render multiple sub-pages into a single parent layout. Source: Next doc

بناء الـParallel route

يتم إنشاء الـParallel route عن طريق إنشاء folder يُسمى slots ويكتب بهذه الطريقة @folder

• ملاحظة : يتم إنشاء الـ@folder في نفس مستوى الـlayout.tsx file structure defines two explicit slots: @analytics and @team. Source: Next doc

بعد إنشاء ملف @folder وليكن على سبيل المثال @team وبداخله صفحة باسم page.tsx يتم إضافة الـslots للـrootlayout كـ props ، ومعلوم أن في Next.js الـrootLayout يقوم بـ render لـ children

Copytypescript
1// app/layout.tsx
2export default function Layout(props: {
3  children: React.ReactNode
4  team: React.ReactNode
5}) {
6  return (
7    <>
8      {props.children}
9      {props.team}  
10    </>
11  )
12}

ملفات الـ loading.tsx & error.tsx

يسمح الـ parallel route بإنشاء لكل slot ملف loading و error خاصة بالـ slot لعرض Loading spinner أو صفحة الخطاً لكل route على حدة

ملف default.tsx

يتم عرض محتوى الـ slot الذي يطابق الـURL وليكن مثلاً : en/team/members ، وهذا السلوك الطبيعي ، أما إذا لم يحدث تطابق بين الـ slot والـURL فإنه يحتاج لـfallback حتى لا يظهر الخطأ المعروف 404 page not found . الـ parallel route تعتمد على الـ layout الحالي ، إذا انتقل المستخدم إلى مسار فرعي لا يحتوي على صفحة مخصصة داخل الـ slot فإن Next.js تقوم بالبحث عن ملف الـ default لعرضه كـ fallback وإذا حدث refresh للصفحة فإن Next.js تبحث عن ملف الـdefault.tsx إذا لم يكن موجوداً تقوم بإرجاع صفحة الخطأ 404 ، ويحتوى على :

Copytypescript
1// default.tsx
2export default function Default() {
3  return null
4}

الإستخدام

1.الـ Modals

تظهر أهمية الـparallel route أنه يمكنك بناء modals overlay كالتي توجد على الإنستغرام مثلاً ، عندما تضغط على صورة ما ، فإنه يتم عرض تفاصيلها وأثناء ذلك تظل صفحة الـfeed تعمل في الخلفية ، ويتم تغيير الرابط إلى /photo/flower مثلاً وإذا قمت بمشاركة رابط الصورة سيتم عرض تفاصيل الصورة كاملة وتختفي الـfeeds من الخلفية.

2.Complex Dashboard

كما ذكرنا مسبقاً يمكنك عرض صفحتين أو أكثر في نفس صفحة الـdashboard وكل صفحة لها loading.tsx خاص بها ، وكل محتوى مفصول عن الآخر.

3.Role Based & Conditional Acces

يمكنك عرض صفحات مختلفة في نفس الـ layout بناء على المستخدم ، إذا كان مثلاً admin تقوم بعرض صفحة الأدمن ، وإذا كان member تعرض صفحة الـ members. داخل صفحة الـ layout ، تتم عملية التحقق من الـuser session وتقوم بإرجاع الـ slot المناسب لحالته.

Copytypescript
1 export default function Layout(props: {
2  children: React.ReactNode
3  teamMember: React.ReactNode  
4  admin: React.ReactNode
5}) {
6  const role = getUserRole(); // Server-side check
7
8  return (
9    <div className="dashboard-wrapper">
10      {props.children}
11      {role === 'admin' ? props.admin : props.teamMember}
12    </div>
13  )
14}

متى أستخدم parallel route ؟

لتحديد ذلك يجب أن تجيب على أسئلة معينة مثل : 1-هل ثمة صفحات معينة أحتاج عرضها في صفحة واحدة ؟

2-هل ثمة مكون يحتاج عرضه في نافذة فوق الصفحة الرئيسة ودون الحاجة إلى أغلاقها أو إختفائها ؟

3-هل ثمة مكونات في نفس الـview عرضها يعتمد على حالة المستخدم (أدمن أو مستخدم عادي) ؟

المصادر

1-Next.js

2-Medium