AVAILABLE FOR WEB, FLUTTER & QA PROJECTS

How to use this tool

1. Select Matcher Pattern Preset

Load standard patterns: Standard Next.js Static Asset Exclusion, Auth Protected Routes, or API-Only middleware.

2. Edit Matcher Regex or Array

Customize your `config.matcher` array, glob patterns, or negative lookaheads.

3. Input Test URLs

Enter multiple URL paths (e.g. /dashboard, /api/auth, /_next/static/chunk.js, /favicon.ico) to test.

4. Review Instant Match Results

Inspect green (MATCH - Middleware executes) and gray (BYPASS - Direct static serve) statuses.

Formula or logic used

Next.js Matcher Syntax & Regex Rules

Next.js compiles config.matcher paths into regular expressions using path-to-regexp, supporting named parameters, wildcards, and negative lookaheads.

  • Static Asset Exclusion: `'/((?!api|_next/static|_next/image|favicon.ico).*)'` matches all pages except internal assets
  • Dynamic Route Wildcard: `'/dashboard/:path*'` matches `/dashboard`, `/dashboard/analytics`, and nested sub-paths
  • Single Segment Parameter: `'/users/:id'` matches `/users/123` but NOT `/users/123/settings`
  • Regex Lookaheads: Negative lookahead `(?!...)` bypasses middleware execution completely, saving edge compute cost

Examples

Example 1: Standard Production Asset Exclusion Matcher

Input: Pattern: '/((?!api|_next/static|_next/image|favicon.ico).*)' against /dashboard and /_next/static/app.js.
Calculated Result: /dashboard -> MATCH (Middleware runs) | /_next/static/app.js -> BYPASS (Direct CDN serve).

Ensures middleware runs on user pages while avoiding performance penalties on static chunks.

Example 2: Protected SaaS Admin & Dashboard Routes

Input: Pattern: ['/dashboard/:path*', '/settings/:path*'] against /dashboard/billing and /about.
Calculated Result: /dashboard/billing -> MATCH (Auth check executed) | /about -> BYPASS (Public page).

Restricts middleware authentication redirects strictly to private customer areas.

Common use cases

Authentication Redirect Debugging

Verify that unauthenticated users are redirected on private routes while allowing public assets through.

Preventing Static Asset Middleware Invocations

Stop Next.js middleware from running on images, scripts, and fonts, reducing edge function bills.

Internationalization (i18n) Locale Prefixing

Test language prefix patterns (e.g. /en/blog vs /fr/blog) against custom matcher rules.

API Gateway Pre-Flight Handling

Configure CORS and authorization token verification exclusively on /api/:path* routes.

Web Developer Tools

Next.js Route Planner

The Next.js Route Planner generates visual and copyable directory structures for Next.js 15 App Router applica...

Launch Tool →
Web Developer Tools

Next.js Metadata Generator

The Next.js Metadata Generator creates production-grade, type-safe Next.js App Router metadata configurations,...

Launch Tool →
Web Developer Tools

Next.js Robots.txt Generator

The Next.js Robots.txt Generator creates type-safe `app/robots.ts` files for the Next.js App Router, managing ...

Launch Tool →

Frequently asked questions

Why should I use config.matcher instead of if statements in middleware?

config.matcher filters requests at the routing layer before middleware is invoked. If a request is bypassed by the matcher, zero edge compute is consumed, drastically improving site speed and reducing hosting bills.

What does :path* mean in Next.js matcher patterns?

The `:path*` syntax indicates zero or more path segments matching recursively. For example, `/dashboard/:path*` matches `/dashboard`, `/dashboard/settings`, and `/dashboard/settings/billing`.

Can I use multiple patterns in config.matcher?

Yes! config.matcher accepts either a single string pattern or an array of string patterns (e.g. `matcher: ['/dashboard/:path*', '/admin/:path*']`).

Why does my middleware run on favicon.ico and images?

By default, if you don't define a negative lookahead to exclude `favicon.ico`, `_next/image`, and `_next/static`, Next.js will execute middleware for every image and asset request on your site.

Blueprint Grid Background
AVAILABLE FOR NEW CONTRACTS & ARCHITECTURAL BUILDS

Let's build something
exceptional together

Work directly with Faisal Rafique to architect and deliver high-performance Next.js 15 platforms, 60fps Flutter mobile applications, and enterprise automated QA testing pipelines.

Direct Senior Architect Access
100% Code & IP Ownership
Milestone-Based Global Delivery