Intercepting routes (.) in NextJS

Introduction

Intercepting routes lets you show extra content or UI without leaving the current page. It helps keep the user experience smooth and fast.

You want to open a sidebar or modal while keeping the main page visible.

You need to show a preview or details panel without a full page reload.

You want to keep some parts of the page stable while changing others.

You want to handle nested navigation inside a section without leaving it.

Syntax

NextJS

app/(group)/page.tsx
app/(group)/@modal/page.tsx

// Use parentheses for route groups
// Use @ prefix for intercepting routes
// Link to intercepting route with dot notation: href="/group.(modal)"

Parentheses () create route groups that don't add to the URL path.

The @ prefix marks a folder as an intercepting route.

Examples

This example shows a dashboard page with a sidebar that opens as an intercepting route.

NextJS

app/dashboard/page.tsx
app/dashboard/@sidebar/page.tsx

// Link to open sidebar: href="/dashboard.(sidebar)"

This example shows a shop page with a modal that appears without leaving the shop page.

NextJS

app/shop/page.tsx
app/shop/@modal/page.tsx

// Link to open modal: href="/shop.(modal)"

Sample Program

This example shows a dashboard page with a link that opens a sidebar as an intercepting route. The sidebar content appears next to the main dashboard content without a full page reload.

NextJS

import Link from 'next/link';

export default function DashboardPage() {
  return (
    <main>
      <h1>Dashboard</h1>
      <nav>
        <Link href="/dashboard.(sidebar)">Open Sidebar</Link>
      </nav>
    </main>
  );
}

// In app/dashboard/@sidebar/page.tsx
export default function Sidebar() {
  return (
    <aside aria-label="Sidebar">
      <h2>Sidebar Content</h2>
      <p>This content appears alongside the dashboard without leaving it.</p>
    </aside>
  );
}

Important Notes

Intercepting routes keep the URL clean and let you show extra UI parts.

Use semantic HTML and ARIA labels for accessibility in intercepting UI like sidebars or modals.

Test in browser DevTools to see how the URL and UI update without full reloads.

Summary

Intercepting routes let you add UI parts without leaving the current page.

Use parentheses and @ folders to set up intercepting routes in Next.js App Router.

They improve user experience by avoiding full page reloads and keeping context.