Intercepting routes (.) in NextJS - Mini Project: Build & Apply

Intercepting Routes in Next.js

📖 Scenario: You are building a Next.js app where you want to show a special message when users navigate to a certain section without leaving the current page. This is useful for showing previews or modals without full page reloads.

🎯 Goal: Create a Next.js app with an intercepting route that shows a modal overlay when navigating to /profile/settings from /profile without leaving the /profile page.

📋 What You'll Learn

Create a basic Next.js app with a profile page

Add an intercepting route for settings inside profile

Show a modal overlay when /profile/settings is visited

Ensure the modal can be closed to return to /profile without full page reload

💡 Why This Matters

🌍 Real World

Intercepting routes let you show modals or previews without full page reloads, improving user experience in apps like social media or e-commerce.

💼 Career

Understanding intercepting routes is useful for building modern Next.js apps with smooth navigation and dynamic UI overlays.

1

Create the base profile page

Create a file app/profile/page.tsx with a React functional component that returns a <main> element containing the text Profile Page.

NextJS

// Your code here

Hint

This is the main page for the profile section. Use a functional component that returns a <main> element with the text.

2

Add intercepting route folder settings

Inside app/profile, create a folder named settings to hold the parallel route for the intercepting modal. Inside it, create a page.tsx file with a React component that returns a <div> with text Settings Modal.

NextJS

export default function ProfilePage() {
  return Profile Page;
}

// Your code here to add settings/page.tsx

Hint

The settings folder creates a parallel route slot in Next.js App Router. The component inside fills the modal content when navigating to /profile/settings.

3

Use children and settings layout to show modal overlay

In app/profile/layout.tsx, create a layout component that accepts children and settings props. Render children inside a <main>. If settings exists, render it inside a <div> with class modal-overlay to overlay on top.

NextJS

export default function ProfilePage() {
  return Profile Page;
}

// app/profile/settings/page.tsx
export default function SettingsModal() {
  return Settings Modal;
}

// Your code here to add app/profile/layout.tsx

Hint

The layout defines parallel route slots: children for the default page and settings for the modal overlay when at /profile/settings.

4

Add navigation links to test the intercepting route

Update app/profile/page.tsx to include a <Link> to /profile/settings. Update app/profile/settings/page.tsx to include a <Link> to /profile to close the modal without full page reload.

NextJS

export default function ProfilePage() {
  return Profile Page;
}

// app/profile/settings/page.tsx
export default function SettingsModal() {
  return Settings Modal;
}

// app/profile/layout.tsx
export default function ProfileLayout({
  children,
  settings
}: {
  children: React.ReactNode;
  settings?: React.ReactNode
}) {
  return (
    
      {children}
      {settings && {settings}}
    
  );
}

// Your code here to update app/profile/page.tsx and app/profile/settings/page.tsx

Hint

Next.js automatically fills the settings slot on /profile/settings, showing the modal over the profile page. Links use client-side navigation.

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