هذه ميزتان متقدمتان في App Router لتخطيطات واجهة مستخدم متطورة. إنهما تشتركان في بناء جملة اتفاقية المجلد.
تسمح المسارات المتوازية لتخطيط واحد بتصيير عدة "فتحات" مسار مستقلة في نفس الوقت، لكل منها حالة تحميل/خطأ خاصة بها. يمكنك تعريف الفتحات باستخدام مجلدات @name:
app/
layout.tsx
@team/page.tsx → a slot
@analytics/page.tsx → another slot
// app/layout.tsx — slots are passed as named props
export default function Layout({
children,
team, // ← @team slot
analytics, // ← @analytics slot
}: { children: React.ReactNode; team: React.ReactNode; analytics: React.ReactNode }) {
return <><nav /> {children} <aside>{team}{analytics}</aside></>;
}
تتنقل كل فتحة وتحمل بشكل مستقل — رائعة للـ لوحات المعلومات حيث تتحدث الألواح بشكل منفصل، أو عرض قسمين في نفس الوقت.
تسمح المسارات المعترضة لك "بالقبض على" التنقل وتصييرها في السياق الحالي (مثل نافذة مشروطة) بدلاً من صفحة كاملة — مع الحفاظ على عنوان URL حقيقي وقابل للمشاركة.
app/feed/page.tsx
app/feed/(..)photo/[id]/page.tsx → intercepts /photo/[id] when navigated from the feed
app/photo/[id]/page.tsx → the full page (on direct visit / refresh)
Click a photo in the feed → opens as a MODAL over the feed (intercepted), URL = /photo/123
Refresh or share that URL → renders the FULL photo page (no interception)
تتحكم علامات الاعتراض ((.) نفس المستوى، (..) مستوى واحد لأعلى، (...) جذر) في القطاع الذي يتم اعتراضه. هذا هو بالضبط كيفية عمل نمط "الصورة تفتح في نافذة مشروطة لكن لها عنوان URL خاص بها" الذي يشبه Instagram.
تمكّن المسارات المتوازية تخطيطات متعددة الألواح معقدة وتحميل مستقل (لوحات المعلومات) بنظافة؛ توفر المسارات المعترضة نمط "نافذة مشروطة برابط حقيقي" (قابل للمشاركة، آمن عند التحديث، صديق لزر العودة) الذي يصعب بناؤه بخلاف ذلك.
إنها متقدمة، لكنها تحل مشاكل تجربة مستخدم حقيقية — الألواح المستقلة والتراكبات السياقية — التي كانت تتطلب سابقاً عمل توجيه/حالة يدوي كبير.