Intercepting routes (.) in NextJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when navigating to an intercepting route?

Consider a Next.js app with an intercepting route defined as (dashboard)/settings. What will the user see when navigating to /dashboard/settings?

NextJS

app/(dashboard)/layout.tsx
export default function DashboardLayout({ children }) {
  return (
    <div>
      <h1>Dashboard</h1>
      {children}
    </div>
  )
}

app/(dashboard)/settings/page.tsx
export default function Settings() {
  return <p>Settings Page</p>
}

A Only 'Dashboard' heading is shown, 'Settings Page' content is missing.

B Only 'Settings Page' is shown, 'Dashboard' heading is not rendered.

C The app throws a 404 error because intercepting routes are not supported.

D The page shows 'Dashboard' heading and below it 'Settings Page' content.

💡 Hint

Think about how layouts wrap their children in Next.js app router.

In Next.js, intercepting routes allow you to render nested layouts. The (dashboard) folder acts as a layout wrapping the settings page. So the output includes both the dashboard heading and the settings content.

📝 Syntax

intermediate

Identify the correct intercepting route syntax

Which of the following folder names correctly defines an intercepting route in Next.js app router?

A (admin)/users

B [admin]/users

C {admin}/users

D <admin>/users

💡 Hint

Intercepting routes use parentheses in folder names.

Next.js uses parentheses (...) to define intercepting routes. Square brackets [] are for dynamic segments, curly braces and angle brackets are invalid.

🔧 Debug

advanced

Why does this intercepting route fail to render nested content?

Given this layout code, why does the nested page content not appear? app/(main)/layout.tsx export default function MainLayout({ children }) { return

Main Layout

} app/(main)/profile/page.tsx export default function Profile() { return

Profile Page

}

A The layout does not render {children}, so nested pages have no place to appear.

B The folder name (main) is invalid for layouts.

C The profile page must be named index.tsx to render inside layout.

D Layouts cannot be used inside intercepting routes.

💡 Hint

Check what the layout returns in its JSX.

The layout component must include {children} in its returned JSX to render nested pages. Without it, nested content is not shown.

❓ state_output

advanced

What is the rendered output with parallel intercepting routes?

Consider this folder structure: app/(dashboard)/page.tsx app/(dashboard)/settings/page.tsx app/(dashboard)/(notifications)/page.tsx Navigating to /dashboard/(notifications) renders which content?

A Dashboard, settings, and notifications pages are all shown simultaneously.

B Both dashboard and notifications page content are shown, but settings page is hidden.

C Only the notifications page content is shown inside the dashboard layout.

D A 404 error occurs because parallel routes require special syntax.

💡 Hint

Parallel routes allow multiple UI sections to render at once.

Parallel intercepting routes let you show multiple UI parts simultaneously. The dashboard layout wraps the notifications page, and settings is hidden unless explicitly routed.

🧠 Conceptual

expert

What is the main benefit of using intercepting routes in Next.js?

Why would a developer choose to use intercepting routes in a Next.js app instead of traditional nested routes?

A To disable client-side navigation and force full page reloads.

B To automatically generate API routes alongside pages without extra configuration.

C To enable rendering multiple UI sections in parallel without changing the URL structure.

D To enforce strict URL patterns that prevent dynamic routing.

💡 Hint

Think about UI flexibility and URL management.

Intercepting routes allow showing multiple UI parts at once (parallel UI) while keeping URLs clean and flexible. This is useful for layouts like sidebars or modals that appear alongside main content.