This example shows how to use Middleware in Next.js to run code before a request is completed.

The index page (pages/index.tsx) has a list of links to pages with redirect, rewrite, or normal behavior.

On the Middleware file (middleware.ts) the routes are already being filtered by defining a matcher on the exported config. If you want the Middleware to run for every request, you can remove the matcher.

Deploy the example using Vercel:

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

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

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

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

Deploy it to the cloud with Vercel (Documentation).