Test Next.js intercepted-route navigation before outsourcing a modal workflow

The same URL has two legitimate entrances

An intercepted route may display a product, message, or image inside a modal when a visitor starts on a collection page. A clean visit to that resource URL should produce a complete page. Write both journeys before anyone moves route folders. Include the starting page, visible heading, address bar, background content, close action, and destination after close. The folder convention is not the specification. The visitor’s route through the product is. A reviewer should be able to describe the intended result without knowing how parallel route slots work.

Create two synthetic resources with names that cannot be confused. Open the first from the collection, copy its address, and paste that address into a clean browser context. Disable JavaScript and repeat the direct visit. The test should expose whether the resource has durable content of its own or exists only as client-side overlay state. Record the server response, heading, canonical address, and available controls for each entrance. If direct entry needs a different layout, identify the content shared by both presentations and the controls that belong only to the modal.

A close icon cannot define browser history

Many modal implementations call router.back(). That can be correct after an in-app open and surprising after a copied link, restored tab, or visit from another domain. Build a short history table for an in-app open, direct entry, new tab, refresh while open, item-to-item navigation, and an external referrer. Decide whether close returns to a known collection, replaces the current entry, or follows browser history. Those options have different consequences. The product owner must choose instead of leaving the developer to infer policy from the easiest API call.

Walk the table with both application controls and browser Back and Forward. Open item A, move to item B if the interface supports it, go back twice, move forward, refresh, and close. After every action, capture the visible item, address, scroll position, and focused element. A smooth animation can hide a stale URL. A correct URL can accompany a background page scrolled to the wrong place. The trace matters more than a final screenshot because navigation defects live in the sequence of states.

The overlay must behave like a dialog, not merely resemble one

Check where focus moves on open, whether keyboard users can reach the background, how Escape behaves, and where focus returns. Give the dialog an accessible name and verify it through the accessibility tree. Enlarge text and use a narrow viewport so the close control and main content remain reachable. If the page persists behind the modal, confirm that assistive technology does not announce two competing main regions. These checks belong in the ticket; installing a dialog component does not prove the integration uses it correctly.

Observe mounts and focus changes rather than rebuilding the route until the symptoms disappear. Add temporary diagnostics in the test branch if needed, then remove them. Test a slow resource response and a failed response while the modal shell is present. The loading state needs a stable name, and the error must offer an exit that returns somewhere safe. Focus should not fall to the document body when a suspended subtree resolves or fails. Report actual targets and keystrokes instead of saying the workflow is accessible.

Direct entry owns metadata, authorization, and failure outcomes

Open a valid resource, a missing identifier, and a resource the synthetic user cannot view. The direct page needs a truthful title, description, canonical address, and status for each outcome. A missing item must not retain the previous item’s social preview. A denied item must not reveal a private title in metadata, prefetched payloads, or the list visible behind an overlay. Sign out with the modal open and switch between two synthetic accounts to see whether prefetched content survives an identity boundary.

The review package should contain the route map, history table, keyboard trace, direct-page HTML and metadata, unavailable-item cases, production-build result, and any hosting assumption that could change prefetch behavior. Keep the first assignment to one resource and one originating collection. Analytics naming, canonical policy, and release timing remain owner decisions. If reviewers disagree about what Close means, stop and settle that behavior before adding more intercepted routes. A clear navigation contract prevents a clever routing structure from becoming an untestable product rule.

Run the route as a sequence of observable contracts

Turn the route map into an acceptance run that another person can reproduce. Begin on the collection with item A below the fold, record the scroll offset, open A, and note the URL, document title, modal name, focused control, background state, and network requests. Move to item B without closing if that action exists. Use Back, then Forward, then the visible close control. Repeat after a hard refresh on B. The expected trace should distinguish history movement from a product command. It should also say whether closing restores A's trigger, the collection heading, or another deliberate focus target. Test mobile viewport resizing and reduced motion because an animation or fixed body can alter scroll restoration. Capture the server response for A and B independently so a client transition cannot conceal an incomplete full-page route. This evidence lets a reviewer identify the exact transition that broke instead of approving a video that only shows the final screen.

Add adversarial cases after the ordinary trace passes. Paste a malformed identifier, remove access while the overlay is open, and navigate from a search result whose referrer is outside the application. Open the link in a new tab, duplicate that tab, and restore it after closing the browser. If the route includes share or copy controls, verify they emit the durable page URL rather than an internal slot address. Check that analytics records one resource view under an agreed rule instead of counting the background page and modal as two unrelated visits. Inspect the production build output for accidental client-only rendering of metadata or authorization decisions. Finally, write a compact regression test at the boundary most likely to fail: router-level tests for history and full browser tests for focus and server entry. The owner should be able to approve each row without reading framework syntax. That is the useful outsourcing boundary: implementation remains flexible, while URL meaning, privacy, accessibility, and recovery behavior remain explicit.

Buyer questions

Questions about planning the role