nextjs-middleware

## Quick Reference

| Response Type | Code | Purpose |
|---------------|------|---------|
| Continue | `NextResponse.next()` | Pass through |
| Redirect | `NextResponse.redirect(url)` | 307/308 redirect |
| Rewrite | `NextResponse.rewrite(url)` | URL rewrite (no redirect) |
| JSON | `NextResponse.json(data)` | Return JSON response |

| Matcher Pattern | Matches |
|-----------------|---------|
| `'/about'` | Exact path |
| `'/dashboard/:path*'` | Dashboard and all sub-paths |
| `'/((?!api\|_next).*)` | All except api and _next |

| Request Data | Access |
|--------------|--------|
| Path | `request.nextUrl.pathname` |
| Search params | `request.nextUrl.searchParams` |
| Cookies | `request.cookies.get('name')` |
| Headers | `request.headers.get('name')` |
| Geo | `request.geo?.country` |
| IP | `request.ip` |

## When to Use This Skill

Use for **Edge request handling**:
- Protecting routes with authentication
- Implementing role-based access control
- Setting security headers (CSP, CORS)
- Internationalization and locale detection
- A/B testing with rewrites
- Geolocation-based routing

**Related skills:**
- For authentication: see `nextjs-authentication`
- For routing: see `nextjs-routing-advanced`
- For deployment: see `nextjs-deployment`

---

# Next.js Middleware

## Basic Middleware

### Creating Middleware

```tsx
// middleware.ts (in project root)
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  // Add custom header
  const response = NextResponse.next();
  response.headers.set('x-custom-header', 'my-value');
  return response;
}

// Configure which paths middleware runs on
export const config = {
  matcher: '/api/:path*',
};
```

### Matcher Configuration

```tsx
// Single path
export const config = {
  matcher: '/about',
};

// Multiple paths
export const config = {
  matcher: ['/about', '/dashboard/:path*'],
};

// Regex pattern
export const config = {
  matcher