Skip to content

Latest commit

 

History

History
54 lines (38 loc) · 2.8 KB

middleware.md

File metadata and controls

54 lines (38 loc) · 2.8 KB

Using Next.js 12 middleware on Netlify

Next.js 12 introduces a new feature called Middleware, in which functions run before a request has finished processing. Middleware can be used to modify the request or replace the response. For example, it can change headers, rewrite the request path, or return a different response entirely.

Next.js Middleware can run either in an edge function (highly recommended for version 12.2+ as ISR will not work otherwise) or at the origin. On Netlify, Middleware runs at the origin as part of the normal Next.js server.

How to deploy Next.js 12 middleware

Next.js 12 Middleware works out of the box with Netlify, and most functions will work unchanged. By default, middleware runs using Netlify Edge Functions. For legacy support for running Middleware at the origin, set the environment variable NEXT_DISABLE_NETLIFY_EDGE to true. Be aware that this will result in slower performance, as all pages that match middleware must use SSR. See the middleware docs for details of how to create Next.js middleware. There are however a few workarounds that are currently required for some features during the beta period:

geo

When running at the origin, Next.js does not populate the request.geo object as part of the NextRequest. Fortunately there is a one line fix to get the visitor's country:

export async function middleware(req: NextRequest) {
  // Add this line
  req.geo.country = req.headers.get('x-country')

  // The rest of your middleware goes here
}

ip

Next.js also does not populate the req.ip value when running at the origin. There is another one line fix for this:

export async function middleware(req: NextRequest) {
  // Add this line
  req.ip = req.headers.get('x-nf-client-connection-ip')

  // The rest of your middleware goes here
}

Caveats when middleware is run at the origin

When the middleware runs at the origin, it is run after Netlify rewrites and redirects. If a static file is served by the Netlify CDN then the middleware is never run, as middleware only runs when a page is served by Next.js. This means that any pages that match middleware routes are served from the origin rather than the CDN.

There is a bug in Next.js <=12.0.3 that causes a proxy loop if you try to rewrite to a URL with a host other than localhost. This bug is fixed in version 12.0.4, so if you are using middleware you should upgrade to that version or later.

If you have an issue with Next.js middleware on Netlify while it is beta, particularly if the issue cannot be reproduced when running locally, then please add a comment to the Next Runtime beta discussion.