+1 (843) 212-6898+8801897661858
Whatsapp-colorCreated with Sketch.
sales@mediusware.comSchedule A Call
Logo
Company
Services
Hire Developers
Industries
Case StudySTART FREE TRIALicon

About

Who We Are

Our Team

Blogs

Women Empowerment

Career

CSR

Delivery Models

Engagement Model

Services

Software Development

Web Development

Mobile App Development

E-commerce Development

Software Development

Enterprise Solutions

UI/UX Design

API Integration

Technology

React.js

Vue.js

Angular js

Laravel

Android

Flutter

iOS

React Native

Hire Developers

Hire Mobile App Developers

Hire Front-end Developers

Hire Backend Developers

Hire E-commerce Developers

Hire Developers

Hire Android Developers

Hire iOS Developers

Hire Swift Developers

Hire Flutter Developers

Hire React Native Developers

Hire Django Developers

Hire Node.js Developers

Hire Laravel Developers

We shape the art of technology
Headquarter

Headquarter

1050 Johnnie Dodds Blvd Mount Pleasant South Carolina USA ,Zip- 29464

sales@mediusware.io

+1 843-212-7149

Bangladesh Office

Bangladesh Office

24/1, Taj Mahal Road, Shiya Masjid mor, Floor - 8th & 9th, Ring Road, 1207, Dhaka, Bangladesh

sales@mediusware.com

+8801897661858

© 2025 Mediusware. All Rights Reserved

Terms & ConditionsPrivacy Policy

Table of contents

  1. Intercepting Routes in Next.js: A New Routing Paradigm
  2. What are Intercepting Routes?
  3. Soft Navigation in Intercepting Routes
  4. Hard Navigation in Intercepting Routes
  5. Defining Intercepting Routes with the (..) Convention
  6. Building Modals with Intercepting Routes and Parallel Routes
  7. Practical Use Cases for Intercepting Routes
  8. Conclusion
Share This Blog !
Get the best of our content straight to your inbox!

Don’t worry, we don’t spam!

Intercepting Routes in Next.js: A New Routing Paradigm

Intercepting Routes in Next.js: A New Routing Paradigm image

Last Update: 15 Oct 2024

Intercepting Routes in Next.js: A New Routing Paradigm

Intercepting routes in Next.js introduces a flexible way to load content from one route without disrupting the current layout. This is especially helpful in scenarios where you want to maintain context while showcasing additional content, like displaying a photo in a modal without leaving the feed. Let’s explore how intercepting routes work and their benefits for soft and hard navigation.

What are Intercepting Routes?

Intercepting routes allow you to display content from another part of your application within the current view, keeping the user’s context intact. For example, if you have a photo feed, clicking on a photo might display it in a modal overlay, instead of taking the user to a different page entirely. This preserves the underlying feed and enhances the user experience by keeping navigation smooth and seamless.

Soft Navigation in Intercepting Routes

Soft navigation refers to how Next.js handles intercepting routes when a user interacts with content while staying in the current view. For example, if you click on a photo in a feed, the modal opens without fully transitioning to the photo page. The URL is masked, but the route behaves as an overlay, giving the user access to the same content without navigating away from the feed.

Hard Navigation in Intercepting Routes

On the other hand, hard navigation comes into play when the user accesses the same content from an external link or refreshes the page. In this scenario, the modal is not opened. Instead, the user is taken directly to the photo page, and Next.js fully renders the photo route without any interception.

Defining Intercepting Routes with the (..) Convention

Next.js introduces a specific convention for intercepting routes: the (..) matcher. This allows you to specify how routes should be intercepted and how content from different segments should be loaded. Here’s how it works:

  • (.): Matches segments on the same level.
  • ( .. ): Matches segments one level higher.
  • ( .. )( .. ): Matches segments two levels higher.
  • ( ...): Matches segments from the root app directory.

For instance, you can intercept a photo route inside a feed by creating a ( .. )photo directory. This system uses route segments rather than file-system paths, making the routing more dynamic and intuitive.

content image

Building Modals with Intercepting Routes and Parallel Routes

One of the most common use cases for intercepting routes is building modals. By combining intercepting routes with Parallel Routes, you can solve common challenges related to modals, such as:

  1. Making Modal Content Shareable: Users can share the modal's URL, allowing others to view the content in a modal context.
  2. Preserving Context on Refresh: When the page is refreshed, the modal stays open instead of closing and reverting to the previous route.
  3. Handling Backward and Forward Navigation: Navigating back closes the modal, while moving forward reopens it, providing a smooth browsing experience.

For example, if a user opens a photo modal from a gallery, they should be able to navigate back to the gallery or forward to the modal view without disrupting the flow.

Practical Use Cases for Intercepting Routes

Intercepting routes are not limited to photo galleries. Other common examples include:

  • Login Modals: You might want to open a login modal from the navbar while having a dedicated /login page for users who navigate directly to the login form.
  • Shopping Cart Modals: Open a shopping cart as a side modal while still providing a dedicated cart page for direct navigate.
    1. Login Modal Intercepting Example

    Let's set up the login modal that can be opened from the navbar and also have a dedicated /login page.

    Folder Structure:


    app/
    ├── layout.js
    ├── login/
    │   ├── page.js
    │   └── modal.js
    ├── (..)/login/modal.js

    //layout.js (Main layout with intercepting routes for login modal)
    
    
    // app/layout.js
    import { useRouter } from 'next/router';
    
    export default function Layout({ children }) {
      const router = useRouter();
    
      return (
        <html>
          <body>
            {/* Navbar with login button */}
            <header>
              <button onClick={() => router.push('/login')}>Login</button>
            </header>
            
            {/* Content */}
            <main>{children}</main>
    
            {/* Modal Route Handling */}
            {router.pathname === '/login' && (
              <LoginModal onClose={() => router.back()} />
            )}
          </body>
        </html>
      );
    }
    
    //login/modal.js (Login Modal)
    // app/login/modal.js
    export default function LoginModal({ onClose }) {
      return (
        <div className="modal-overlay">
          <div className="modal-content">
            <h2>Login</h2>
            <form>
              <label>Email:</label>
              <input type="email" required />
              
              <label>Password:</label>
              <input type="password" required />
              
              <button type="submit">Login</button>
            </form>
            <button onClick={onClose}>Close</button>
          </div>
        </div>
      );
    }
    
    //login/page.js (Dedicated Login Page)
    // app/login/page.js
    export default function LoginPage() {
      return (
        <div>
          <h2>Login Page</h2>
          <form>
            <label>Email:</label>
            <input type="email" required />
            
            <label>Password:</label>
            <input type="password" required />
            
            <button type="submit">Login</button>
          </form>
        </div>
      );
    }
    

    In this setup, when the user clicks on the login button in the navbar, the login modal will appear via route interception (/login). However, if the user directly navigates to /login, the full page version of the login form will be displayed.



    2. Shopping Cart Modal Intercepting Example

    Similarly, let’s create a shopping cart modal that opens as a side modal but also has a dedicated /cart page.
    Folder Structure:
    app/
    ├── layout.js
    ├── cart/
    │   ├── page.js
    │   └── modal.js
    ├── (..)/cart/modal.js

    // layout.js (Main layout with intercepting routes for cart modal)
    // app/layout.js
    import { useRouter } from 'next/rou ter';
    
    export default function Layout({ children }) {
      const router = useRouter();
    
      return (
        <html>
          <body>
            {/* Navbar with cart button */}
            <header>
              <button onClick={() => router.push('/cart')}>Open Cart</button>
            </header>
            
            {/* Content */}
            <main>{children}</main>
    
            {/* Cart Modal Route Handling */}
            {router.pathname === '/cart' && (
              <CartModal onClose={() => router.back()} />
            )}
          </body>
        </html>
      );
    }
    //cart/modal.js (Cart Modal)
    
    // app/cart/modal.js
    export default function CartModal({ onClose }) {
      return (
        <div className="modal-overlay">
          <div className="modal-content">
            <h2>Your Shopping Cart</h2>
            {/* Cart items here */}
            <button onClick={onClose}>Close</button>
          </div>
        </div>
      );
    }
    //cart/page.js (Dedicated Cart Page)
    
    // app/cart/page.js
    export default function CartPage() {
      return (
        <div>
          <h2>Shopping Cart</h2>
          {/* Cart items and checkout options */}
        </div>
      );
    }
    

    Here, when the user clicks on "Open Cart" in the navbar, the shopping cart modal opens without leaving the current page. But if the user directly navigates to /cart, the dedicated full-page version of the cart is displayed.



Conclusion

Intercepting routes offer an elegant way to enhance user experience in Next.js by enabling smooth transitions and preserving context. Whether it’s displaying modals, sharing content through URLs, or managing complex navigation flows, intercepting routes provide the flexibility needed to build modern web applications. As you explore this routing paradigm, consider how it can improve your app’s navigation and user interface, ensuring a seamless and dynamic experience for your users.

Trendingblogs
The Software Development Life Cycle (SDLC): A Complete Guide for Software Success image

The Software Development Life Cycle (SDLC): A Complete Guide for Software Success

Zustand: A Lightweight State Management Library for React image

Zustand: A Lightweight State Management Library for React

From Bugs to Beauty: Integrating UI/UX Testing into Software Quality Assurance image

From Bugs to Beauty: Integrating UI/UX Testing into Software Quality Assurance

Why is a Gaming PC the Ultimate Tool for Both Gaming and Professional Development? image

Why is a Gaming PC the Ultimate Tool for Both Gaming and Professional Development?

Why React Native is the Best Choice for Cross-Platform Development image

Why React Native is the Best Choice for Cross-Platform Development

Let's Deep Dive Into Threads with Rust image

Let's Deep Dive Into Threads with Rust

Get the best of our content straight to your inbox!

Don’t worry, we don’t spam!

Frequently Asked Questions