fix: ensure locale is in next response url to allow page locale to inferred downstream (#533)

* fix: ensure locale is in next request to allow page locale to be calculated downstream

* test: Add checks for nextRequest locale

Author: mrstork

edge-runtime/lib/next-request.ts

@@ -1,6 +1,6 @@
 import type { Context } from '@netlify/edge-functions'
 
-import { normalizeDataUrl, removeBasePath, normalizeLocalePath, addBasePath } from './util.ts'
+import { addBasePath, normalizeDataUrl, normalizeLocalePath, removeBasePath } from './util.ts'
 
 interface I18NConfig {
   defaultLocale: string
@@ -74,6 +74,11 @@ const normalizeRequestURL = (
     url.pathname = addBasePath(url.pathname, nextConfig?.basePath)
   }
 
+  // keep the locale in the url for request.nextUrl object
+  if (detectedLocale) {
+    url.pathname = `/${detectedLocale}${url.pathname}`
+  }
+
   return {
     url: url.toString(),
     detectedLocale,
@@ -88,9 +93,9 @@ export const buildNextRequest = (
   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,
-    city,
     latitude: latitude?.toString(),
     longitude: longitude?.toString(),
     timezone,

edge-runtime/lib/util.ts

@@ -1,5 +1,3 @@
-import type { RequestData } from './next-request.ts'
-
 /**
  * Normalize a data URL into a route path.
  * @see https://github.com/vercel/next.js/blob/25e0988e7c9033cb1503cbe0c62ba5de2e97849c/packages/next/src/shared/lib/router/utils/get-next-pathname-info.ts#L69-L76

edge-runtime/middleware.ts

@@ -6,12 +6,11 @@ import nextConfig from './next.config.json' assert { type: 'json' }
 import { InternalHeaders } from './lib/headers.ts'
 import { logger, LogLevel } from './lib/logging.ts'
 import { buildNextRequest, RequestData } from './lib/next-request.ts'
-import { buildResponse } from './lib/response.ts'
-import { FetchEventResult } from './lib/response.ts'
+import { buildResponse, FetchEventResult } from './lib/response.ts'
 import {
-  type MiddlewareRouteMatch,
   getMiddlewareRouteMatcher,
   searchParamsToUrlQuery,
+  type MiddlewareRouteMatch,
 } from './lib/routing.ts'
 
 type NextHandler = (params: { request: RequestData }) => Promise<FetchEventResult>

tests/fixtures/middleware-i18n/middleware.js

@@ -80,4 +80,8 @@ export async function middleware(request) {
     console.log(String(new URL('/new-home#fragment', url)))
     return Response.redirect(new URL('/new-home#fragment', url))
   }
+
+  if (url.pathname.includes('/json')) {
+    return NextResponse.json({ url: request.nextUrl.href, locale: request.nextUrl.locale })
+  }
 }

tests/integration/edge-handler.test.ts

@@ -499,4 +499,30 @@ describe('page router', () => {
     expect(url.pathname).toBe('/fr/new-home')
     expect(response.status).toBe(302)
   })
+
+  test<FixtureTestContext>('should preserve locale in request.nextUrl', async (ctx) => {
+    await createFixture('middleware-i18n', ctx)
+    await runPlugin(ctx)
+    const origin = await LocalServer.run(async (req, res) => {
+      res.write(
+        JSON.stringify({
+          url: req.url,
+          headers: req.headers,
+        }),
+      )
+      res.end()
+    })
+    ctx.cleanup?.push(() => origin.stop())
+    const response = await invokeEdgeFunction(ctx, {
+      functions: ['___netlify-edge-handler-middleware'],
+      origin,
+      url: `/fr/json`,
+    })
+    expect(response.status).toBe(200)
+
+    const body = await response.json()
+    const bodyUrl = new URL(body.url)
+    expect(bodyUrl.pathname).toBe('/fr/json')
+    expect(body.locale).toBe('fr')
+  })
 })