17. Edge Middleware (middleware.ts): Geo-Routing, Bot Detection & Header Injection • Next.js 14+ App Router & Full-Stack Architecture • Rishabh Ki Kaksha

Next.js 14+ App Router & Full-Stack Architecture › 17. Edge Middleware (middleware.ts): Geo-Routing, Bot Detection & Header Injection

40 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

# 17. Edge Middleware (middleware.ts): Geo-Routing, Bot Detection & Header Injection

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

---

### 1. Edge Middleware Kya Hai? (The Gatekeeper at the Edge ⚡)

Middleware har request ke **Node.js server tak pahunchne se theek pehle Edge CDN location par (< 5ms latency)** execute hota hai:

```
[ User in Tokyo ] ➔ [ Tokyo Cloudflare / Vercel Edge (Runs middleware.ts in 2ms) ]
                                  ⬇ Authorized?
                  [ Central Origin Server in US (Renders App) ]
```

---

### 2. Real-World Edge Middleware: Auth Guard + Security Headers

```typescript
// middleware.ts (Placed at the root of project!)
import { NextResponse, NextRequest } from "next/server";

export function middleware(req: NextRequest) {
    const token = req.cookies.get("session_token")?.value;
    const { pathname } = req.nextUrl;

// 1. Protected Route Guard:
    if (pathname.startsWith("/dashboard") && !token) {
        return NextResponse.redirect(new URL("/login", req.url));
    }

// 2. Custom Header Injection & Security Headers:
    const response = NextResponse.next();
    response.headers.set("X-Frame-Options", "DENY");
    response.headers.set("x-user-country", req.geo?.country || "IN");

return response;
}

export const config = {
    // Only run middleware on specific paths (Exclude static assets/images!):
    matcher: ["/dashboard/:path*", "/admin/:path*"]
};
```

---

### 3. Master Comparison Matrix

---

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

1. **Middleware me `config.matcher` specify karna performance ke liye kyu critical hai?** -> Taaki static images (`.png`), fonts aur CSS files par middleware execute hokar unnecessary Edge CPU execution time waste na kare.
2. **`NextResponse.rewrite()` aur `NextResponse.redirect()` me kya difference hai?** -> `redirect` browser ka URL change kar deta hai (307/308 status); `rewrite` browser me URL same rakhte huye background me kisi doosre internal route ka content serve karta hai (A/B testing ke liye best).
3. **Edge runtime me heavy Node.js packages (jaise raw `bcrypt` ya `mongoose`) kyu fail ho jaate hain?** -> Kyunki Edge runtime lightweight V8 Engine isolate hota hai jisme full Node.js OS bindings aur native C++ binaries available nahi hote.

---
**Next Topic:** 18. Authentication Architecture with Auth.js (NextAuth v5) & JWT Sessions

Loading lesson content...

JavaScript

Full IDE

Live Execution Terminal

Click "Execute Live" to run code.
                

Lesson Mastery AI Quiz

AI Doubt Solver

CERTIFICATE OF COMPLETION

Rishabh Gehlot

PHP 8+ & Laravel 11 Master Track