diff --git a/docs/middleware.md b/docs/middleware.md index c93ccbe97a..bc6e6b684c 100644 --- a/docs/middleware.md +++ b/docs/middleware.md @@ -1,11 +1,11 @@ # Using Next 12 middleware on Netlify -Next 12 introduces a new feature called [Middleware](https://nextjs.org/docs/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 12 introduces a new feature called [Middleware](https://nextjs.org/docs/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 or at the origin. On Netlify, middleware runs at the origin as part -of the normal Next.js server. +Next.js Middleware can run either in an edge function or at the origin. On Netlify, middleware runs at the origin as +part of the normal Next.js server. ## How to deploy Next 12 middleware @@ -15,8 +15,8 @@ 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. Fortunately there is a one line fix to get -the visitor's country: +When running at the origin, Next.js does not populate the `request.geo` object. Fortunately there is a one line fix to +get the visitor's country: ```typescript export async function middleware(req: NextRequest) { @@ -42,35 +42,31 @@ export async function middleware(req: NextRequest) { ## Caveats -Because 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 middleware should not be used with the -`EXPERIMENTAL_MOVE_STATIC_FILES` option, as this causes statically-generated pages to be served by the Netlify CDN -before any middleware can be run. +Because 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 middleware should not be used with the `EXPERIMENTAL_MOVE_STATIC_FILES` option, as this causes +statically-generated pages to be served by the Netlify CDN before any middleware can be run. -There is currently [a bug in Next.js](https://github.com/vercel/next.js/issues/31179) that causes a proxy loop if you -try to rewrite to a URL with a host other than localhost. If you are using a pattern like this: +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`. If you are using Next.js `<=12.0.3`, you can work around the bug by +ensuring that when rewriting a request you either use a relative path, or manually set the host to `localhost` if +returning a URL object. For example: ```typescript export function middleware(req: NextRequest) { - // Change the `nextUrl` property in some way - req.nextUrl = req.nextUrl.replace('something', 'somethingelse') - // ...then rewrite to the changed URL - return NextResponse.rewrite(req.nextUrl) -} -``` + const rewrittenUrl = req.nextUrl -...then you need to set the `nextUrl.host` to `localhost`: + // Change the URL in some way + // ... -```typescript -export function middleware(req: NextRequest) { - // Change the `nextUrl` property in some way - req.nextUrl = req.nextUrl.replace('something', 'somethingelse') - req.nextUrl.host = 'localhost' + // Before returning the URL, set the host to localhost + rewrittenUrl.host = 'localhost' // ...then rewrite to the changed URL - return NextResponse.rewrite(req.nextUrl) + return NextResponse.rewrite(rewrittenUrl) } ``` -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 plugin beta discussion](https://ntl.fyi/next-beta-feedback). +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 plugin beta discussion](https://ntl.fyi/next-beta-feedback).