fix: edge-middleware i18n matching (#2555)

* fix: edge-middleware i18n matching * test: update edge-runtime test * test: do not localize data requests --------- Co-authored-by: Rob Stanford <me@robstanford.com>

Author: pieh

edge-runtime/lib/next-request.ts

@@ -2,6 +2,7 @@ import type { Context } from '@netlify/edge-functions'
 
 import {
  addBasePath,
+ addLocale,
  addTrailingSlash,
  normalizeDataUrl,
  normalizeLocalePath,
@@ -73,6 +74,33 @@ const normalizeRequestURL = (
  }
 }
 
+export const localizeRequest = (
+ url: URL,
+ nextConfig?: {
+ basePath?: string
+ i18n?: I18NConfig | null
+ },
+): { localizedUrl: URL; locale?: string } => {
+ const localizedUrl = new URL(url)
+ localizedUrl.pathname = removeBasePath(localizedUrl.pathname, nextConfig?.basePath)
+
+ // Detect the locale from the URL
+ const { detectedLocale } = normalizeLocalePath(localizedUrl.pathname, nextConfig?.i18n?.locales)
+
+ // Add the locale to the URL if not already present
+ localizedUrl.pathname = addLocale(
+ localizedUrl.pathname,
+ detectedLocale ?? nextConfig?.i18n?.defaultLocale,
+ )
+
+ localizedUrl.pathname = addBasePath(localizedUrl.pathname, nextConfig?.basePath)
+
+ return {
+ localizedUrl,
+ locale: detectedLocale,
+ }
+}
+
 export const buildNextRequest = (
  request: Request,
  context: Context,

edge-runtime/lib/util.ts

@@ -29,6 +29,20 @@ export const addBasePath = (path: string, basePath?: string) => {
  return path
 }
 
+// add locale prefix if not present, allowing for locale fallbacks
+export const addLocale = (path: string, locale?: string) => {
+ if (
+ locale &&
+ path.toLowerCase() !== `/${locale.toLowerCase()}` &&
+ !path.toLowerCase().startsWith(`/${locale.toLowerCase()}/`) &&
+ !path.startsWith(`/api/`) &&
+ !path.startsWith(`/_next/`)
+ ) {
+ return `/${locale}${path}`
+ }
+ return path
+}
+
 // https://github.com/vercel/next.js/blob/canary/packages/next/src/shared/lib/i18n/normalize-locale-path.ts
 
 export interface PathLocale {

edge-runtime/middleware.ts

@@ -5,7 +5,7 @@ import nextConfig from './next.config.json' with { type: 'json' }
 
 import { InternalHeaders } from './lib/headers.ts'
 import { logger, LogLevel } from './lib/logging.ts'
-import { buildNextRequest, RequestData } from './lib/next-request.ts'
+import { buildNextRequest, localizeRequest, RequestData } from './lib/next-request.ts'
 import { buildResponse, FetchEventResult } from './lib/response.ts'
 import {
  getMiddlewareRouteMatcher,
@@ -31,25 +31,29 @@ export async function handleMiddleware(
  context: Context,
  nextHandler: NextHandler,
 ) {
- const nextRequest = buildNextRequest(request, context, nextConfig)
  const url = new URL(request.url)
+
  const reqLogger = logger
  .withLogLevel(
  request.headers.has(InternalHeaders.NFDebugLogging) ? LogLevel.Debug : LogLevel.Log,
  )
  .withFields({ url_path: url.pathname })
  .withRequestID(request.headers.get(InternalHeaders.NFRequestID))
 
+ const { localizedUrl } = localizeRequest(url, nextConfig)
  // 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, because we
  // might be running an edge function for a path we should not. If we find
  // that's the case, short-circuit the execution.
- if (!matchesMiddleware(url.pathname, request, searchParamsToUrlQuery(url.searchParams))) {
+ if (
+ !matchesMiddleware(localizedUrl.pathname, request, searchParamsToUrlQuery(url.searchParams))
+ ) {
  reqLogger.debug('Aborting middleware due to runtime rules')
 
  return
  }
 
+ const nextRequest = buildNextRequest(request, context, nextConfig)
  try {
  const result = await nextHandler({ request: nextRequest })
  const response = await buildResponse({

src/build/functions/edge.ts

@@ -65,10 +65,7 @@ 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(augmentMatchers(matchers, ctx)),
- )
+ await writeFile(join(handlerRuntimeDirectory, 'matchers.json'), JSON.stringify(matchers))
 
  // 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

tests/fixtures/middleware-conditions/middleware.ts

@@ -19,7 +19,7 @@ export const config = {
  source: '/hello',
  },
  {
- source: '/nl-NL/about',
+ source: '/nl/about',
  locale: false,
  },
  ],

tests/integration/edge-handler.test.ts

@@ -261,26 +261,29 @@ describe("aborts middleware execution when the matcher conditions don't match th
 
  ctx.cleanup?.push(() => origin.stop())
 
- for (const path of ['/hello', '/en/hello', '/nl-NL/hello', '/nl-NL/about']) {
+ for (const path of ['/hello', '/en/hello', '/nl/hello', '/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(
+ response.headers.has('x-hello-from-middleware-res'),
+ `should 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']) {
+ for (const path of ['/invalid/hello', '/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}`,
+ `should not match ${path}`,
  ).toBeFalsy()
  expect(await response.text()).toBe('Hello from origin!')
  expect(response.status).toBe(200)