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

Need a 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

Need a 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

Need a 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

Need a hint?

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