fix: match bare route for i18n site middleware (#288)

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

Author: ascorbic

package-lock.json

@@ -76,6 +76,7 @@
     "os": "^0.1.2",
     "outdent": "^0.8.0",
     "p-limit": "^4.0.0",
+    "path-to-regexp": "^6.2.1",
     "picomatch": "^3.0.1",
     "regexp-tree": "^0.1.27",
     "typescript": "^5.1.6",

package.json

@@ -3,6 +3,7 @@ import { dirname, join, relative } from 'node:path'
 
 import { glob } from 'fast-glob'
 import type { EdgeFunctionDefinition as NextDefinition } from 'next/dist/build/webpack/plugins/middleware-plugin.js'
+import { pathToRegexp } from 'path-to-regexp'
 
 import { EDGE_HANDLER_NAME, PluginContext } from '../plugin-context.js'
 
@@ -37,6 +38,33 @@ const copyRuntime = async (ctx: PluginContext, handlerDirectory: string): Promis
   )
 }
 
+/**
+ * When i18n is enabled the matchers assume that paths _always_ include the
+ * locale. We manually add an extra matcher for the original path without
+ * the locale to ensure that the edge function can handle it.
+ * We don't need to do this for data routes because they always have the locale.
+ */
+const augmentMatchers = (
+  matchers: NextDefinition['matchers'],
+  ctx: PluginContext,
+): NextDefinition['matchers'] => {
+  if (!ctx.buildConfig.i18n) {
+    return matchers
+  }
+  return matchers.flatMap((matcher) => {
+    if (matcher.originalSource && matcher.locale !== false) {
+      return [
+        matcher,
+        {
+          ...matcher,
+          regexp: pathToRegexp(matcher.originalSource).source,
+        },
+      ]
+    }
+    return matcher
+  })
+}
+
 const writeHandlerFile = async (ctx: PluginContext, { matchers, name }: NextDefinition) => {
   const nextConfig = ctx.buildConfig
   const handlerName = getHandlerName({ name })
@@ -49,7 +77,10 @@ const writeHandlerFile = async (ctx: PluginContext, { matchers, name }: NextDefi
 
   // Writing a file with the matchers that should trigger this function. We'll
   // read this file from the function at runtime.
-  await writeFile(join(handlerRuntimeDirectory, 'matchers.json'), JSON.stringify(matchers))
+  await writeFile(
+    join(handlerRuntimeDirectory, 'matchers.json'),
+    JSON.stringify(augmentMatchers(matchers, ctx)),
+  )
 
   // The config is needed by the edge function to match and normalize URLs. To
   // avoid shipping and parsing a large file at runtime, let's strip it down to
@@ -140,9 +171,10 @@ const buildHandlerDefinition = (
   const funName = name.endsWith('middleware')
     ? 'Next.js Middleware Handler'
     : `Next.js Edge Handler: ${page}`
-  const cache = name.endsWith('middleware') ? undefined : 'manual'
+  const cache = name.endsWith('middleware') ? undefined : ('manual' as const)
   const generator = `${ctx.pluginName}@${ctx.pluginVersion}`
-  return matchers.map((matcher) => ({
+
+  return augmentMatchers(matchers, ctx).map((matcher) => ({
     function: fun,
     name: funName,
     pattern: matcher.regexp,

src/build/functions/edge.ts

@@ -15,5 +15,12 @@ export const config = {
       source: '/foo',
       missing: [{ type: 'header', key: 'x-custom-header', value: 'custom-value' }],
     },
+    {
+      source: '/hello',
+    },
+    {
+      source: '/nl-NL/about',
+      locale: false,
+    },
   ],
 }

tests/fixtures/middleware-conditions/middleware.ts

@@ -1,6 +1,10 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   output: 'standalone',
+  i18n: {
+    locales: ['en', 'fr', 'nl', 'es'],
+    defaultLocale: 'en',
+  },
   eslint: {
     ignoreDuringBuilds: true,
   },

tests/fixtures/middleware-conditions/next.config.js

@@ -251,6 +251,45 @@ describe("aborts middleware execution when the matcher conditions don't match th
     expect(response2.headers.has('x-hello-from-middleware-res')).toBeFalsy()
     expect(origin.calls).toBe(2)
   })
+
+  test<FixtureTestContext>('should handle locale matching correctly', async (ctx) => {
+    await createFixture('middleware-conditions', ctx)
+    await runPlugin(ctx)
+
+    const origin = await LocalServer.run(async (req, res) => {
+      expect(req.headers['x-hello-from-middleware-req']).toBeUndefined()
+
+      res.write('Hello from origin!')
+      res.end()
+    })
+
+    ctx.cleanup?.push(() => origin.stop())
+
+    for (const path of ['/hello', '/en/hello', '/nl-NL/hello', '/nl-NL/about']) {
+      const response = await invokeEdgeFunction(ctx, {
+        functions: ['___netlify-edge-handler-middleware'],
+        origin,
+        url: path,
+      })
+      expect(response.headers.has('x-hello-from-middleware-res'), `does match ${path}`).toBeTruthy()
+      expect(await response.text()).toBe('Hello from origin!')
+      expect(response.status).toBe(200)
+    }
+
+    for (const path of ['/hello/invalid', '/about', '/en/about']) {
+      const response = await invokeEdgeFunction(ctx, {
+        functions: ['___netlify-edge-handler-middleware'],
+        origin,
+        url: path,
+      })
+      expect(
+        response.headers.has('x-hello-from-middleware-res'),
+        `does not match ${path}`,
+      ).toBeFalsy()
+      expect(await response.text()).toBe('Hello from origin!')
+      expect(response.status).toBe(200)
+    }
+  })
 })
 
 describe('should run middleware on data requests', () => {

tests/integration/edge-handler.test.ts

@@ -259,6 +259,8 @@ export async function runPlugin(
     const result = await bundle([edgeSource], dist, [], {
       bootstrapURL,
       internalSrcFolder: edgeSource,
+      // Temporary until https://github.com/netlify/edge-bundler/pull/580 rolls out
+      featureFlags: { edge_bundler_pcre_regexp: true },
       importMapPaths: [],
       basePath: ctx.cwd,
       configPath: join(edgeSource, 'manifest.json'),