Parallel routes render multiple pages in the same layout via named slots. Intercepting routes show modal UI while preserving URL for deep linking.
Common Interview Questions
Q: Parallel routes syntax?
Answer: @team and @analytics folders are named slots passed as props to layout. Each slot has independent loading/error states.
app/layout.tsx
// props: { children, team, analytics }
export default function Layout({ children, team, analytics }) {
return (
<>
{children}
<aside>{team}</aside>
<section>{analytics}</section>
</>
);
}
Q: Intercepting routes?
Answer: (.) intercepts same level, (..) one level up, (..)(..) two levels. Shows modal over feed while URL is /photos/123.
app/photos/[id]/(..)photo/page.tsx
Q: Soft navigation vs hard refresh?
Answer: Intercepting works on client navigation. Full page load shows full page route — design both modal and standalone page.
Q: default.tsx in slots?
Answer: Required fallback when slot has no active match — return null or placeholder to avoid 404 on partial navigation.
Key Points for Interviews
-
Slots enable dashboard-style multi-pane UIs
-
Intercepting enables modal deep links
-
Complex — mention only when appropriate in interviews
-
Each slot can have loading.tsx
-
Used in Next.js conf demo photo app