Intercepting routes (.) in NextJS - Step-by-Step Execution

Concept Flow - Intercepting routes (.)

User clicks a link

↓

Next.js Router intercepts

↓

Check if route is intercepted

↓

Render rest of page

↓

Update browser URL

When a user clicks a link, Next.js router checks if the route has an intercepted segment (marked by a dot). If yes, it renders that segment separately inside the page without full reload.

Execution Sample

NextJS

app/dashboard/page.tsx
app/dashboard/(.)/settings/page.tsx

// User navigates from /dashboard to /dashboard/(.)/settings

This code shows a main dashboard page and an intercepted settings page inside the dashboard route using (.) folder.

Execution Table

Step	Action	Route	Intercepted Segment	Rendered Components	Browser URL
1	User clicks link to /dashboard	/dashboard	No	Dashboard page	/dashboard
2	User clicks link to /dashboard/(.)/settings	/dashboard/(.)/settings	Yes (.) segment 'settings'	Dashboard page + Settings segment	/dashboard/settings
3	Next.js router intercepts route	/dashboard/(.)/settings	Yes	Dashboard page + Settings segment	/dashboard/settings
4	Render intercepted segment without full reload	/dashboard/(.)/settings	Yes	Dashboard + Settings segment rendered	/dashboard/settings
5	User navigates away to /profile	/profile	No	Profile page	/profile
6	Exit	-	-	-	-

💡 User navigates away or no intercepted route found, normal routing resumes.

Variable Tracker

Variable	Start	After Step 2	After Step 4	Final
Route	/dashboard	/dashboard/(.)/settings	/dashboard/(.)/settings	/profile
InterceptedSegment	None	settings	settings	None
RenderedComponents	Dashboard	Dashboard + Settings	Dashboard + Settings	Profile
BrowserURL	/dashboard	/dashboard/settings	/dashboard/settings	/profile

Key Moments - 3 Insights

Why does the URL show /dashboard/settings but the route folder is /dashboard/(.)/settings?

Next.js hides the (.) folder in the URL for clean paths. The execution_table rows 2-4 show the route path includes (.) but the browser URL omits it.

Does the whole page reload when navigating to an intercepted route?

No, only the intercepted segment loads inside the existing page. See execution_table row 4 where Dashboard stays rendered and Settings loads inside.

What happens if the route is not intercepted?

Next.js performs a full page render for that route as normal. Execution_table row 1 and 5 show no intercepted segment and full page renders.

Visual Quiz - 3 Questions

Look at the execution_table, what is the Rendered Components at Step 3?

A Dashboard page only

B Settings segment only

C Dashboard + Settings segment

D Profile page

💡 Hint

Check the 'Rendered Components' column at Step 3 in the execution_table.

At which step does the browser URL update to /dashboard/settings?

A Step 1

B Step 2

C Step 4

D Step 5

💡 Hint

Look at the 'Browser URL' column in the execution_table for when it first shows /dashboard/settings.

If the user navigates to /profile, what happens to the InterceptedSegment variable?

A It becomes None

B It stays as 'settings'

C It changes to 'profile'

D It becomes '/'

💡 Hint

Check the variable_tracker row for InterceptedSegment at the Final column.

Concept Snapshot

Intercepting routes (.) in Next.js lets you load parts of a page separately.
Use a folder named (.) inside a route to mark intercepted segments.
When navigating, Next.js renders the intercepted segment inside the main page.
The URL hides the (.) folder for clean paths.
This avoids full page reloads and improves user experience.

Full Transcript

Intercepting routes in Next.js uses a special folder named (.) inside a route folder. When a user clicks a link, Next.js router checks if the route includes an intercepted segment inside (.). If yes, it loads that segment inside the existing page without a full reload. The browser URL hides the (.) folder for a clean path. For example, navigating from /dashboard to /dashboard/(.)/settings renders the settings segment inside the dashboard page, but the URL shows /dashboard/settings. This improves speed and smoothness. If the route is not intercepted, Next.js loads the full page normally. Variables like Route, InterceptedSegment, RenderedComponents, and BrowserURL update step-by-step as shown in the execution table and variable tracker.

Practice

1. What is the main purpose of intercepting routes in Next.js App Router?

easy

A. To force server-side rendering on every route

B. To reload the entire page on every navigation

C. To disable client-side navigation

D. To add UI parts without leaving the current page

Solution

1. Step 1: Understand intercepting routes concept

   Intercepting routes allow adding UI parts while staying on the same page, avoiding full reloads.

2. Step 2: Compare options with concept

   Options suggesting page reloads, disabling navigation, or forcing server-side rendering contradict the idea of smooth UI updates without full reloads.

3. Final Answer:

   To add UI parts without leaving the current page -> Option D

4. Quick Check:

   Intercepting routes = add UI parts without leaving page [OK]

Hint: Intercepting routes keep you on the page while adding UI [OK]

Common Mistakes:

• Thinking intercepting routes reload the whole page
• Confusing intercepting routes with disabling navigation
• Assuming intercepting routes force server rendering

2. Which folder name syntax is used to create an intercepting route in Next.js App Router?

easy

A. @modal

B. modal

C. (modal)

D. [modal]

Solution

1. Step 1: Recall folder naming for intercepting routes

   Intercepting routes use parentheses around folder names, like (modal), to mark them as intercepting.

2. Step 2: Evaluate options

   (modal) uses parentheses correctly. @modal uses @ for parallel routes, modal omits parentheses for regular routes, and [modal] uses square brackets for dynamic routes.

3. Final Answer:

   (modal) -> Option C

4. Quick Check:

   Intercepting route folder = parentheses [OK]

Hint: Intercepting routes use (folderName) syntax [OK]

Common Mistakes:

• Using square brackets instead of parentheses
• Omitting parentheses for intercepting routes
• Confusing @ folders with intercepting route folders

3. Given this folder structure in Next.js App Router:
app/(modal)/page.tsx
What happens when you navigate to a route inside (modal)?

medium

A. The modal UI appears without leaving the current page

B. The entire page reloads and shows only the modal content

C. Navigation fails with a 404 error

D. The modal opens in a new browser tab

Solution

1. Step 1: Understand intercepting route behavior

   Routes inside (modal) folders add UI parts like modals without leaving the current page.

2. Step 2: Analyze navigation effect

   Navigation triggers modal UI overlay, not a full page reload or error.

3. Final Answer:

   The modal UI appears without leaving the current page -> Option A

4. Quick Check:

   Navigation in (modal) = modal UI without reload [OK]

Hint: Routes in (modal) show UI without page reload [OK]

Common Mistakes:

• Expecting full page reload on modal route
• Thinking navigation causes errors
• Assuming modal opens in new tab

4. You wrote this intercepting route folder: app/@(sidebar)/page.tsx. Why does it cause a build error?

medium

A. Parentheses cannot be combined with @ in folder names

B. The folder name must be all lowercase

C. You need to add a layout.tsx file inside the folder

D. The file extension should be .jsx, not .tsx

Solution

1. Step 1: Check folder naming rules for intercepting routes

   Parentheses indicate intercepting routes; @ folders are separate special folders. Combining them is invalid syntax.

2. Step 2: Identify cause of build error

   Using @(sidebar) mixes two folder naming conventions, causing build failure.

3. Final Answer:

   Parentheses cannot be combined with @ in folder names -> Option A

4. Quick Check:

   Invalid folder name combining ( ) and @ causes error [OK]

Hint: Don't mix ( ) and @ in folder names [OK]

Common Mistakes:

• Thinking lowercase folder name fixes error
• Assuming missing layout.tsx causes build error
• Confusing file extension with folder naming

5. You want to show a sidebar UI on some pages without leaving the current page. Which folder structure correctly implements this intercepting route in Next.js App Router?

hard

A. app/(sidebar)/page.tsx without layout.tsx

B. app/(sidebar)/page.tsx with a layout.tsx inside (sidebar) wrapping children

C. app/@sidebar/page.tsx with page.tsx only

D. app/sidebar/page.tsx with a layout.tsx inside sidebar wrapping children

Solution

1. Step 1: Identify correct intercepting route folder

   Using parentheses (sidebar) marks it as an intercepting route folder.

2. Step 2: Confirm layout usage for UI wrapping

   Adding layout.tsx inside (sidebar) allows wrapping children with sidebar UI, enabling partial UI updates.

3. Step 3: Evaluate other options

   app/sidebar/page.tsx with a layout.tsx inside sidebar wrapping children lacks parentheses, so it's a normal route. app/@sidebar/page.tsx with page.tsx only uses @ which is for special folders, not intercepting routes. app/(sidebar)/page.tsx without layout.tsx misses layout.tsx, so sidebar UI won't wrap children properly.

4. Final Answer:

   app/(sidebar)/page.tsx with a layout.tsx inside (sidebar) wrapping children -> Option B

5. Quick Check:

   Intercepting route with layout wraps UI correctly [OK]

Hint: Use (folder) plus layout.tsx to wrap UI in intercepting routes [OK]

Common Mistakes:

• Omitting layout.tsx inside intercepting route folder
• Using normal folder instead of (folder) for intercepting route
• Confusing @ folders with intercepting route folders