Parallel Routes & Intercepting Routes

Q: What are parallel routes in the Next.js App Router, and why would you use them?

Parallel routes let you render two or more independent pages within the same layout at the same time, using named slots defined with an at sign prefix, which is useful for building dashboards where different sections, like analytics and recent activity, load and update independently of each other.

Q: How do you set up the folder structure for a parallel route slot in your application?

You create a folder starting with an at sign, such as @analytics, inside the same directory as your layout, and Next.js automatically passes its rendered content into the layout as a prop with that same name, letting you place it wherever you want inside the layout's markup.

Q: What is an intercepting route, and what problem does it solve?

An intercepting route lets you show a different view when a link is clicked from within your app, such as opening a photo in a modal overlay, while still showing the full dedicated page if that same URL is visited directly, such as through a page refresh or a shared link.

Q: How would you combine parallel routes and intercepting routes together to build a modal that overlays the current page?

You create a parallel route slot for the modal content, and inside that slot, use an intercepting route to catch navigation to a specific path, rendering the modal on top of the current page when the link is clicked internally, while the underlying page content remains visible and unchanged behind it.

Q: What are common use cases where parallel routes provide a better solution than simply rendering multiple components inside a single page?

Parallel routes shine when different sections of a page need independent loading and error states, independent data fetching, or need to support features like modals that intercept navigation, since a single page component would tie all of that logic together and make error or loading boundaries harder to isolate cleanly.

5 questions found

What are parallel routes in the Next.js App Router, and why would you use them?

Beginner

Parallel routes let you render two or more independent pages within the same layout at the same time, using named slots defined with an at sign prefix, which is useful for building dashboards where different sections, like analytics and recent activity, load and update independently of each other.

// app/dashboard/layout.js
export default function DashboardLayout({ children, analytics, activity }) {
  return (
    <div>
      {children}
      {analytics}
      {activity}
    </div>
  );
}

Real-world example A dashboard shows an analytics chart and a recent activity feed side by side, with each one implemented as an independent parallel route that fetches and updates its own data separately.

Common follow-ups: How do you create the folder structure needed for a parallel route slot?;Can each parallel route slot have its own independent loading state?

Layouts & Templates;Loading UI & Streaming with Suspense

How do you set up the folder structure for a parallel route slot in your application?

Intermediate

You create a folder starting with an at sign, such as @analytics, inside the same directory as your layout, and Next.js automatically passes its rendered content into the layout as a prop with that same name, letting you place it wherever you want inside the layout's markup.

// app/dashboard/@analytics/page.js
export default function Analytics() {
  return <div>Analytics content here</div>;
}

// app/dashboard/@activity/page.js
export default function Activity() {
  return <div>Recent activity here</div>;
}

Real-world example A team organizes their dashboard's analytics and activity sections into separate @analytics and @activity folders, keeping each section's code cleanly isolated while both render together on the same dashboard page.

Common follow-ups: What happens if one parallel route slot has no matching content for a given URL?;Can parallel routes have their own nested dynamic routes?

Routing (App/Pages Router);Dynamic Routes & Catch-All Segments

What is an intercepting route, and what problem does it solve?

Intermediate

An intercepting route lets you show a different view when a link is clicked from within your app, such as opening a photo in a modal overlay, while still showing the full dedicated page if that same URL is visited directly, such as through a page refresh or a shared link.

// app/feed/@modal/(.)photo/[id]/page.js
// This intercepts navigation to /photo/[id] from within /feed
// showing it in a modal instead of a full page navigation

Real-world example A photo sharing app shows a photo in a modal overlay when a user clicks it from their feed, while directly visiting or sharing that same photo's link still loads the complete standalone photo page.

Common follow-ups: What do the different dot notation symbols mean in intercepting route folder names?;How does this pattern work together with parallel routes for the modal itself?

Parallel Routes & Intercepting Routes;Routing (App/Pages Router)

How would you combine parallel routes and intercepting routes together to build a modal that overlays the current page?

Advanced

You create a parallel route slot for the modal content, and inside that slot, use an intercepting route to catch navigation to a specific path, rendering the modal on top of the current page when the link is clicked internally, while the underlying page content remains visible and unchanged behind it.

// app/@modal/(.)photo/[id]/page.js renders the modal
// app/photo/[id]/page.js renders the full standalone page
// app/layout.js includes {modal} alongside {children}

Real-world example A social media application implements a photo detail modal that appears smoothly over the current feed when clicked, using the combination of a parallel route slot and an intercepting route together.

Common follow-ups: How do you close the modal and return to the underlying page?;Does this pattern require any special client side JavaScript to manage the modal state?

Client Components & Hydration;Layouts & Templates

What are common use cases where parallel routes provide a better solution than simply rendering multiple components inside a single page?

Advanced

Parallel routes shine when different sections of a page need independent loading and error states, independent data fetching, or need to support features like modals that intercept navigation, since a single page component would tie all of that logic together and make error or loading boundaries harder to isolate cleanly.

// Each parallel route slot can have its own
// loading.js and error.js files
// app/dashboard/@analytics/loading.js
// app/dashboard/@analytics/error.js

Real-world example A dashboard gives its analytics section its own independent error boundary, so if the analytics data fails to load, only that section shows an error message while the rest of the dashboard continues working normally.

Common follow-ups: Can different parallel route slots use entirely different data fetching strategies?;How do you decide between parallel routes and simply composing regular components?

Loading UI & Streaming with Suspense;Error Handling & Not Found Pages