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.