Next.js 15 Tutorial - 33 - Intercepting Routes

The App Router in Revive Coding has brought several powerful routing patterns to the table, enhancing how we build dynamic web applications. After exploring parallel routes, it's time to dive deep into Intercepting Routes — an advanced technique that lets you load routes from other parts of your app within the current layout without losing user context.

In this blog, we'll break down intercepting routes into two digestible parts:

Understanding the core concepts and conventions behind intercepting routes
Putting these concepts to practical use with code examples

What Are Intercepting Routes?

Intercepting routes allow you to load a route from elsewhere in your application inside your current page layout — making it possible to display new content while keeping your user anchored in the same UI context.

Why is this useful?

Imagine a login flow: traditionally, clicking a login link takes you to a completely new page. With intercepting routes, you can open a login modal instead — the URL updates to /login, so sharing or refreshing the URL still works as expected, but the user doesn’t leave the current page visually.

Similarly, in a photo gallery, clicking on a photo could open an enlarged modal showing photo details without navigating away, while the URL updates to match the photo's unique path, making sharing easy and direct access possible.

Setting Up the Basics: Folder Structure

Let's start with a simple folder structure inside the /app directory:

/app/F1/page.tsx — displays an <h1>F1 Page</h1>
/app/F1/F2/page.tsx — displays an <h1>F2 Page</h1>

Here, F2 is nested inside F1. Navigating to /f1 shows the F1 page with a link to /f1/f2, which shows the F2 page.

How Intercepting Routes Work: The Core Concept

The key idea is:

Source folder: Where you navigate from
Target folder: Where you want to go

You create a folder inside the source that matches the target folder's name with a special prefix. This prefix tells Revive Coding that this is an intercepting route.

Intercepting Route Conventions

There are four main conventions to declare intercepting routes, based on folder hierarchy:

1. Same Level Folder `(.)`

When source and target are on the same folder level, prefix the intercepting folder with (.).

Example: Intercept /f1/f2 by creating /app/F1/(.)F2/page.tsx. This folder contains the intercepted content.

2. One Level Up `(..)`

When the target is one level above the source, use ( .. ).

Example: To intercept /f3 from /f1, create /app/F1/(..)F3/page.tsx.

3. Two Levels Up `(..)(..)`

When the target is two levels above the source, use ( .. )( .. ).

Example: To intercept /f4 from /f2, create /app/F2/(..)(..)F4/page.tsx.

4. Root Level `(…)`

To intercept routes starting from the root app directory, use ( … ).

Example: To intercept /f5 from /f2/innerF2, create /app/F2/(…)F5/page.tsx.

Practical Benefits of Intercepting Routes

Maintain user context: Show alternate UI without losing the current layout.
Clean URLs: URLs stay meaningful and shareable even when showing modals or overlays.
Modular code: Keep routing logic simple and maintainable.
Flexible UX: Seamlessly integrate complex navigation flows like login modals or photo galleries.

Try It Yourself!

Experimenting with intercepting routes is the best way to understand their power. Set up your folder structure, implement these prefixes, and watch how your app can render different UI components without losing navigation context.

Wrapping Up

Intercepting routes may seem complex initially, but once you grasp the simple prefix conventions and folder structuring, they become a powerful tool in your routing arsenal.

Here's a quick cheat sheet recap:

Convention	Meaning	Prefix Syntax
Same level	Current folder	`(.)`
One level up	Parent folder	`(..)`
Two levels up	Grandparent folder	`(..)(..)`
From root directory	Root app directory start	`(…)`

By mastering intercepting routes, you enhance both your app’s functionality and user experience dramatically.

Slide 1:

Title: Advanced Routing Patterns in Revive Coding
🚀 Intercepting Routes Deep Dive

We’ve learned Parallel Routes
Now, let's explore Intercepting Routes
Split into: Core Concepts & Practical Demo

Slide 2:

What are Intercepting Routes?
🔍 Advanced routing technique

Load route content from elsewhere within current layout
Keep user in same UI context
Update URL to keep pages shareable & refreshable

Slide 3:

Real-World Examples
💡 Login flow:

Show modal login instead of full page
URL updates to /login
📸 Photo gallery:
Show enlarged photo in modal
URL matches specific photo
Share & direct access works perfectly

Slide 4:

Folder Setup - Base Pages
🗂 Folder structure example:

/app
  /F1
    page.tsx  (returns <h1>F1 page</h1>)
    /F2
      page.tsx  (returns <h1>F2 page</h1>)

👆 Navigate /f1 → /f1/f2 shows F2 page normally.

Slide 5:

Intercepting Route Basics
🔗 Source Folder: Where you start (e.g. F1)
🎯 Target Folder: Where you want to go (e.g. F2)

Create intercepting folder inside source with special prefix
Prefix tells Next.js this is an intercepting route

Slide 6:

Intercepting Route Convention #1: Same Level Folder
📂 Folder name syntax: (.)F2

// /app/F1/(.)F2/page.tsx
export default function InterceptedF2() {
  return <h1>(.) F2 Intercepted Page</h1>;
}

Restart server
Navigate /f1/f2 → Shows intercepted content
Refresh → loads original /f1/f2 page

Slide 7:

Intercepting Route Convention #2: One Level Up
⬆️ Use ( .. ) to go up one folder
Example: Intercept /f3 from /f1

/app
  /F3
    page.tsx (returns <h1>F3 page</h1>)
  /F1
    /(..)F3
      page.tsx (intercepted F3 page)

Navigating /f1/f3 shows intercepted content
Refresh → original /f3 page

Slide 8:

Intercepting Route Convention #3: Two Levels Up
⬆️⬆️ Use ( .. )( .. ) to go up two levels
Example: Intercept /f4 from /f2

// /app/F2/(..)(..)F4/page.tsx
export default function InterceptedF4() {
  return <h1>(..)(..) F4 Intercepted Page</h1>;
}

Navigate /f1/f2/f4 → shows intercepted content
Refresh → original /f4 page

Slide 9:

Intercepting Route Convention #4: Root-Level Match
🌳 Use ( ... ) to match from root /app
Example: Intercept /f5 from /f2/innerF2

// /app/F2/(... )F5/page.tsx
export default function InterceptedF5() {
  return <h1>(...) F5 Intercepted Page</h1>;
}

Navigate /f1/f2/innerF2/f5 → intercepted content
Refresh → original /f5 page

Slide 10:

Summary: Intercepting Route Conventions

Use Case	Folder Prefix	Meaning
Same level	`(.)`	Current folder
One level up	`(..)`	Parent folder
Two levels up	`(..)(..)`	Grandparent folder
Root-level match	`(...)`	From root `/app` folder

Slide 11:

Why Use Intercepting Routes?
✨ Benefits:

Show modal or alternate UI without losing context
Keep URLs shareable and refreshable
Cleaner UX with fewer full page reloads
Modular, maintainable routing architecture

Slide 12:

Try It Yourself!
👨‍💻 Setup your folders
🛠️ Implement intercepting routes with the conventions
🔄 Test navigation and refresh behavior
🎯 Master this powerful Next.js routing pattern

Slide 13:

Thank You!
👍 Like & Subscribe to support the channel!
🚀 Keep exploring Revive Coding advanced features!

Slide 1: Advanced Routing Patterns in Revive Coding 🚀 Intercepting Routes Deep Dive

Hindi Script:
नमस्कार दोस्तों! आज हम Revive Coding में Advanced Routing Patterns के बारे में बात करेंगे।
पहले हमने Parallel Routes के बारे में जाना था।
अब हम Intercepting Routes को डीटेल में समझेंगे।
यह प्रेजेंटेशन दो भागों में होगा — सबसे पहले हम Core Concepts समझेंगे, और फिर Practical Example देखेंगे।
तो चलिए शुरुआत करते हैं!

Slide 2: What are Intercepting Routes? 🔍

Hindi Script:
Intercepting Routes एक एडवांस्ड Routing तकनीक है।
इसमें हम किसी दूसरी जगह का Route, अपने वर्तमान Layout के अंदर लोड कर सकते हैं।
यानी यूजर अपनी जगह से मूव किए बिना नई कंटेंट देख सकता है।
URL भी अपडेट होता रहता है, जिससे पेज शेयर करना और रिफ्रेश करना आसान होता है।
आगे हम इसे और विस्तार से समझेंगे।

Slide 3: Real-World Examples 💡

Hindi Script:
चलो कुछ रियल वर्ल्ड Examples देखते हैं।
पहला — Login Flow:
अगर यूजर Login लिंक पर क्लिक करे, तो पूरी नई पेज की जगह एक Modal दिखाएं, लेकिन URL अपडेट हो /login पर।
दूसरा — Photo Gallery:
जब कोई फोटो क्लिक करता है, तो dedicated page पर न जाकर, modal में फोटो enlarged दिखाएं।
URL में फोटो का नाम आ जाए ताकि उसे शेयर किया जा सके।
ये UX को बेहतर बनाता है।

Slide 4: Folder Setup - Base Pages 🗂

Hindi Script:
अब हम Folder Structure को Setup करेंगे।
हमारे पास /app folder में दो folder हैं — F1 और F2.
F1 में एक page.tsx है जो <h1>F1 Page</h1> दिखाता है।
और F2 में भी एक page.tsx है जो <h1>F2 Page</h1> दिखाता है।
यह बेसिक setup है, जिसे हम आगे बढ़ाएंगे।

Slide 5: Intercepting Route Basics 🔗

Hindi Script:
Intercepting Routes के दो मुख्य पार्ट होते हैं — Source Folder और Target Folder।
Source वो जगह है जहां से हम नेविगेट कर रहे हैं।
Target वो जगह है जहां हम जाना चाहते हैं।
हम Source Folder में Target Folder जैसा एक नया फोल्डर बनाएंगे, जिसमें एक खास prefix होगा।
यह prefix Next.js को बताता है कि यह Intercepting Route है।

Slide 6: Intercepting Route Convention #1: Same Level Folder 📂

Hindi Script:
पहली Convention — जब Source और Target Folder एक लेवल पर हों।
इसमें हम folder का नाम (.)F2 जैसे लिखेंगे।
यह Next.js को बताता है कि ये current folder के बराबर है।
यहाँ हमने /app/F1/(.)F2/page.tsx बनाया है, जो intercepted content दिखाता है।
जब आप /f1/f2 पर जाएं, तो intercepted content दिखेगा।
लेकिन रिफ्रेश करने पर original page वापस आ जाएगा।

Slide 7: Intercepting Route Convention #2: One Level Up ⬆️

Hindi Script:
दूसरी Convention — जब Target Folder एक लेवल ऊपर हो।
इसमें हम ( .. ) prefix का इस्तेमाल करते हैं।
जैसे हम /f3 को /f1 से intercept कर रहे हैं।
Source के अंदर ( .. )F3 folder बनाते हैं।
इससे URL और इंटरसेप्टेड कंटेंट को नियंत्रित किया जाता है।
रिफ्रेश करने पर फिर से ओरिजिनल कंटेंट आएगा।

Slide 8: Intercepting Route Convention #3: Two Levels Up ⬆️⬆️

Hindi Script:
तीसरी Convention — जब Target Folder दो लेवल ऊपर हो।
इसके लिए हम ( .. )( .. ) का prefix इस्तेमाल करते हैं।
जैसे /f4 को /f2 से intercept करना।
यह prefix दो बार ऊपर जाने को दर्शाता है।
यह बहुत उपयोगी होता है जब आपकी Folder स्ट्रक्चर गहरी हो।
यहाँ भी रिफ्रेश पर ओरिजिनल पेज वापस आएगा।

Slide 9: Intercepting Route Convention #4: Root-Level Match 🌳

Hindi Script:
चौथी Convention — जब हम Root app directory से match करना चाहते हैं।
इसके लिए ( ... ) prefix का इस्तेमाल करते हैं।
जैसे /f5 को /f2/innerF2 से intercept करना।
यह हमें root से कोई भी segment match करने की सुविधा देता है।
इससे भी यूजर को बेहतर UX मिलता है, और URL shareable रहता है।

Slide 10: Summary: Intercepting Route Conventions

Hindi Script:
अब हम पूरी Conventions का सारांश देखेंगे।

Same Level: (.) — Current Folder
One Level Up: (..) — Parent Folder
Two Levels Up: (..)(..) — Grandparent Folder
Root Level: (...) — From Root App Directory
यह सिंपल Prefix Rules हमें complex routing scenarios को आसान बनाते हैं।

Slide 11: Why Use Intercepting Routes? ✨

Hindi Script:
Intercepting Routes के फायदे बहुत हैं:

बिना Context खोए, अलग UI दिखाना
URLs को साफ़ और शेयर करने योग्य बनाना
बेहतर User Experience और तेज़ी से Content लोड करना
Modular और Maintainable Routing Architecture बनाना
ये Features modern apps के लिए जरूरी हैं।

Slide 12: Try It Yourself! 👨‍💻

Hindi Script:
तो दोस्तों, अब आपकी बारी है!
अपना folder structure set करें,
Intercepting Routes implement करें,
और URL behavior को टेस्ट करें।
जितना ज्यादा प्रयोग करेंगे, उतना ज्यादा सीखेंगे।
Revive Coding के इस पॉवरफुल फीचर को अपने प्रोजेक्ट्स में जरूर इस्तेमाल करें।

Slide 13: Thank You! 👍

Hindi Script:
धन्यवाद दोस्तों!
अगर आपको यह प्रेजेंटेशन पसंद आया तो लाइक और सब्सक्राइब जरूर करें।
ऐसे ही और Advance Features सीखते रहेंगे Revive Coding के साथ।
मिलते हैं अगले टॉपिक में, तब तक के लिए Happy Coding! 🚀

Command Palette