WEBDASTUDIO
0%
Initializing Global Environment
Loading core modules...
Back to Blog
Development

Next.js App Router: Master Parallel and Intercepting Routes

By Dipanjal Maitra
February 28, 2024
6 min read
Next.js App Router: Master Parallel and Intercepting Routes

Parallel and intercepting routing represents the most significant improvement in user experience architecture in Next.js App Router. Let's look at how to code dynamic overlays that maintain context.

1. Parallel Slots (@folder syntax)

By declaring folder names with the @ prefix, you declare slots that can render concurrently within the same parent layout component. This simplifies complex dashboards containing multiple independent panels (like telemetry and chart controls) that fetch different API sets.

2. Intercepting Routes (..) syntax

Intercepting routes allow you to load a route from another part of your app inside the current layout. For instance, when a user clicks a photo card in a feed, you can intercept the link to display it inside a modal wrapper, while refreshing or deep-linking updates the browser URL to "/photo/[id]" in full page view.

Conclusion

Implementing parallel and intercepting routing routes makes your application behave like a high-performance desktop system. It provides custom entry and escape coordinates, keeping layouts intact.

Share this writeup:

Related Articles