CodePark/ questions / App Router & files
START PRACTICINGPRACTICE
Frontend question · Next.js › App Router & files

Explain parallel routes and intercepting routes, and how they combine to build a modal that has its own URL.

app/
  layout.tsx            // renders {children} and {modal}
  @modal/
    default.tsx         // returns null
    (.)photo/[id]/
      page.tsx          // photo inside a modal
  photo/[id]/
    page.tsx            // full photo page
  page.tsx              // feed

Parallel routes render extra named "slots" in a layout. Intercepting routes show another route inside the current page. Together they give a modal its own URL.

Parallel routes. A slot is a folder whose name starts with @, such as @modal.

  • Next.js passes each slot to the parent layout as a prop, next to children.
  • Each slot can have its own loading and error states.
  • Slots do not change the URL.
  • A default.tsx file is the fallback when a slot has no match after a hard navigation (a full page load) or a refresh.

Intercepting routes. They load a route inside the current layout during a client-side navigation, also called a soft navigation (React swaps the content without reloading the page). The folder prefix says where the target route is:

  • (.) matches the same level
  • (..) matches one level up
  • (...) matches from the app root

The levels count route segments (URL parts), not file-system folders.

Combined. A user clicks a photo in a feed, which navigates to /photo/1. The folder @modal/(.)photo/[id] intercepts that navigation and shows the photo as a modal over the feed. The URL is shareable. A refresh or a direct visit shows the full photo/[id] page instead. The back button closes the modal.

  • @slot folders become props of the parent layout.
  • default.tsx is the fallback for a slot that has no match.
  • (.), (..) and (...) intercept a route during soft (client-side) navigation.
  • A refresh or direct visit shows the real page, not the modal.
  • Together they give modals a shareable URL with back-button support.