What are intercepting routes?
Intercepting Routes: Allow you to intercept a route and show it in the context of another route. You can use these when keeping the context for the current page is important. E.g. Seeing all tasks while editing one task or expanding a photo in a feed.
- 1
These patterns allow you to build richer and more complex UIs, democratizing features that were historically complex for small teams and individual developers to implement.
- 2
Intercepting routes allows you to load a route from another part of your application within the current layout. This routing paradigm can be useful when you want to display the content of a route without the user switching to a different context.
- 3
For example, when clicking on a photo in a feed, you can display the photo in a modal, overlaying the feed. In this case, Next.js intercepts the /photo/123 route, masks the URL, and overlays it over /feed.
- 4
However, when navigating to the photo by clicking a shareable URL or by refreshing the page, the entire photo page should render instead of the modal. No route interception should occur.
- 1
(.) to match segments on the same level
- 2
(..) to match segments one level above
- 3
(..)(..) to match segments two levels above
- 4
(...) to match segments from the root app directory
Scenario Questions
0-2 years experience
- 1We have a Next.js app with a page at /dashboard/settings. How would you use an intercepting route to share a common layout between all /dashboard/* pages without changing the URL?
- 2If you place a file named (admin)/layout.tsx inside the app directory, what effect does it have on routes like /admin/users and /admin/reports?
2-5 years experience
- 1Your team added an intercepting route to wrap several marketing pages, but after deployment the /about page returns a 404. What could be causing this, and how would you debug it?
- 2When using intercepting routes to add a loading spinner for a group of routes, what trade‑offs do you consider regarding server‑side rendering versus client‑side behavior?
5-8 years experience
- 1We need to implement role‑based access control across many sections of a large Next.js app. How would you design an intercepting route strategy that scales, and what edge cases must you handle?
- 2Explain how intercepting routes interact with Next.js middleware and edge functions. What performance implications arise when both are used together for authentication?
8+ years experience
- 1Our monorepo contains multiple Next.js apps that share common UI components. How would you standardize intercepting route patterns across teams to avoid duplication while keeping build times low?
- 2If we plan to migrate legacy pages that use custom server routing to the new app router with intercepting routes, what architectural steps and migration plan would you propose to minimize downtime and ensure backward compatibility?
Follow-up Questions
- Can you sketch the directory structure you would create for that intercepting route?
- What happens if a child route also defines its own layout?
- How would you verify that the intercepting route behaves correctly in both dev and production?