یہ App Router کی دو جدید خصوصیات ہیں جو پیچیدہ UI لے آؤٹس کے لیے ہیں۔ وہ فولڈر کنونشن syntax کا اشتراک کرتے ہیں۔
متوازی راستے ایک layout کو متعدد آزاد راستوں کے "slots" بیک وقت render کرنے دیتے ہیں، ہر ایک کی اپنی loading/error حالت کے ساتھ۔ آپ @name فولڈرز کے ساتھ slots کی تعریف کرتے ہیں:
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></>;
}
ہر slot آزادانہ طور پر navigate اور load کرتا ہے — dashboards کے لیے بہترین ہے جہاں panels الگ الگ اپڈیٹ ہوں، یا ایک ساتھ دو حصے دکھائیں۔
مداخل گز راستے آپ کو navigation کو "پکڑنے" اور اسے موجودہ سیاق و سباق میں render کرنے دیتے ہیں (مثال کے طور پر ایک modal) مکمل صفحے کی بجائے — اور پھر بھی ایک حقیقی، قابل اشتراک 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)
مداخلے کے نشانات ((.) ایک ہی سطح، (..) ایک اوپر، (...) root) کنٹرول کرتے ہیں کون سا حصہ مداخلت ہے۔ یہ بالکل وہی ہے جیسے Instagram کے انداز میں "تصویر ایک modal میں کھلتی ہے لیکن اس کا اپنا URL ہے" pattern کام کرتا ہے۔
متوازی راستے پیچیدہ، آزادانہ طور پر load کرنے والے multi-pane layouts (dashboards) کو صاف طریقے سے فعال بناتے ہیں؛ مداخل گز راستے "modal حقیقی URL کے ساتھ" pattern فراہم کرتے ہیں (قابل اشتراک، refresh-محفوظ، back-button کے لیے دوست انہ) جو بصورت دیگر بنانا مشکل ہے۔
وہ جدید ہیں، لیکن وہ حقیقی UX مسائل کو حل کرتے ہیں — آزاد panels اور contextual overlays — جن کے لیے پہلے نمایاں manual routing/state کام کی ضرورت تھی۔