09. Intercepting Routes ((..)photos, (.)login) & Instagram/Twitter Modal Architecture • Next.js 14+ App Router & Full-Stack Architecture • Rishabh Ki Kaksha

Next.js 14+ App Router & Full-Stack Architecture › 09. Intercepting Routes ((..)photos, (.)login) & Instagram/Twitter Modal Architecture

50 mins

← Prev Next →

Course Syllabus

Module 1: Next.js 14+ Architecture & App Router Internals

01. Next.js 14+ Evolution: Pages Router vs App Router Architecture 02. Project Structure, Special File Conventions (page, layout, template, loading, error) 03. Rendering Strategies: Static Rendering (SSG), Dynamic Rendering (SSR) & Streaming

Module 2: Server Components (RSC) vs Client Components

04. React Server Components (RSC) Deep Dive: The Server-Client Component Boundary 05. Passing Data between RSC & Client: Serialization Rules & The Children Pattern 06. Server-Only Packages (import "server-only") & Taint API for Secret Protection

Module 3: Routing Architecture, Intercepting & Parallel Routes

07. Dynamic Segments, Catch-All ([...slug]) & Optional Catch-All ([[...slug]]) 08. Parallel Routes (@modal, @analytics) & Conditional Slot Rendering 09. Intercepting Routes ((..)photos, (.)login) & Instagram/Twitter Modal Architecture

Module 4: Server Actions, Mutation & Form Handling

10. Server Actions ("use server"): Type-Safe Mutations without REST Endpoints 11. Form Validation with useFormState, useFormStatus, and Zod Schemas 12. Optimistic UI Updates with useOptimistic Hook in Server Actions

Module 5: The 4-Layer Caching Architecture & Revalidation

13. The 4-Layer Caching Engine: Request Memoization, Data Cache, Full Route Cache, Router Cache 14. On-Demand Revalidation: revalidatePath vs revalidateTag with Cache Tags 15. Partial Prerendering (PPR): Combining Static Shells with Dynamic Holes

Module 6: Authentication (NextAuth v5), Middleware & Production Deployment

16. Route Handlers (route.ts): Building REST API Endpoints with NextResponse 17. Edge Middleware (middleware.ts): Geo-Routing, Bot Detection & Header Injection 18. Authentication Architecture with Auth.js (NextAuth v5) & JWT Sessions 19. SEO Mastery: Dynamic Metadata, OpenGraph Image Generation (ImageResponse) & Sitemap 20. Production Docker Multi-Stage Build & Standalone Deployment on Cloud VPS

Interactive Lesson Studio

# 09. Intercepting Routes ((..)photos, (.)login) & Instagram/Twitter Modal Architecture

> Next.js 14+ Notes by Rishabh - Topic 09

---

### 1. The Instagram / Twitter Modal Pattern 📸

Soch jab tu Instagram feed par kisi photo par click karta hai:
1. **Client-side Click:** Photo ek **Overlay Modal** me open hoti hai bina feed ko unmount kiye, aur URL update ho jata hai `/p/123`.
2. **Hard Refresh (F5) / Share Link:** Jab koi dost us link ko open karta hai, toh **Full Standalone Photo Page** render hota hai!

---

### 2. Intercepting Route Conventions:

*   `(.)`: Same directory level ko intercept karta hai.
*   `(..)`: 1 level up directory ko intercept karta hai.
*   `(..)(..)`: 2 levels up ko intercept karta hai.
*   `(...)`: Root `app` directory se intercept karta hai.

---

### 3. Architecture Structure

```
app/
 ├── layout.tsx
 ├── page.tsx (Feed Grid)
 ├── @modal/
 │    ├── default.tsx (returns null)
 │    └── (.)photos/[id]/
 │         └── page.tsx (Renders Modal Overlay!)
 └── photos/[id]/
      └── page.tsx (Renders Full Standalone Page on Direct Visit/F5!)
```

---

### 4. Master Comparison Matrix

| Interaction | Route Triggered | UI Displayed | URL in Browser |
| :--- | :--- | :--- | :--- |
| **Feed me Photo Click** | `(.)photos/[id]/page.tsx` | **Modal Overlay over Feed** | `/photos/123` |
| **Direct URL Open (F5)** | `photos/[id]/page.tsx` | **Full Standalone Dedicated Page** | `/photos/123` |

---

### 5. Interview Ke 3 Sawal Is Topic Se

1. **Intercepting routes shareable URL problem ko kaise solve karte hain?** -> Client-side par lightweight contextual modal render karte hain jabki URL update ho jata hai jisse deep-linking aur bookmarks 100% standard web specification comply karte hain.
2. **Modal band karne ke liye kaunsa method use hota hai?** -> `useRouter().back()` call karke previous history state par return karte hain jisse `@modal` slot wapas `default.tsx` (`null`) par chala jata hai.
3. **Intercepting routes mobile app navigation transition me kaise help karte hain?** -> Native iOS/Android app-like sheet modals web browser par render karne me enable karte hain.

---
**Next Topic:** 10. Server Actions ("use server"): Type-Safe Mutations without REST Endpoints

Loading lesson content...

JavaScript

Live Execution Terminal

Click "Execute Live" to run code.
                