Conceptual

Edge Middleware Overview

Learn how you can use Edge Middleware, code that executes before a request is processed on a site, to provide speed and personalization to your users.
Table of Contents

Edge Middleware is available on all plans

Edge Middleware is code that executes before a request is processed on a site. Based on the request, you can modify the response. Because it runs before the cache, using Middleware is an effective way of providing personalization to statically generated content. Depending on the incoming request, you can execute custom logic, rewrite, redirect, add headers and more, before returning a response.

Edge Middleware location within Vercel infrastructure.
Edge Middleware location within Vercel infrastructure.

Middleware uses the Edge runtime, which exposes and extends a subset of Web Standard APIs such FetchEvent, Response, and Request. To learn more about writing Middleware, see the Middleware API docs.

You can use Edge Middleware with any framework. To add Middleware to your app, you need to create a middleware.ts file at your project's root directory.

The middleware.ts file should be at the same level as your app or pages directory (even if you're using a src directory). See the Quickstart guide for more information.

Edge Middleware has full support for the console API, including time, debug, timeEnd, etc. Logs will appear inside your Vercel project by clicking View Functions Logs next to the deployment.

If your Edge Middleware depends on a database far away from one of our Edge regions, the overall latency of API requests could be slower than expected. To avoid this issue, use a global database. Vercel has multiple global storage products, including Edge Config, Vercel KV, and Vercel Blob. See our storage docs to learn which option is best for you.

Learn more about Edge Middleware by exploring the following resources:

Last updated on July 16, 2024