المقدمة

(مسار الإعتراض) intercepting route هو تقنية في Next.js تسمح بـ عرض مسار (route) من جزء آخر من نفس تطبيقك ، وفي نفس الـ layout الحالي ، دون حاجة المستخدم للتغيير إلى context آخر.

دائماً يُستخدم الـ intercept route مع الـ Parallel Route لبناء الـ Modals . وعلى سبيل المثال : عند الضغط على صورة في انستغرام فالذي يحدث هو : 1- يظهر Modal يحتوي على الصورة وتفاصيلها وتظل الـ feed تعمل في الخلفية

2- يتغير الرابط من https://www.instagram.com إلى https://www.instagram.com/p/DYpin6_DOsV/

والذي يحدث في حالة تم فتح الرابط لوحده في نافذة جديدة أو تمت مشاركته أو قام المستخدم بـ refresh للصفحة فإن الذي يحدث هو أنه لا يتم عرض الـmodal بل يتم عرض صفحة كاملة خاصة بالصورة تحتوي على تفاصيل أكثر

يتيح الـ intercepting route بناء هذا النموذج بالضبط ، رابط واحد ، وطريقتين لعرضه مختلفتين حسب الطريقة التي يستخدمها المستخدم

خلف الكواليس

ما يحدث بالضبط هو أن Next.js تقوم بـإعتراض "intercept" الـ Navigation Request للصفحة المعينة ، وبدلاً من عرض الصفحة ، تقوم بتمريرها إلى @slot محدد وهو الـ Parallel Route

هيكلة الملفات

ملف الـintercept route يتم تعريفه بإنشاء ملف يبدأ (.) أو (..) أو (..)(..) أو (...) حيث :

(.) تستخدم لمطابقة الـ segment يوجد في نفس المستوى in the same level

(..) تستخدم لمطابقة الـ segment يوجد في مستوى أعلى one level above

(..)(..) للمطابقة في مستوى أعلى بمرتين

(...) لمطابقة segment يوجد في مستوى الـ root

وتظهر أهمية المطابقة أنه عندما يقوم المستخدم بفتح نافذة جديدة أو يُشارك الرابط فإنه لن يتم فتح الـ modal بل تظهر النتيجة في صفحة كاملة full standalone page ، ويجب أن يُطابق الـ intercept segment مع الـ full standalone page في المستوى .

كما أنه يجب أن يُعلم أن الـ intercept route (..) يعتمد على الـ route segemnt في المطابقة وليس الـ file system ، والـ segment يكون جزء من الـURL أما الـ @folder في الـ Parallel Route لا يُعتبر جزءاً من الـ segment إنما هو file-system

الصور في الأسفل توضح هيكلة الملفات

المصادر

1-Next.js Intercept route official doc