middleware-patterns

Design Next.js middleware patterns for Edge Runtime request preprocessing.

1|Updated May 6, 2026
One-click install
npx skills add https://github.com/jacob-balslev/skill-graph --skill middleware-patterns-jacob-balslev
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: middleware-patterns
Source: https://github.com/jacob-balslev/skill-graph/tree/main/marketplace/skills/middleware-patterns
Command: npx skills add https://github.com/jacob-balslev/skill-graph --skill middleware-patterns-jacob-balslev

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you design correct Next.js middleware by clarifying what belongs in middleware and how to implement common cross-cutting behaviors without breaking Edge constraints or hurting performance.

Core Features & Use Cases

  • Middleware-first cross-cutting design: Apply shared request pre-processing across many routes using matcher-scoped logic, not per-route handlers.
  • Routing transformations: Use pass-through, rewrite, redirect, and direct responses to implement auth gates, locale routing, A/B rewrites, and geo routing.
  • Edge-compatible delivery patterns: Follow Edge Runtime constraints and implement request correlation (request-id) and security-header delivery (including per-request CSP nonces).
  • Performance and correctness discipline: Prevent common footguns like running on static assets unintentionally, doing database lookups in middleware, or importing Node-only libraries.

Quick Start

Use this skill to review or draft a Next.js middleware.ts that authenticates protected routes, redirects unauthenticated users to login, rewrites locale variants, injects a per-request CSP nonce, and excludes static assets via config.matcher.

Frequently Asked Questions about middleware-patterns

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create an authentication gate in Next.js middleware using NextResponse?

An authentication gate in Next.js middleware uses NextResponse.redirect to send unauthenticated users to a login page while passing valid requests through via NextResponse.next. The matcher configuration scopes this logic to protected routes only.

What is the best way to inject a per-request CSP nonce at the Edge Runtime?

Injecting a per-request CSP nonce at the Edge Runtime involves generating a unique token in middleware and setting it as a response header using NextResponse. This ensures Content Security Policy headers are dynamically tailored to each request.

Can I do database lookups inside Next.js middleware to check user permissions?

Database lookups are not recommended inside Next.js middleware due to Edge Runtime constraints and performance safety. Middleware should perform lightweight checks like validating tokens or reading cookies, avoiding I/O-heavy work that blocks request preprocessing.

How does matcher configuration prevent Next.js middleware from running on static assets?

Matcher configuration prevents middleware from executing on static assets by explicitly defining route patterns that exclude paths like images or CSS files. This scoping ensures cross-cutting logic only applies to dynamic routes, preserving performance.

How do I implement locale routing and A/B testing rewrites in Next.js middleware?

Locale routing and A/B testing in Next.js middleware use NextResponse.rewrite to transparently map incoming requests to localized content or alternate experiment variants. This approach transforms routes without changing the visible URL structure.

Why does importing Node-only libraries break Next.js middleware in the Edge Runtime?

Importing Node-only libraries breaks Next.js middleware because the Edge Runtime only supports Web standard APIs. Using Node-specific modules causes build failures since middleware requires Edge-compatible code imports for request preprocessing.