fix: handle locales in middleware redirects (#198)

Author: ascorbic

edge-runtime/lib/next-request.ts

@@ -1,6 +1,6 @@
 import type { Context } from '@netlify/edge-functions'
 
-import { normalizeDataUrl, removeBasePath, removeLocaleFromPath } from './util.ts'
+import { normalizeDataUrl, removeBasePath, normalizeLocalePath } from './util.ts'
 
 interface I18NConfig {
   defaultLocale: string
@@ -31,13 +31,27 @@ export interface RequestData {
   }
   url: string
   body?: ReadableStream<Uint8Array>
+  detectedLocale?: string
 }
 
-const normalizeRequestURL = (originalURL: string, nextConfig?: RequestData['nextConfig']) => {
+const normalizeRequestURL = (
+  originalURL: string,
+  nextConfig?: RequestData['nextConfig'],
+): { url: string; detectedLocale?: string } => {
   const url = new URL(originalURL)
 
   url.pathname = removeBasePath(url.pathname, nextConfig?.basePath)
-  url.pathname = removeLocaleFromPath(url.pathname, nextConfig)
+
+  let detectedLocale: string | undefined
+
+  if (nextConfig?.i18n) {
+    const { pathname, detectedLocale: detected } = normalizeLocalePath(
+      url.pathname,
+      nextConfig?.i18n?.locales,
+    )
+    url.pathname = pathname
+    detectedLocale = detected
+  }
 
   // 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
@@ -50,7 +64,10 @@ const normalizeRequestURL = (originalURL: string, nextConfig?: RequestData['next
     url.pathname = `${url.pathname}/`
   }
 
-  return url.toString()
+  return {
+    url: url.toString(),
+    detectedLocale,
+  }
 }
 
 export const buildNextRequest = (
@@ -69,13 +86,16 @@ export const buildNextRequest = (
     timezone,
   }
 
+  const { detectedLocale, url: normalizedUrl } = normalizeRequestURL(url, nextConfig)
+
   return {
     headers: Object.fromEntries(headers.entries()),
     geo,
-    url: normalizeRequestURL(url, nextConfig),
+    url: normalizedUrl,
     method,
     ip: context.ip,
     body: body ?? undefined,
     nextConfig,
+    detectedLocale,
   }
 }

edge-runtime/lib/response.ts

@@ -3,7 +3,7 @@ import { HTMLRewriter } from '../vendor/deno.land/x/html_rewriter@v0.1.0-pre.17/
 
 import { updateModifiedHeaders } from './headers.ts'
 import type { StructuredLogger } from './logging.ts'
-import { normalizeDataUrl, relativizeURL, rewriteDataPath } from './util.ts'
+import { normalizeDataUrl, normalizeLocalePath, relativizeURL, rewriteDataPath } from './util.ts'
 import { addMiddlewareHeaders, isMiddlewareRequest, isMiddlewareResponse } from './middleware.ts'
 import { RequestData } from './next-request.ts'
 
@@ -18,6 +18,7 @@ interface BuildResponseOptions {
   request: Request
   result: FetchEventResult
   nextConfig?: RequestData['nextConfig']
+  requestLocale?: string
 }
 
 export const buildResponse = async ({
@@ -26,6 +27,7 @@ export const buildResponse = async ({
   request,
   result,
   nextConfig,
+  requestLocale,
 }: BuildResponseOptions): Promise<Response | void> => {
   logger
     .withFields({ is_nextresponse_next: result.response.headers.has('x-middleware-next') })
@@ -168,7 +170,22 @@ export const buildResponse = async ({
     return addMiddlewareHeaders(fetch(new Request(rewriteUrl, request)), res)
   }
 
-  const redirect = res.headers.get('Location')
+  let redirect = res.headers.get('location')
+
+  // If we are redirecting a request that had a locale in the URL, we need to add it back in
+  if (redirect && requestLocale) {
+    const redirectUrl = new URL(redirect, request.url)
+
+    const normalizedRedirect = normalizeLocalePath(redirectUrl.pathname, nextConfig?.i18n?.locales)
+
+    const locale = normalizedRedirect.detectedLocale ?? requestLocale
+    // Pages router API routes don't have a locale in the URL
+    if (locale && !redirectUrl.pathname.startsWith(`/api/`)) {
+      redirectUrl.pathname = `/${locale}${normalizedRedirect.pathname}`
+      redirect = redirectUrl.toString()
+      res.headers.set('location', redirect)
+    }
+  }
 
   // Data requests shouldn't automatically redirect in the browser (they might be HTML pages): they're handled by the router
   if (redirect && isDataReq) {

edge-runtime/lib/util.ts

@@ -24,16 +24,40 @@ export const removeBasePath = (path: string, basePath?: string) => {
   return path
 }
 
-export const removeLocaleFromPath = (path: string, nextConfig: RequestData['nextConfig']) => {
-  if (nextConfig?.i18n) {
-    for (const locale of nextConfig.i18n.locales) {
-      const regexp = new RegExp(`^/${locale}($|/)`, 'i')
-      if (path.match(regexp)) {
-        return path.replace(regexp, '/') || '/'
-      }
+// https://github.com/vercel/next.js/blob/canary/packages/next/src/shared/lib/i18n/normalize-locale-path.ts
+
+export interface PathLocale {
+  detectedLocale?: string
+  pathname: string
+}
+
+/**
+ * For a pathname that may include a locale from a list of locales, it
+ * removes the locale from the pathname returning it alongside with the
+ * detected locale.
+ *
+ * @param pathname A pathname that may include a locale.
+ * @param locales A list of locales.
+ * @returns The detected locale and pathname without locale
+ */
+export function normalizeLocalePath(pathname: string, locales?: string[]): PathLocale {
+  let detectedLocale: string | undefined
+  // first item will be empty string from splitting at first char
+  const pathnameParts = pathname.split('/')
+
+  ;(locales || []).some((locale) => {
+    if (pathnameParts[1] && pathnameParts[1].toLowerCase() === locale.toLowerCase()) {
+      detectedLocale = locale
+      pathnameParts.splice(1, 1)
+      pathname = pathnameParts.join('/') || '/'
+      return true
     }
+    return false
+  })
+  return {
+    pathname,
+    detectedLocale,
   }
-  return path
 }
 
 /**

edge-runtime/middleware.ts

@@ -53,7 +53,13 @@ export async function handleMiddleware(
 
   try {
     const result = await nextHandler({ request: nextRequest })
-    const response = await buildResponse({ context, logger: reqLogger, request, result })
+    const response = await buildResponse({
+      context,
+      logger: reqLogger,
+      request,
+      result,
+      requestLocale: nextRequest.detectedLocale,
+    })
 
     return response
   } catch (error) {