Mastering Next.js Intercepting Routes: Unlocking Seamless UI Transitions

🚀 Introduction

Next.js 13 introduced Intercepting Routes, a powerful feature that allows us to enhance user experience by keeping the current page visible while rendering modals, panels, or popups. This technique is perfect for cases like in-app notifications, media previews, and profile editing without full-page navigation.

In this guide, we’ll explore three real-world scenarios where intercepting routes can be a game-changer.

1️⃣ Scenario: In-App Notifications Panel

Use Case:

Clicking on a notification should open a notification details panel without navigating away from the current page.

🔧 Implementation

Notification Bell Component (app/components/NotificationBell.tsx)

"use client";
import Link from "next/link";

export default function NotificationBell() {
  return (
    <div>
      <Link href="/notifications" as="/notifications/panel">
        <button className="p-2 bg-blue-500 text-white rounded">🔔 Notifications</button>
      </Link>
    </div>
  );
}

Notification Panel Route (app/notifications/panel.tsx)

"use client";
import { useRouter } from "next/navigation";

export default function NotificationPanel() {
  const router = useRouter();

  return (
    <div className="fixed right-0 top-0 w-80 h-full bg-white shadow-lg p-4">
      <h2 className="text-lg font-bold">Notifications</h2>
      <p>New messages, updates, and alerts will appear here.</p>
      <button className="mt-4 px-4 py-2 bg-red-500 text-white rounded" onClick={() => router.back()}>
        Close
      </button>
    </div>
  );
}

✅ How It Works

• Clicking the Notification Bell opens the notification panel (/notifications/panel).
• The main page remains visible while the panel overlays it.

2️⃣ Scenario: Image or Video Preview

📝 Use Case:

Clicking on an image should open a fullscreen media preview modal instead of navigating to a new page.

🔧 Implementation

Gallery Page (app/gallery/page.tsx)

"use client";
import Link from "next/link";

export default function GalleryPage() {
  return (
    <div>
      <h1>Gallery</h1>
      <ul>
        {["image1", "image2", "image3"].map((id) => (
          <li key={id}>
            <Link href={`/gallery/${id}`} as={`/gallery/${id}/preview`}>
              <img src={`/images/${id}.jpg`} alt={id} className="w-32 h-32 cursor-pointer" />
            </Link>
          </li>
        ))}
      </ul>
    </div>
  );
}

Preview Modal Route (app/gallery/[id]/preview.tsx)

"use client";
import { useRouter } from "next/navigation";

export default function ImagePreview({ params }: { params: { id: string } }) {
  const router = useRouter();

  return (
    <div className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-80">
      <img src={`/images/${params.id}.jpg`} alt={params.id} className="max-w-full max-h-full" />
      <button className="absolute top-4 right-4 text-white text-xl" onClick={() => router.back()}>
        ✖ Close
      </button>
    </div>
  );
}

✅ How It Works

• Clicking an image thumbnail opens a fullscreen modal (/gallery/image1/preview).
• Pressing Close (✖) restores the gallery page.

3️⃣ Scenario: Context-Based Form Editing

📝 Use Case:

Clicking Edit Profile should open a form inside a modal without leaving the profile page.

🔧 Implementation

Profile Page (app/profile/page.tsx)

"use client";
import Link from "next/link";

export default function ProfilePage() {
  return (
    <div>
      <h1>My Profile</h1>
      <p>Name: John Doe</p>
      <p>Email: [e-mail]</p>
      <Link href="/profile/edit" as="/profile/edit/modal">
        <button className="mt-4 px-4 py-2 bg-blue-500 text-white rounded">Edit Profile</button>
      </Link>
    </div>
  );
}

Edit Profile Modal (app/profile/edit/modal.tsx)

"use client";
import { useRouter } from "next/navigation";

export default function EditProfileModal() {
  const router = useRouter();

  return (
    <div className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50">
      <div className="bg-white p-6 rounded-lg shadow-lg w-96">
        <h2 className="text-xl font-semibold">Edit Profile</h2>
        <input type="text" placeholder="Name" className="block w-full border p-2 my-2" />
        <input type="email" placeholder="Email" className="block w-full border p-2 my-2" />
        <button className="mt-4 px-4 py-2 bg-green-500 text-white rounded">Save</button>
        <button className="mt-4 px-4 py-2 bg-red-500 text-white rounded ml-2" onClick={() => router.back()}>
          Cancel
        </button>
      </div>
    </div>
  );
}

✅ How It Works

• Clicking Edit Profile opens a form modal (/profile/edit/modal).
• Clicking Cancel restores the original profile page.

🎯 Conclusion

Intercepting routes in Next.js enhance user experience by keeping content visible while allowing seamless navigation. Whether it's notifications, media previews, or form modals, this approach ensures smooth transitions without full-page reloads.

🚀 Start implementing these patterns in your Next.js projects today and build modern, dynamic web applications!