Intercepting and Parallel Routes in Next.js App Router: Explained

Introduction

Next.js is a popular React.js framework that provides powerful routing capabilities. With the release of Next.js 13.4, Next.js App Router has been officially marked as stable.

The Next.js App Router is a new routing system that is built on React Server Components. The App Router provides features like nested routes and layouts, simplified data fetching, streaming, Suspense, and built-in SEO support. Overall, App Router is a great improvement over the previous routing system and makes it easier to build complex and performant applications. For a more in-depth understanding of the App Router, I encourage you to review the Next.js documentation

In this article, we will explore two App Router features: Intercepting Routes and Parallel Routes. I’ll guide you through an example to demonstrate how to effectively implement these features.

Intercepting Routes allows you to capture a route and show it in the context of another route. Parallel Routes allow you to simultaneously render two or more pages in the same view. Using these two features together can be useful for a variety of purposes, such as showing a quick preview of a page, opening a shopping cart in a side modal, or logging in a user.

Intercepting Routes

To use Next.js Intercepting Routes, you can use the (..) naming convention in your folders to match route segments. This is similar to the ../ relative path convention. Their documentation explains this very well. You can use:

(.) to match segments on the same level
(..) to match segments one level above
(..)(..) to match segments two levels above
(...) to match segments from the root app directory

Parallel Routes

Parallel Routes can be used by creating named slots in your application. Slots are defined by folders named with the @ prefix. For example, @modal in the example below. These slots will be passed as props to the layout at the same level. Note that slots are not route segments and do not affect the URL structure.

When using Parallel Routes, it is important to use default.js. This file tells the slot what to render when there is no route match.

Example

This example demonstrates how to build a login experience using the features mentioned above. When the user clicks the login link, a login modal will appear and the address bar will update to /login. When the user hits the back button, the modal will close, and clicking the forward button will reopen the modal. The user will be taken to the login page if the page is refreshed.

In this example, we will focus on the functionality of intercepting routes and parallel routes. We will not go into the specifics of setting up a Next.js project, styling your application, or dissecting the components used. For a more comprehensive understanding, I encourage you to examine the complete source code or explore the demo site.

Folder structure


├ app
│   ├── login
│   │   ├── page.js
│   ├── @modal
│   │   ├── (.)login
│   │   │   ├── page.js
│   │   ├── default.js
│   ├── layout.js
│   ├── page.js
├── components
│   ├── GlobalNav.js
│   ├── LoginForm.js
│   ├── Modal.js
├── package.json
├── README.MD
└── ... all other config files

├ app

│ ├── login

│ │ ├── page.js

│ ├── @modal

│ │ ├── (.)login

│ │ │ ├── page.js

│ │ ├── default.js

│ ├── layout.js

│ ├── page.js

├── components

│ ├── GlobalNav.js

│ ├── LoginForm.js

│ ├── Modal.js

├── package.json

├── README.MD

└── ... all other config files

Folder structure detail:

Login page (app/login/page.js)
Modal app slot (app/@modal) with a default layout (app/@modal/default.js)
Login page route interceptor (app/@modal/(.)login/page.js)
Base layout (app/layout.js)
Home page (app/page.js)
Components: global nav, login form, and modal.

Setting up base layout

Setting up the base layout is important because it is where we set up the modal slot output. This allows the modal parallel route to be output on the page. We grab the modal prop from the RootLayout and output it as {modal}.

app/layout.js


// app/layout.js

import { GlobalNav } from '@/components/GlobalNav';
import './globals.css';

export const metadata = {
  title: 'Next.js - Intercepting Routes',
  description: 'Intercepting Routes Login Demo',
};

export default function RootLayout({ children, modal }) {
  return (
    <html lang="en">
      <body>
        <GlobalNav />
        {children}
        {modal}
      </body>
    </html>
  );
}

// app/layout.js

import { GlobalNav } from '@/components/GlobalNav';

import './globals.css';

export const metadata = {

title: 'Next.js - Intercepting Routes',

description: 'Intercepting Routes Login Demo',

};

export default function RootLayout({ children, modal }) {

return (

<body>

{children}

{modal}

</body>

</html>

);

}

Login Page

The login page is a simple app router page that renders the LoginForm component. This is the same component that will be used later in the login modal.

app/login/page.js


// app/login/page.js

import { LoginForm } from '@/components/LoginForm';

export default function Login() {
  return (
    <main className="max-w-sm mx-auto px-4">
      <h1 className="text-4xl font-bold mb-8 text-center">Login</h1>
      <LoginForm />
    </main>
  );
}

// app/login/page.js

import { LoginForm } from '@/components/LoginForm';

export default function Login() {

return (

<h1 className="text-4xl font-bold mb-8 text-center">Login</h1>

</main>

);

}

Default slot

We want the default output for the modal slot to be nothing. To achieve this, we create a default.js file that returns null. If a default.js file is not present and no route matches, a 404 page will be displayed.

app/@modal/default.js


// app/@modal/default.js

export default function Default() {
  return null;
}

// app/@modal/default.js

export default function Default() {

return null;

}

Login route intercepter

Next, we will talk about the login interceptor. The interceptor starts with a single dot (.) (same level) because route interceptors are based on route segments, not folder structure. Slots folders do not affect URL structure. We could have also named the folder (…)login, as the three dots refer to the root app directory. I am not sure if one is better than the other, but I went with the single dot.

app/@modal/(.)login/page.js


// app/@modal/(.)login/page.js

import { LoginForm } from '@/components/LoginForm';
import Modal from '@/components/Modal';

export default function Login() {
  return (
    <Modal>
      <h1 className="text-4xl font-bold mb-4 text-black">Login</h1>
      <LoginForm inModal />
    </Modal>
  );
}

// app/@modal/(.)login/page.js

import { LoginForm } from '@/components/LoginForm';

import Modal from '@/components/Modal';

export default function Login() {

return (

<Modal>

<h1 className="text-4xl font-bold mb-4 text-black">Login</h1>

</Modal>

);

}

Conclusion

In conclusion, with Next.js 13.4 and subsequent versions, you can use the App Router and its array of great features, including two we discussed in this article: Intercepting Routes and Parallel Routes. These features, among others, are great tools that can significantly enhance your application’s navigation control and user experience.

Resources

Jeremy Sweazy

Staff Software Engineer

Jeremy is a seasoned software engineer with a passion for web development. A largely self-taught and highly motivated professional, Jeremy has been honing his skills in this field for over a decade.