What is intercepting routes in nextjs 14 ?

Intercepting routes allows you to load a route from another part of you application whithin the current layout (context).
This routing paradigm can be useful when you want to display the content of route without switching the context.
For instance, any preview modal (dialog) overlaying the current context page. you can preview the context of another page in the current context (e.g., login modal).

Example of login modal

Think of a navigation bar that has a /login to log in. This usually directs users to the entire /login page. By using intercepting routes, you can make the link shareable and guarantee that the entire /login page appears on page reloads or direct accesses. You can display a login modal while the URL reflects /login.

loginExample

Example of Photo Feed

For example, when clicking on a photo in a feed, you can display the photo in a modal overlaying the feed. In this case, Next.js intercepting the /photo/123 route masks the URL and overlays it over /feed.

photoFeedExample

However, when navigating to the photo by clicking a shareable URL or by refreshing the page, the entire photo page should render instead of the modal. No route interception should occur.

Defining Intercepting Routes in Next.js

Setting Up Basic Navigation

Create a simple two-page navigation setup:

app/folder1/page.tsx: Represents the route localhost:3000/folder1
app/folder1/folder2/page.tsx: Represents the route localhost:3000/folder1/folder2.

Add a link in folder1's page.tsx to navigate to folder2. In the browser, navigating to localhost:3000/folder1 shows the folder1 page with a link to folder2.

// app/folder1/page.tsx
import Link from 'next/link';
 
export default function Folder1() {
  return (
    <>
      <h1>Folder1 page</h1>
      <div>
        <Link href="/folder1/folder2">Folder2</Link>
      </div>
    </>
  );
}

// app/folder1/folder2/page.tsx
 
export default function Folder2() {
  return <h1>Folder2 page</h1>;
}

Clicking the folder2 link typically takes you to localhost:3000/folder1/folder2. However, with intercepting routes we can change that behavior.

Intercepting routes conventions

Intercepting routes can be defined with the (..) convention, which is similar to relative path convention ../ but for segments.

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

For example, you can intercept the photo segment from whithin the feed segment by creating a (..)photo directory.

folderStructure

Conclusion

Intercepting routes in Next.js is a powerful feature that enhances the flexibility and user experience of web applications. It allows displaying content from different parts of the app without changing the context for the user. This concept can be slightly complex, but with practice, it becomes a valuable tool in your development kit.

Next js 14 intercepting routes