feat: add Next 13 request header mutation to middleware

demos/middleware/middleware.ts

@@ -8,6 +8,18 @@ export async function middleware(req: NextRequest) {
   let response
   const { pathname } = req.nextUrl
 
+  if (pathname.startsWith('/api/hello')) {
+    // Next 13 request header mutation functionality
+    const headers = new Headers(req.headers)
+
+    headers.set('x-hello', 'world')
+    return NextResponse.next({
+      request: {
+        headers
+      }
+    })
+  }
+
   const request = new MiddlewareRequest(req)
   if (pathname.startsWith('/static')) {
     // Unlike NextResponse.next(), this actually sends the request to the origin
@@ -24,12 +36,6 @@ export async function middleware(req: NextRequest) {
     return res
   }
 
-  if (pathname.startsWith('/api/hello')) {
-    // Add a header to the request
-    req.headers.set('x-hello', 'world')
-    return request.next()
-  }
-
   if (pathname.startsWith('/api/geo')) {
     req.headers.set('x-geo-country', req.geo.country)
     req.headers.set('x-geo-region', req.geo.region)

package.json

@@ -103,6 +103,9 @@
       "!**/test/fixtures/**",
       "!**/test/sample/**"
     ],
+    "moduleNameMapper": {
+      "https://deno.land/x/html_rewriter@v0.1.0-pre.17": "<rootDir>/test/mockedDenoModules/html_rewriter"
+    },
     "transform": {
       "\\.[jt]sx?$": "babel-jest"
     },

packages/runtime/src/templates/edge-shared/utils.ts

@@ -59,6 +59,34 @@ function isMiddlewareResponse(response: Response | MiddlewareResponse): response
   return 'dataTransforms' in response
 }
 
+// Next 13 supports request header mutations and has the side effect of prepending header values with 'x-middleware-request'
+// as part of invoking NextResponse.next() in the middleware. We need to remove that before sending the response the user
+// as the code that removes it in Next isn't run based on how we handle the middleware
+//
+// Related Next.js code:
+// * https://github.com/vercel/next.js/blob/68d06fe015b28d8f81da52ca107a5f4bd72ab37c/packages/next/server/next-server.ts#L1918-L1928
+// * https://github.com/vercel/next.js/blob/43c9d8940dc42337dd2f7d66aa90e6abf952278e/packages/next/server/web/spec-extension/response.ts#L10-L27
+export function updateModifiedHeaders(response: Response) {
+  const overriddenHeaders = response.headers.get('x-middleware-override-headers') || ''
+
+  if (!overriddenHeaders) {
+    return response
+  }
+
+  const headersToUpdate = overriddenHeaders.split(',')
+
+  for (const header of headersToUpdate) {
+    const oldHeaderKey = 'x-middleware-request-' + header
+    const headerValue = response.headers.get(oldHeaderKey) || ''
+
+    response.headers.set(header, headerValue)
+    response.headers.delete(oldHeaderKey)
+  }
+  response.headers.delete('x-middleware-override-headers')
+
+  return response
+}
+
 export const buildResponse = async ({
   result,
   request,
@@ -68,6 +96,8 @@ export const buildResponse = async ({
   request: Request
   context: Context
 }) => {
+  result.response = updateModifiedHeaders(result.response)
+
   // They've returned the MiddlewareRequest directly, so we'll call `next()` for them.
   if (isMiddlewareRequest(result.response)) {
     result.response = await result.response.next()

test/mockedDenoModules/html_rewriter/index.ts

@@ -0,0 +1,2 @@
+export const ElementHandlers = jest.fn()
+export const HTMLRewriter = jest.fn()