fix: ensure 2nd level middleware match respects locales

Author: orinokai

edge-runtime/lib/next-request.ts

@@ -2,103 +2,110 @@ import type { Context } from '@netlify/edge-functions'
 
 import {
   addBasePath,
-  addTrailingSlash,
+  addLocale,
   normalizeDataUrl,
   normalizeLocalePath,
+  normalizeTrailingSlash,
   removeBasePath,
 } from './util.ts'
 
-interface I18NConfig {
-  defaultLocale: string
-  localeDetection?: false
-  locales: string[]
-}
+import type { NextConfig } from 'next/dist/server/config-shared'
+import type { NextRequest } from 'next/server'
 
-export interface RequestData {
-  geo?: {
-    city?: string
-    country?: string
-    region?: string
-    latitude?: string
-    longitude?: string
-    timezone?: string
-  }
-  headers: Record<string, string>
-  ip?: string
-  method: string
-  nextConfig?: {
-    basePath?: string
-    i18n?: I18NConfig | null
-    trailingSlash?: boolean
-    skipMiddlewareUrlNormalize?: boolean
-  }
-  page?: {
-    name?: string
-    params?: { [key: string]: string }
-  }
-  url: string
-  body?: ReadableStream<Uint8Array>
+export type NetlifyNextRequest = Pick<
+  NextRequest,
+  'url' | 'headers' | 'geo' | 'ip' | 'method' | 'body'
+>
+
+export type NetlifyNextContext = {
+  localizedUrl: string
   detectedLocale?: string
+  i18n?: NextConfig['i18n']
+  basePath?: NextConfig['basePath']
+  trailingSlash?: NextConfig['trailingSlash']
 }
 
-const normalizeRequestURL = (
-  originalURL: string,
-  nextConfig?: RequestData['nextConfig'],
-): { url: string; detectedLocale?: string } => {
+const normalizeRequestURL = (originalURL: string, nextConfig?: NextConfig): string => {
   const url = new URL(originalURL)
 
-  let pathname = removeBasePath(url.pathname, nextConfig?.basePath)
+  url.pathname = removeBasePath(url.pathname, nextConfig?.basePath)
 
-  // If it exists, remove the locale from the URL and store it
-  const { detectedLocale } = normalizeLocalePath(pathname, nextConfig?.i18n?.locales)
+  // We want to run middleware for data requests and expose the URL of the
+  // corresponding pages, so we have to normalize the URLs before running
+  // the handler.
+  url.pathname = normalizeDataUrl(url.pathname)
 
-  if (!nextConfig?.skipMiddlewareUrlNormalize) {
-    // We want to run middleware for data requests and expose the URL of the
-    // corresponding pages, so we have to normalize the URLs before running
-    // the handler.
-    pathname = normalizeDataUrl(pathname)
+  // Normalizing the trailing slash based on the `trailingSlash` configuration
+  // property from the Next.js config.
+  url.pathname = normalizeTrailingSlash(url.pathname, nextConfig?.trailingSlash)
 
-    // Normalizing the trailing slash based on the `trailingSlash` configuration
-    // property from the Next.js config.
-    if (nextConfig?.trailingSlash) {
-      pathname = addTrailingSlash(pathname)
-    }
-  }
+  url.pathname = addBasePath(url.pathname, nextConfig?.basePath)
+
+  return url.toString()
+}
+
+const localizeRequestURL = (
+  originalURL: string,
+  nextConfig?: NextConfig,
+): { localizedUrl: string; detectedLocale?: string } => {
+  const url = new URL(originalURL)
+
+  url.pathname = removeBasePath(url.pathname, nextConfig?.basePath)
 
-  url.pathname = addBasePath(pathname, nextConfig?.basePath)
+  // Detect the locale from the URL
+  const { detectedLocale } = normalizeLocalePath(url.pathname, nextConfig?.i18n?.locales)
+
+  // Add the locale to the URL if not already present
+  url.pathname = addLocale(url.pathname, detectedLocale ?? nextConfig?.i18n?.defaultLocale)
+
+  url.pathname = addBasePath(url.pathname, nextConfig?.basePath)
 
   return {
-    url: url.toString(),
+    localizedUrl: url.toString(),
     detectedLocale,
   }
 }
 
 export const buildNextRequest = (
   request: Request,
   context: Context,
-  nextConfig?: RequestData['nextConfig'],
-): RequestData => {
+  nextConfig?: NextConfig,
+): { nextRequest: NetlifyNextRequest; nextContext: NetlifyNextContext } => {
   const { url, method, body, headers } = request
-  const { country, subdivision, city, latitude, longitude, timezone } = context.geo
-  const geo: RequestData['geo'] = {
-    city,
-    country: country?.code,
-    region: subdivision?.code,
-    latitude: latitude?.toString(),
-    longitude: longitude?.toString(),
-    timezone,
-  }
+  const { country, subdivision, city, latitude, longitude } = context.geo
+  const { i18n, basePath, trailingSlash } = nextConfig ?? {}
 
-  const { detectedLocale, url: normalizedUrl } = normalizeRequestURL(url, nextConfig)
+  const normalizedUrl = nextConfig?.skipMiddlewareUrlNormalize
+    ? url
+    : normalizeRequestURL(url, nextConfig)
 
-  return {
-    headers: Object.fromEntries(headers.entries()),
-    geo,
+  const { localizedUrl, detectedLocale } = localizeRequestURL(normalizedUrl, nextConfig)
+
+  const nextRequest: NetlifyNextRequest = {
     url: normalizedUrl,
-    method,
+    headers,
+    geo: {
+      city,
+      country: country?.code,
+      region: subdivision?.code,
+      latitude: latitude?.toString(),
+      longitude: longitude?.toString(),
+    },
     ip: context.ip,
-    body: body ?? undefined,
-    nextConfig,
+    method,
+    body,
+  }
+
+  const nextContext = {
+    localizedUrl,
     detectedLocale,
+    i18n,
+    trailingSlash,
+    basePath,
+  }
+
+  return {
+    nextRequest,
+    nextContext,
   }
 }

edge-runtime/lib/response.ts

@@ -4,7 +4,7 @@ import { HTMLRewriter } from '../vendor/deno.land/x/[email protected]/
 import { updateModifiedHeaders } from './headers.ts'
 import type { StructuredLogger } from './logging.ts'
 import { addMiddlewareHeaders, isMiddlewareRequest, isMiddlewareResponse } from './middleware.ts'
-import { RequestData } from './next-request.ts'
+import { NetlifyNextContext } from './next-request.ts'
 import {
   addBasePath,
   normalizeDataUrl,
@@ -20,20 +20,18 @@ export interface FetchEventResult {
 
 interface BuildResponseOptions {
   context: Context
-  logger: StructuredLogger
+  nextContext?: NetlifyNextContext
   request: Request
   result: FetchEventResult
-  nextConfig?: RequestData['nextConfig']
-  requestLocale?: string
+  logger: StructuredLogger
 }
 
 export const buildResponse = async ({
   context,
-  logger,
+  nextContext,
   request,
   result,
-  nextConfig,
-  requestLocale,
+  logger,
 }: BuildResponseOptions): Promise<Response | void> => {
   logger
     .withFields({ is_nextresponse_next: result.response.headers.has('x-middleware-next') })
@@ -185,9 +183,9 @@ export const buildResponse = async ({
     }
 
     // respect trailing slash rules to prevent 308s
-    rewriteUrl.pathname = normalizeTrailingSlash(rewriteUrl.pathname, nextConfig?.trailingSlash)
+    rewriteUrl.pathname = normalizeTrailingSlash(rewriteUrl.pathname, nextContext?.trailingSlash)
 
-    const target = normalizeLocalizedTarget({ target: rewriteUrl.toString(), request, nextConfig })
+    const target = normalizeLocalizedTarget({ target: rewriteUrl.toString(), request, nextContext })
     if (target === request.url) {
       logger.withFields({ rewrite_url: rewrite }).debug('Rewrite url is same as original url')
       return
@@ -198,8 +196,8 @@ export const buildResponse = async ({
   }
 
   // If we are redirecting a request that had a locale in the URL, we need to add it back in
-  if (redirect && requestLocale) {
-    redirect = normalizeLocalizedTarget({ target: redirect, request, nextConfig, requestLocale })
+  if (redirect && nextContext?.detectedLocale) {
+    redirect = normalizeLocalizedTarget({ target: redirect, request, nextContext })
     if (redirect === request.url) {
       logger.withFields({ rewrite_url: rewrite }).debug('Rewrite url is same as original url')
       return
@@ -233,28 +231,26 @@ export const buildResponse = async ({
 function normalizeLocalizedTarget({
   target,
   request,
-  nextConfig,
-  requestLocale,
+  nextContext,
 }: {
   target: string
   request: Request
-  nextConfig?: RequestData['nextConfig']
-  requestLocale?: string
+  nextContext?: NetlifyNextContext
 }) {
   const targetUrl = new URL(target, request.url)
 
-  const normalizedTarget = normalizeLocalePath(targetUrl.pathname, nextConfig?.i18n?.locales)
+  const normalizedTarget = normalizeLocalePath(targetUrl.pathname, nextContext?.i18n?.locales)
 
-  const locale = normalizedTarget.detectedLocale ?? requestLocale
+  const locale = normalizedTarget.detectedLocale ?? nextContext?.detectedLocale
   if (
     locale &&
     !normalizedTarget.pathname.startsWith(`/api/`) &&
     !normalizedTarget.pathname.startsWith(`/_next/static/`)
   ) {
     targetUrl.pathname =
-      addBasePath(`/${locale}${normalizedTarget.pathname}`, nextConfig?.basePath) || `/`
+      addBasePath(`/${locale}${normalizedTarget.pathname}`, nextContext?.basePath) || `/`
   } else {
-    targetUrl.pathname = addBasePath(normalizedTarget.pathname, nextConfig?.basePath) || `/`
+    targetUrl.pathname = addBasePath(normalizedTarget.pathname, nextContext?.basePath) || `/`
   }
   return targetUrl.toString()
 }

edge-runtime/lib/routing.ts

@@ -7,8 +7,8 @@
 
 import type { Key } from '../vendor/deno.land/x/[email protected]/index.ts'
 
-import { compile, pathToRegexp } from '../vendor/deno.land/x/[email protected]/index.ts'
 import { getCookies } from '../vendor/deno.land/[email protected]/http/cookie.ts'
+import { compile, pathToRegexp } from '../vendor/deno.land/x/[email protected]/index.ts'
 
 /*
   ┌─────────────────────────────────────────────────────────────────────────┐

edge-runtime/lib/util.ts

@@ -29,6 +29,13 @@ export const addBasePath = (path: string, basePath?: string) => {
   return path
 }
 
+export const addLocale = (path: string, locale?: string) => {
+  if (locale && path !== `/${locale}` && !path.startsWith(`/${locale}/`)) {
+    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,15 +5,15 @@ 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, NetlifyNextRequest } from './lib/next-request.ts'
 import { buildResponse, FetchEventResult } from './lib/response.ts'
 import {
   getMiddlewareRouteMatcher,
   searchParamsToUrlQuery,
   type MiddlewareRouteMatch,
 } from './lib/routing.ts'
 
-type NextHandler = (params: { request: RequestData }) => Promise<FetchEventResult>
+type NextHandler = (params: { request: NetlifyNextRequest }) => Promise<FetchEventResult>
 
 const matchesMiddleware: MiddlewareRouteMatch = getMiddlewareRouteMatcher(matchers || [])
 
@@ -31,7 +31,6 @@ export async function handleMiddleware(
   context: Context,
   nextHandler: NextHandler,
 ) {
-  const nextRequest = buildNextRequest(request, context, nextConfig)
   const url = new URL(request.url)
   const reqLogger = logger
     .withLogLevel(
@@ -40,25 +39,26 @@ export async function handleMiddleware(
     .withFields({ url_path: url.pathname })
     .withRequestID(request.headers.get(InternalHeaders.NFRequestID))
 
+  const { nextRequest, nextContext } = buildNextRequest(request, context, nextConfig)
+  const localizedPath = new URL(nextContext.localizedUrl).pathname
+
   // 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(localizedPath, request, searchParamsToUrlQuery(url.searchParams))) {
     reqLogger.debug('Aborting middleware due to runtime rules')
-
     return
   }
 
   try {
     const result = await nextHandler({ request: nextRequest })
     const response = await buildResponse({
       context,
-      logger: reqLogger,
+      nextContext,
       request,
       result,
-      requestLocale: nextRequest.detectedLocale,
-      nextConfig,
+      logger: reqLogger,
     })
 
     return response

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