Advanced Routing & Interception
Build sophisticated user experiences using App Router advanced routing primitives: parallel route slots (@slot) and route interception ((.)photo).Construct Instagram and Pinterest style feed-to-modal workflows that provide instant modal overlays on client click while maintaining full-page direct URL shareability.Implement streaming Route Handlers with Server-Sent Events (SSE) and network-level request rewriting from Edge Middleware to Next.js 16 proxy.ts.
Parallel Routes: Dashboards and Conditional Slot Rendering
Parallel Routes allow developers to render one or more independent page slots (@slot) simultaneously within the same parent layout. Each slot can possess its own independent loading and error states, and can be rendered conditionally based on user role or session state without complex client-side conditional logic.
Intercepting Routes: Feed-to-Modal Workflows
Intercepting Routes allow a route to intercept another route within the current layout during client-side navigation, rendering it as an overlay modal while keeping the underlying feed visible. On a hard page refresh or direct URL access, Next.js renders the full standalone page instead. Intercepting routes use relative segment markers: (.) same level, (..) one level up, (..)(..) two levels up, and (...) from the app root.
Dynamic Route Catch-Alls: [...slug] vs [[...slug]]
Catch-all routes [...slug] match one or more subsequent path segments and supply them as a string array. Optional catch-all routes [[...slug]] match zero or more segments, meaning they also match the parent route itself without requiring a separate root page.tsx file.
Route Handlers, Streaming Responses & after() Lifecycle
Route Handlers (route.ts) replace API routes in App Router, supporting web standard Request and Response objects. They can stream AI text generation or large payloads using ReadableStream and Server-Sent Events (SSE). In Next.js 15+, the after() API allows developers to schedule asynchronous side-effects (logging, audit trails, analytics) that execute after the response has finished streaming, without blocking the client response.
Network Routing: Edge Middleware to Next.js 16 proxy.ts
Historically, Next.js utilized middleware.ts running exclusively in the Edge Runtime. In Next.js 16, the network interception model is modernized with proxy.ts. Running in the standard Node.js runtime, proxy.ts removes Edge Runtime restrictions, allowing developers to use native Node.js libraries, full database drivers, and standard networking APIs while handling request rewriting, redirects, and header mutations.