https://vercel.com/docs/concepts/functions/edge-functions

Traditionally there are two ways to serve content, statically from a Content Delivery Network (CDN) close to the user for fast response times, or dynamically, with personalization configured at the server level on each request.

When deciding on how you want to deliver content to your applications visitors, you have to take into consideration the trade-offs that each of these two options offer.

A static page will deliver the same content to all visitors, no matter where they are in the world, and it will be fast as it's cached by the CDN. But this approach may not be viable if you want to deliver personalized content, depending on, for example, where a user is located in the world.

To give your user a personalized experience, you can take advantage of server-side rendering to create dynamic content on each request to your sites pages. This will enable you to offer different content to people based on their location, authenticate them, or configure the language of your site.

The draw back of this approach is that it can be slower. If the server processing the request is far away from the visitors origin, then the request can take time to complete, and the content may not be available to the user at the speed offered by serving purely static content.

To achieve both speed and dynamism, you can use Edge Functions. They allow you to deliver content to your sites visitors with speed and personalization, are deployed globally by default on Vercel's Edge Network, and have zero cold starts. They enable you to move server-side logic to the Edge, close to your visitors origin.

To use Edge Functions, you can deploy Middleware. Middleware is code that executes before a request is processed. Depending on the incoming request, you can execute custom logic, rewrite, redirect, add headers and more, before returning a response.

The middleware function runs code before a request is completed, then based on the request, you can modify the response. It can be used for anything that shares logic between pages.

It takes two parameters, request and event. The request parameter is an extension of the native [Request](<https://developer.mozilla.org/en-US/docs/Web/API/Request>) interface and has added methods and properties that include accessing cookies, getting geo location from an IP Address and user-agent info. You can import its type definition with [NextRequest](<https://vercel.com/docs/concepts/functions/edge-functions#nextrequest>).

In addition you can import the [NextResponse](<https://vercel.com/docs/concepts/functions/edge-functions#nextresponse>) API, which extends the native [Response](<https://developer.mozilla.org/en-US/docs/Web/API/Response>) interface and lets you redirect, rewrite, create a json response, access cookies, set a cookie, and clear cookies.

Links to example projects which show how to use each Middleware use-case listed

To start using Middleware in your Next.js project, begin by upgrading to the latest Next.js version. The following steps will guide you through the process. Note that the below example uses TypeScript, though this is not a requirement.

1. Install the latest version of next:

   npm install next@latest
   # or
   yarn upgrade next@latest
   
   

2. Next, create a _middleware.ts file under your /pages directory.

   - /pages
     _middleware.ts
   - package.json
   
   

3. Finally create function in the _middleware.ts file.

   import type { NextFetchEvent, NextRequest } from 'next/server';
   
   export default function middleware(
     request: NextRequest,
     event: NextFetchEvent,
   ) {
     return new Response('Hello, world!');
   }
   
   

When you deploy your site, your Middleware will work out of the box.

Middleware is created by using a middleware function that lives inside a _middleware file. Its API is based upon the native [FetchEvent](<https://developer.mozilla.org/en-US/docs/Web/API/FetchEvent>), [Response](<https://developer.mozilla.org/en-US/docs/Web/API/Response>), and [Request](<https://developer.mozilla.org/en-US/docs/Web/API/Request>) objects.