Skip to content

Edge Middleware

Learn how you can use Edge Middleware to provide speed and personalization to your users

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 allows you to deliver content to your site's visitors with speed and personalization. They are deployed globally on Vercel's Edge Network and enable you to move server-side logic to the Edge, close to your visitor's origin.

Middleware uses the Vercel Edge Runtime, which is built on the same high-performance V8 JavaScript and WebAssembly engine that is used by the Chrome browser. The Edge Runtime exposes and extends a subset of Web Standard APIs such FetchEvent, Response, and Request, to give you more control over how you manipulate and configure a response, based on the incoming requests. To learn more about writing Middleware, see the Middleware API guide.

Edge Middleware location within Vercel infrastructure.

As a developer, Edge Middleware gives you more control over the user experience, without adding additional size to the application, meaning better performance. For your end-users, they experience pre-rendered, personalized content with very low latency because it's running on the edge.

Some common use-cases of Middleware are:

You can use Edge Middleware with any framework.

Warning: Vercel Edge Middleware used outside of Next.js is currently in Beta. The API might change as we look to continually make improvements.

To add Middleware to your app, you need to create a middleware.ts or middleware.js file in the root of your project. In Next.js you should ensure it is located at the same level as your pages directory.

If the Middleware function is a default export, it can be named anything you choose. If you choose to use a named export, it must be named middleware:

//named export
export function middleware() {}
// default export
export default function custom() {}

The following code snippet shows an example of rewriting a URL, using a matcher config:

// middleware.ts
export default function middleware(request) {
  return Response.redirect(new URL('/about-2', request.url));
}
// config with custom matcher
export const config = {
  matcher: '/about/:path*',
};

By default Edge Middleware is invoked for every route in your app, but can be configured to only run on specified routes with a path matcher config. For more information on writing middleware, see Writing Edge Middleware.

To get started with Edge Middleware, see the Quickstart guide.

Edge Middleware includes some limitations that you should be aware of, including:

  • The maximum size for Middleware is 1 MB, including all the code that is bundled in the function. For more information, see the Limitations guide.
  • Native Node.js APIs are not supported. For more information on all API limitations, see Unsupported APIs and Runtime restrictions.

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.