feat: add support for v2 middleware matchers

Author: ascorbic

demos/canary/middleware.ts

@@ -0,0 +1,30 @@
+import { NextResponse } from 'next/server'
+import type { NextRequest } from 'next/server'
+
+export async function middleware(req: NextRequest) {
+  const res = NextResponse.rewrite(new URL('/', req.url))
+  res.headers.set('x-response-header', 'set in middleware')
+  res.headers.set('x-is-deno', 'Deno' in globalThis ? 'true' : 'false')
+  return res
+}
+
+export const config = {
+  matcher: [
+    '/foo',
+    { source: '/bar' },
+    {
+      source: '/baz',
+      has: [
+        {
+          type: 'header',
+          key: 'x-my-header',
+          value: 'my-value',
+        },
+      ],
+    },
+    {
+      source: '/en/asdf',
+      locale: false,
+    },
+  ],
+}

demos/canary/package-lock.json

@@ -9,7 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "next": "^12.1.7-canary.29",
+    "next": "^12.2.6-canary.10",
     "react": "18.1.0",
     "react-dom": "18.1.0"
   },

demos/canary/package.json

@@ -5,8 +5,33 @@ import { resolve, join } from 'path'
 import type { NetlifyConfig, NetlifyPluginConstants } from '@netlify/build'
 import { copyFile, emptyDir, ensureDir, readJSON, readJson, writeJSON, writeJson } from 'fs-extra'
 import type { MiddlewareManifest } from 'next/dist/build/webpack/plugins/middleware-plugin'
+import type { RouteHas } from 'next/dist/lib/load-custom-routes'
 
-type EdgeFunctionDefinition = MiddlewareManifest['middleware']['name']
+// This is the format as of [email protected]
+interface EdgeFunctionDefinitionV1 {
+  env: string[]
+  files: string[]
+  name: string
+  page: string
+  regexp: string
+}
+
+export interface MiddlewareMatcher {
+  regexp: string
+  locale?: false
+  has?: RouteHas[]
+}
+
+// This is the format after [email protected]
+interface EdgeFunctionDefinitionV2 {
+  env: string[]
+  files: string[]
+  name: string
+  page: string
+  matchers: MiddlewareMatcher[]
+}
+
+type EdgeFunctionDefinition = EdgeFunctionDefinitionV1 | EdgeFunctionDefinitionV2
 
 export interface FunctionManifest {
   version: 1
@@ -84,9 +109,6 @@ const copyEdgeSourceFile = ({
   target?: string
 }) => fs.copyFile(join(__dirname, '..', '..', 'src', 'templates', 'edge', file), join(edgeFunctionDir, target ?? file))
 
-// Edge functions don't support lookahead expressions
-const stripLookahead = (regex: string) => regex.replace('^/(?!_next)', '^/')
-
 const writeEdgeFunction = async ({
   edgeFunctionDefinition,
   edgeFunctionRoot,
@@ -95,10 +117,12 @@ const writeEdgeFunction = async ({
   edgeFunctionDefinition: EdgeFunctionDefinition
   edgeFunctionRoot: string
   netlifyConfig: NetlifyConfig
-}): Promise<{
-  function: string
-  pattern: string
-}> => {
+}): Promise<
+  Array<{
+    function: string
+    pattern: string
+  }>
+> => {
   const name = sanitizeName(edgeFunctionDefinition.name)
   const edgeFunctionDir = join(edgeFunctionRoot, name)
 
@@ -117,10 +141,24 @@ const writeEdgeFunction = async ({
   })
 
   await copyEdgeSourceFile({ edgeFunctionDir, file: 'utils.ts' })
-  return {
-    function: name,
-    pattern: stripLookahead(edgeFunctionDefinition.regexp),
+  await copyEdgeSourceFile({ edgeFunctionDir, file: 'next-utils.ts' })
+
+  const matchers: EdgeFunctionDefinitionV2['matchers'] = []
+
+  // The v1 middleware manifest has a single regexp, but the v2 has an array of matchers
+  if ('regexp' in edgeFunctionDefinition) {
+    matchers.push({ regexp: edgeFunctionDefinition.regexp })
+  } else {
+    matchers.push(...edgeFunctionDefinition.matchers)
   }
+
+  await writeJson(join(edgeFunctionDir, 'matchers.json'), matchers)
+
+  // We add a defintion for each matching path
+  return matchers.map((matcher) => {
+    const pattern = matcher.regexp
+    return { function: name, pattern }
+  })
 }
 
 type NetlifyPluginConstantsWithEdgeFunctions = NetlifyPluginConstants & {
@@ -193,23 +231,23 @@ export const writeEdgeFunctions = async (netlifyConfig: NetlifyConfig) => {
 
     for (const middleware of middlewareManifest.sortedMiddleware) {
       const edgeFunctionDefinition = middlewareManifest.middleware[middleware]
-      const functionDefinition = await writeEdgeFunction({
+      const functionDefinitions = await writeEdgeFunction({
         edgeFunctionDefinition,
         edgeFunctionRoot,
         netlifyConfig,
       })
-      manifest.functions.push(functionDefinition)
+      manifest.functions.push(...functionDefinitions)
     }
     // Older versions of the manifest format don't have the functions field
     // No, the version field was not incremented
     if (typeof middlewareManifest.functions === 'object') {
       for (const edgeFunctionDefinition of Object.values(middlewareManifest.functions)) {
-        const functionDefinition = await writeEdgeFunction({
+        const functionDefinitions = await writeEdgeFunction({
           edgeFunctionDefinition,
           edgeFunctionRoot,
           netlifyConfig,
         })
-        manifest.functions.push(functionDefinition)
+        manifest.functions.push(...functionDefinitions)
       }
     }
   }

packages/runtime/src/helpers/edge.ts

@@ -0,0 +1 @@
+[]

packages/runtime/src/templates/edge/matchers.json

@@ -359,3 +359,37 @@ const TEST_ROUTE = /\/\[[^/]+?\](?=\/|$)/
 export function isDynamicRoute(route: string): boolean {
   return TEST_ROUTE.test(route)
 }
+
+// packages/next/shared/lib/router/utils/middleware-route-matcher.ts
+
+export interface MiddlewareRouteMatch {
+  (pathname: string | null | undefined, request: Pick<Request, 'headers' | 'url'>, query: Params): boolean
+}
+
+export interface MiddlewareMatcher {
+  regexp: string
+  locale?: false
+  has?: RouteHas[]
+}
+
+export function getMiddlewareRouteMatcher(matchers: MiddlewareMatcher[]): MiddlewareRouteMatch {
+  return (pathname: string | null | undefined, req: Pick<Request, 'headers' | 'url'>, query: Params) => {
+    for (const matcher of matchers) {
+      const routeMatch = new RegExp(matcher.regexp).exec(pathname!)
+      if (!routeMatch) {
+        continue
+      }
+
+      if (matcher.has) {
+        const hasParams = matchHas(req, matcher.has, query)
+        if (!hasParams) {
+          continue
+        }
+      }
+
+      return true
+    }
+
+    return false
+  }
+}

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

@@ -84,12 +84,7 @@ function matchHas(request: Request, has?: RouteHas[]): Params | false {
   if (!has?.length) {
     return {}
   }
-  return nextMatchHas(
-    request,
-    // y u no narrow `has` type?
-    has,
-    searchParamsToUrlQuery(url.searchParams),
-  )
+  return nextMatchHas(request, has, searchParamsToUrlQuery(url.searchParams))
 }
 
 /**

packages/runtime/src/templates/edge/router.ts

@@ -1,7 +1,11 @@
 import type { Context } from 'https://edge.netlify.com'
-
+// Available at build time
+import matchers from './matchers.json' assert { type: 'json' }
 import edgeFunction from './bundle.js'
 import { buildResponse } from './utils.ts'
+import { getMiddlewareRouteMatcher, MiddlewareRouteMatch, searchParamsToUrlQuery } from './next-utils.ts'
+
+const matchesMiddleware: MiddlewareRouteMatch = getMiddlewareRouteMatcher(matchers || [])
 
 export interface FetchEventResult {
   response: Response
@@ -49,8 +53,15 @@ const handler = async (req: Request, context: Context) => {
     // Don't run in dev
     return
   }
+
   const url = new URL(req.url)
 
+  // While we have already checked the path when mapping to the edge function,
+  // Next.js supports extra rules that we need to check here too.
+  if (!matchesMiddleware(url.pathname, req, searchParamsToUrlQuery(url.searchParams))) {
+    return
+  }
+
   const geo = {
     country: context.geo.country?.code,
     region: context.geo.subdivision?.code,