🚀 Next.js Advanced Route Patterns

The Magic of Multiple Doors

Imagine your house has just one door. Everyone uses it—guests, delivery people, family. Now imagine if your house could have multiple doors that work at the same time, and some doors could magically intercept visitors before they reach certain rooms!

That’s exactly what Next.js Advanced Route Patterns do for your web app. Let’s explore this magical house together!

🏠 Parallel Routes: Multiple Rooms, One View

What Are Parallel Routes?

Think of watching TV while checking your phone. Two things happening at the same time, in the same space.

Parallel Routes let you show multiple pages simultaneously in one layout. It’s like having a split-screen on your TV!

Real-Life Example

Picture a dashboard:

• Left side: Your notifications
• Right side: Your analytics
• Both update independently!

app/
├── layout.js
├── @notifications/
│   └── page.js
├── @analytics/
│   └── page.js
└── page.js

Why Is This Amazing?

🎰 Parallel Routes Slots: Named Boxes

What Are Slots?

Slots are like labeled boxes in your closet. Each box has a name starting with @.

@notifications  ← This is a slot!
@analytics      ← Another slot!
@sidebar        ← One more!

How Slots Work

graph TD
    A[Layout.js] --> B[@notifications]
    A --> C[@analytics]
    A --> D[Main Content]
    B --> E[Notifications Page]
    C --> F[Analytics Page]

Using Slots in Layout

// app/dashboard/layout.js

export default function Layout({
  children,
  notifications,
  analytics,
}) {
  return (
    <div className="dashboard">
      <main>{children}</main>
      <aside>{notifications}</aside>
      <section>{analytics}</section>
    </div>
  );
}

The Magic: Each slot is passed as a prop to your layout!

📄 default.js: The Backup Plan

Why Do We Need default.js?

Imagine you’re on a page, and one slot doesn’t have content for that route. What happens?

Without default.js: 💥 Error! With default.js: ✨ Shows fallback content!

The Problem It Solves

app/dashboard/
├── layout.js
├── @notifications/
│   ├── page.js        ← Shows at /dashboard
│   └── archive/
│       └── page.js    ← Shows at /dashboard/archive
├── @analytics/
│   └── page.js        ← Only at /dashboard
└── page.js

When you go to /dashboard/archive:

• @notifications/archive/page.js ✅ Exists
• @analytics for /archive? ❌ Missing!

The Solution

// app/dashboard/@analytics/default.js

export default function AnalyticsDefault() {
  return (
    <div>
      <p>Select a view to see analytics</p>
    </div>
  );
}

Rule: Add default.js to every slot that might not match all routes!

🚦 Intercepting Routes: The Polite Doorman

What Are Intercepting Routes?

You’re walking to your bedroom. A polite doorman stops you:

“Wait! I can show you a preview right here. Want the full experience? Keep walking!”

Intercepting routes catch a navigation and show something else—usually a modal or preview.

Real-World Example

Instagram-style photo viewing:

1. You’re on the feed
2. Click a photo → Modal opens (intercepted!)
3. Refresh page → Full photo page loads

Both use /photo/123, but the experience is different!

graph TD
    A[User clicks photo] --> B{From feed?}
    B -->|Yes| C[Show Modal]
    B -->|No/Refresh| D[Full Photo Page]
    C --> E[Same URL: /photo/123]
    D --> E

📍 Intercepting Route Conventions

The Special Symbols

Next.js uses special folder names to intercept:

How It Works

Think of it like file paths:

• . means “right here”
• .. means “go up one folder”

Folder Structure Example

app/
├── feed/
│   ├── page.js
│   └── (.)photo/
│       └── [id]/
│           └── page.js  ← Intercepts!
└── photo/
    └── [id]/
        └── page.js      ← Full page

When in /feed and you click /photo/123: → (.)photo/[id]/page.js catches it!

🖼️ Modal with Intercepting Routes

The Complete Recipe

Let’s build that Instagram-style modal!

Step 1: Create the Full Page

// app/photo/[id]/page.js

export default function PhotoPage({ params }) {
  return (
    <div className="full-photo">
      <h1>Photo {params.id}</h1>
      <img src={`/photos/${params.id}.jpg`} />
    </div>
  );
}

Step 2: Create the Interceptor

// app/feed/(.)photo/[id]/page.js

export default function PhotoModal({ params }) {
  return (
    <div className="modal-overlay">
      <div className="modal">
        <img src={`/photos/${params.id}.jpg`} />
      </div>
    </div>
  );
}

Step 3: Add Modal Slot to Layout

// app/feed/layout.js

export default function FeedLayout({
  children,
  modal,
}) {
  return (
    <>
      {children}
      {modal}
    </>
  );
}

The Complete Structure

app/
├── feed/
│   ├── layout.js
│   ├── page.js
│   └── @modal/
│       ├── default.js      ← Empty when no modal
│       └── (.)photo/
│           └── [id]/
│               └── page.js ← The modal!
└── photo/
    └── [id]/
        └── page.js         ← Full page

The default.js for Modal

// app/feed/@modal/default.js

export default function ModalDefault() {
  return null; // Nothing when modal is closed
}

🎯 Quick Reference

graph TD
    A[Advanced Patterns] --> B[Parallel Routes]
    A --> C[Intercepting Routes]
    B --> D[Slots @name]
    B --> E[default.js]
    C --> F[Conventions]
    C --> G[Modals]
    F --> H["#40;.#41; same level"]
    F --> I["#40;..#41; up one"]
    F --> J["#40;...#41; from root"]

💡 When to Use What?

🌟 You Did It!

You now understand:

• ✅ How to show multiple routes at once
• ✅ How to name and use slots
• ✅ Why default.js saves the day
• ✅ How to intercept navigation
• ✅ How to build beautiful modals

Your Next.js apps just got superpowers! 🦸‍♂️

Remember: Advanced patterns aren’t scary—they’re just tools that make complex UIs simple!