This example shows how to configure your Next.js Middleware to only match specific pages.

The index page (pages/index.ts) has a list of links to dynamic pages, which will tell whether they were matched or not.

The Middleware file (middleware.ts) has a special matcher configuration key, allowing you to fine-grained control matched pages.

Please keep in mind that:

1. Middleware always runs first
2. Middleware always matches _next routes on server side
3. matcher must always starts with a '/'

Deploy the example using Vercel:

Execute create-next-app with npm, Yarn, or pnpm to bootstrap the example:

npx create-next-app --example middleware-matcher middleware-matcher-app

yarn create next-app --example middleware-matcher middleware-matcher-app

pnpm create next-app --example middleware-matcher middleware-matcher-app

Deploy it to the cloud with Vercel (Documentation).