এগুলি App Router এর দুটি উন্নত বৈশিষ্ট্য যা পরিশীলিত UI লেআউটগুলির জন্য। তারা একটি ফোল্ডার-কনভেনশন সিনট্যাক্স শেয়ার করে।
সমান্তরাল রুটগুলি একটি একক লেআউটকে একাধিক স্বাধীন রুট "স্লট" একই সাথে রেন্ডার করতে দেয়, প্রতিটির নিজস্ব লোডিং/ত্রুটি অবস্থা সহ। আপনি @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)
আটকানো মার্কারগুলি ((.) একই স্তর, (..) এক উপরে, (...) রুট) নিয়ন্ত্রণ করে কোন সেগমেন্ট আটকানো হয়। এটি ঠিক কীভাবে Instagram-স্টাইল "ফটো একটি মোডালে খোলে কিন্তু এর নিজের URL আছে" প্যাটার্ন কাজ করে।
সমান্তরাল রুটগুলি জটিল, স্বাধীনভাবে-লোডিং মাল্টি-প্যান লেআউট (ড্যাশবোর্ড) পরিষ্কারভাবে সক্ষম করে; আটকানো রুটগুলি "একটি বাস্তব URL সহ মোডাল" প্যাটার্ন সরবরাহ করে (শেয়ারযোগ্য, রিফ্রেশ-নিরাপদ, ব্যাক-বাটন-বান্ধব) যা অন্যথায় তৈরি করা কঠিন।
তারা উন্নত, কিন্তু তারা বাস্তব UX সমস্যাগুলি সমাধান করে — স্বাধীন প্যানেল এবং প্রসঙ্গমূলক ওভারলে — যা আগে উল্লেখযোগ্য ম্যানুয়াল রুটিং/স্টেট কাজ প্রয়োজন ছিল।