{"id":33603,"date":"2024-04-30T07:00:00","date_gmt":"2024-04-30T14:00:00","guid":{"rendered":"https:\/\/cloudinary.com\/blog\/?p=33603"},"modified":"2025-04-16T13:14:55","modified_gmt":"2025-04-16T20:14:55","slug":"image-gallery-next-js-parallel-intercepting-routes","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/image-gallery-next-js-parallel-intercepting-routes","title":{"rendered":"Build an Image Gallery: Next.js Parallel and Intercepting Routes"},"content":{"rendered":"

Designing a website entails overseeing an extensive collection of visuals. Managing this diverse range of images while keeping them current presents a significant challenge for development teams.<\/p>\n

In this blog post, we\u2019ll address a typical UI pattern where users can interact with images in a gallery through client-side navigation or access them directly via shareable URLs. By leveraging Cloudinary Digital Asset Management solutions together with the latest features of Next.js (parallel and intercepting routes), we\u2019ll explore how these functionalities can be combined to address typical challenges encountered when implementing modal interfaces, including:<\/p>\n

Enabling modal content to be shareable via URL links.\nMaintaining context when the page is refreshed rather than closing the modal.\nImplement modal closure during backward navigation instead of returning to the previous route.\nFacilitating modal reopening during forward navigation.<\/p>\n

Next.js App Router<\/h2>\n

In version 13, Next.js introduced a new App Router built on React Server Components<\/a>. This router supports shared layouts, nested routing, loading states, error handling, and more.<\/p>\n

The App Router works in a new directory named app<\/code>.<\/p>\n

\"next.js<\/p>\n

Creating a page.tsx<\/code> file inside the app\/main-page<\/code> folder allows you to define what users will see when they navigate to \/main-page<\/code>. So folder names inside the app directory define your app routes.<\/p>\n

Creating nested routes is simple, you just have to follow this folder pattern:<\/p>\n

\"next.js<\/p>\n

In this case, the URL of your page will be \/main-page\/nested-page<\/code>.<\/p>\n

Exploring Next.js Parallel and Intercepting Routes<\/h2>\n

Parallel Routes<\/strong> in Next.js allow for the simultaneous rendering of multiple pages or sections within the same layout. They are particularly useful for dynamic areas of an application, such as dashboards or social media feeds.<\/p>\n

You use named slots defined with the @folder convention to create parallel routes. For instance, if you have slots for left and right page sections, you\u2019d define them as @left and @right.<\/p>\n

\"next.js<\/p>\n

These slots are then passed as props to the shared parent layout component, which can render them alongside the main content.<\/p>\n

\"next.js<\/p>\n

It\u2019s important to note that slots don\u2019t affect the URL structure. Even if you have a slot like @left, the URL won\u2019t change to include that slot name.<\/p>\n

By default, Next.js manages each slot\u2019s active state. During client-side navigation, it updates the content within a slot without affecting the other slots. However, Next.js may render a default component for unmatched slots during a full-page reload or display a 404 error if no default component is defined.<\/p>\n

You can define a default component as a fallback to handle unmatched slots during initial loads or full-page reloads. This ensures a consistent user experience even when navigating between different application sections.<\/p>\n

\"next.js<\/p>\n

Intercepting routes<\/strong> in Next.js enables loading a route from another part of the application within the current layout. This approach proves beneficial when you aim to seamlessly display route content without disrupting the user\u2019s context.<\/p>\n

For instance, suppose you click a photo in a feed. Instead of navigating to a separate page, the photo appears in a modal overlaying the feed. Next.js intercepts the photo route, conceals the URL, and presents the content within the existing feed layout.<\/p>\n

However, when accessing the photo via a shareable URL or refreshing the page, the entire photo page should render independently, bypassing route interception.<\/p>\n

Intercepting routes utilize the (..) convention. This convention allows you to match segments at different levels:<\/p>\n