What are Parallel and Intercepting Routes? Describe a photo gallery modal scenario.

WHAT THIS TESTS: Mastery of Next.js App Router advanced layout composition and URL-driven state management. The interviewer wants to know if you can use file-system conventions to render multiple independent page segments simultaneously and to hijack navigation for patterns like modals without resorting to client-side state or portals.

A GOOD ANSWER COVERS four things in order. First, Parallel Routes are independent layout slots created with the @folder convention, allowing a layout to render multiple pages at the same time via children and named slots like @modal. Second, Intercepting Routes use (.) or (..) prefixes to match the current or parent segment and intercept navigations, rendering the target content inside the existing layout rather than performing a full page transition. Third, the combined gallery modal pattern works by placing an intercepting route inside a parallel slot so that clicking a photo link opens the image in a modal overlay while the background gallery page remains visible and interactive. Fourth, a robust answer notes that direct navigation or a hard refresh bypasses the intercept, so the parallel slot must provide a default.js or its own page.js to render the full photo page instead of the modal.

COMMON WRONG ANSWERS include several anti-patterns. First, proposing useState or a global store to toggle modal visibility, which destroys shareability and deep-linking. Second, confusing intercepting routes with middleware or route groups, or claiming they perform URL rewrites rather than layout-level rendering hijacks. Third, omitting default.js and failing to explain what renders when the slot is not active or when the user refreshes. Fourth, suggesting React portals without acknowledging that file-system conventions handle layout composition, loading states, and error boundaries more idiomatically.

LIKELY FOLLOW-UPS start with handling a hard refresh. When the intercept no longer applies, the parallel slot renders the full page via its own page.js or default.js. Another follow-up asks how to close the modal and restore the background URL, which is done with router.back or a Link to the parent segment. Interviewers also ask whether each parallel slot can have independent error.js and loading.js files, which is true. Finally, they may ask about metadata implications; the intercepted route can export metadata, but the underlying page layout often controls the primary tags.

ONE CONCRETE EXAMPLE uses a layout.js that accepts children and modal props. The @modal folder contains a default.js returning null. Inside @modal, a (.)photos folder contains an [id] folder with page.js rendering the modal. The main app/photos/[id]/page.js renders the standalone full photo page. Clicking a photo from /photos triggers the intercept and renders inside the @modal slot over the gallery. Visiting /photos/123 directly skips the intercept and renders the full page.