In the Next.js App Router, what do the (.), (..) and (...) folder prefixes do, and how do they combine with a slot to show a photo as a modal over a feed while /photos/12 still loads as a full page?

## What interception means An intercepting route lets one part of the route tree say: "when the user navigates to *that* URL from inside the app, render *me* instead." The URL that ends up in the address bar is the real one; only the component that renders is swapped. The prefix in the folder name says which route is being intercepted, relative to where the intercepting folder sits. - `(.)` — a route at the same segment level - `(..)` — one segment level above - `(..)(..)` — two segment levels above - `(...)` — from the root of the `app` directory The critical detail, and the one candidates get wrong, is that these count **route segments**, not directories on disk. Route groups and slots contribute no segment, so they do not count. This is why an intercepting folder living inside `app/@modal/` uses `(.)` to reach a route at the root of `app`: the slot itself is not a segment. ## Interception is a soft-navigation feature Interception applies when the router performs a client-side navigation from within the app. A full page load — pasting the URL, refreshing, following a link from another site, a crawler — is not intercepted, and the real route renders. This is not a limitation to work around; it is the entire mechanism the modal pattern is built on. ## The modal recipe ``` app/ layout.tsx // renders {children} and {modal} page.tsx // the feed photos/[id]/page.tsx // the real, full page @modal/ default.tsx // returns null (.)photos/[id]/page.tsx // the intercepted overlay ``` The root layout receives the slot as a prop and renders it above the main tree: ```tsx // app/layout.tsx export default function RootLayout({ children, modal, }: { children: React.ReactNode modal: React.ReactNode }) { return ( <html lang="en"> <body> {children} {modal} </body> </html> ) } ``` Now trace the two journeys: **From the feed.** The user clicks a link to `/photos/12`. The router navigates on the client. The `@modal` slot has an intercepting match for that URL, so it renders the overlay, and because slots are independent, the `children` slot keeps showing the feed underneath. The address bar reads `/photos/12`, so the state is shareable and the back button works. **Direct load.** The user pastes `/photos/12`. No interception. `children` resolves `app/photos/[id]/page.tsx` — the full standalone page — and `@modal` has no match, so it renders `default.tsx`, which returns `null`. Nothing appears where the overlay would have been. ## The files that are easy to forget - `app/@modal/default.tsx` returning `null`. Without it, a hard load of any URL the slot does not match 404s the route, which usually shows up as "the site breaks on refresh". - The real `app/photos/[id]/page.tsx`. The intercepted copy never renders on a direct load, so skipping the standalone page means shared links are broken. ## Closing the modal The modal is a route, so dismissing it is a navigation. Calling `router.back()` from a client component returns to the feed and unmounts the overlay; a link back to the feed does the same for the case where the user arrived without history. Whichever you choose, the dialog's own escape-key and backdrop handlers must trigger that navigation rather than flipping local state — local state would leave the URL pointing at the photo. ## Avoiding two copies of the view The intercepted route and the standalone page render the same content in different containers. Factor the content into one component and have both routes render it — the standalone page directly, the intercepted route inside a dialog wrapper. Two hand-maintained copies drift, and the one that drifts is always the standalone page, because nobody looks at it during development. ## Where else interception is used Modals are the headline case, but the same convention covers any "show this route in place, in context" flow: a login step layered over the page that triggered it, or an item detail rendered inside a list view while remaining a real URL for anyone who loads it cold.