fix: correctly match params in edge runtime (#1896)

* fix: match params for edge runtime

* chore: re-enable test

* chore: snapidoo

* chore: disable rewrite tests

* chore: enable more tests

* fix: match ef data routes

* chore: add comments

Author: ascorbic

demos/default/pages/edge/[id].js

@@ -0,0 +1,23 @@
+export const config = {
+  runtime: 'experimental-edge',
+}
+
+export default function Page(props) {
+  return (
+    <>
+      <p id="page">/edge/[id]</p>
+      <p id="props">{JSON.stringify(props)}</p>
+    </>
+  )
+}
+
+export function getServerSideProps({ req, params, query }) {
+  return {
+    props: {
+      url: req.url,
+      query,
+      params,
+      now: Date.now(),
+    },
+  }
+}

package-lock.json

@@ -153,6 +153,8 @@ const getMiddlewareBundle = async ({
   const { publish } = netlifyConfig.build
   const chunks: Array<string> = [preamble]
 
+  chunks.push(`export const _DEFINITION = ${JSON.stringify(edgeFunctionDefinition)}`)
+
   if ('wasm' in edgeFunctionDefinition) {
     for (const { name, filePath } of edgeFunctionDefinition.wasm) {
       const wasm = await fs.readFile(join(publish, filePath))
@@ -459,16 +461,22 @@ export const writeEdgeFunctions = async ({
         ...matchers.map((matcher) => middlewareMatcherToEdgeFunctionDefinition(matcher, functionName)),
       )
     }
+    // Functions (i.e. not middleware, but edge SSR and API routes)
     if (typeof middlewareManifest.functions === 'object') {
       // When using the app dir, we also need to check if the EF matches a page
       const appPathRoutesManifest = await loadAppPathRoutesManifest(netlifyConfig)
 
+      // A map of all route pages to their page regex. This is used for pages dir and appDir.
       const pageRegexMap = new Map(
         [...(routesManifest.dynamicRoutes || []), ...(routesManifest.staticRoutes || [])].map((route) => [
           route.page,
           route.regex,
         ]),
       )
+      // Create a map of pages-dir routes to their data route regex (appDir uses the same route as the HTML)
+      const dataRoutesMap = new Map(
+        [...(routesManifest.dataRoutes || [])].map((route) => [route.page, route.dataRouteRegex]),
+      )
 
       for (const edgeFunctionDefinition of Object.values(middlewareManifest.functions)) {
         usesEdge = true
@@ -491,6 +499,16 @@ export const writeEdgeFunctions = async ({
           // cache: "manual" is currently experimental, so we restrict it to sites that use experimental appDir
           cache: usesAppDir ? 'manual' : undefined,
         })
+        // pages-dir page routes also have a data route. If there's a match, add an entry mapping that to the function too
+        const dataRoute = dataRoutesMap.get(edgeFunctionDefinition.page)
+        if (dataRoute) {
+          manifest.functions.push({
+            function: functionName,
+            name: edgeFunctionDefinition.name,
+            pattern: dataRoute,
+            cache: usesAppDir ? 'manual' : undefined,
+          })
+        }
       }
     }
     if (usesEdge) {

packages/runtime/src/helpers/edge.ts

@@ -1,7 +1,8 @@
 /**
  * This placeholder is replaced with the compiled Next.js bundle at build time
  * @param {Object} props
- * @param {import("./runtime.ts").RequestData} props.request
+ * @param {import("./function-runtime.ts").RequestData} props.request
  * @returns {Promise<import("../edge-shared/utils.ts").FetchEventResult>}
  */
 export default async ({ request }) => {}
+export const _DEFINITION = { env: [], files: [], page: 'placeholder', name: 'pages_placeholder', matchers: [] }

packages/runtime/src/templates/edge/bundle.js

@@ -1,6 +1,6 @@
 import type { Context } from 'https://edge.netlify.com'
 // Available at build time
-import edgeFunction from './bundle.js'
+import { _DEFINITION as edgeFunctionDefinition, default as edgeFunction } from './bundle.js'
 import { buildNextRequest, buildResponse, redirectTrailingSlash } from '../edge-shared/utils.ts'
 import nextConfig from '../edge-shared/nextConfig.json' assert { type: 'json' }
 
@@ -11,6 +11,7 @@ const handler = async (req: Request, context: Context) => {
     return redirect
   }
   const request = buildNextRequest(req, context, nextConfig)
+  request.headers['x-matched-path'] ||= edgeFunctionDefinition.page
   try {
     const result = await edgeFunction({ request })
     return buildResponse({ result, request: req, context })