From e29ae442aff1f0a1f8916346b3e1c3c3c14ce212 Mon Sep 17 00:00:00 2001
From: Zack Tanner <1939140+ztanner@users.noreply.github.com>
Date: Thu, 15 Aug 2024 16:05:11 -0700
Subject: [PATCH] fix i18n data pathname resolving (#68947)
### What
When using middleware + i18n in pages router, and upon navigation to a
dynamic route, the wrong locale would be served in `getServerSideProps`.
### Why
The route resolver code handles detecting the initial locale by
splitting the path and looking at the first non-empty index to determine
which locale was set. However, it does this assuming it has a regular
path name, and not a `/_next/data` URL.
When middleware is present, the route resolver code hits the
`middleware_next_data` branch, which doesn't have any logic to properly
set the locale. This means that resolveRoutes will return the default
locale rather than the locale from the path.
In the non-middleware case, this would normally flow through
`handleNextDataRequest` in base-server which has handling to infer i18n
via `i18nProvider`. This branch is functionally very similar to what
we're doing in `resolveRoutes` but it does so in a different way: it
reconstructs the URL without the `/_next/data` information and then
attaches locale information. However because `middleware_next_data`
rewrites the pathname to the actual route (ie
`/_next/data/development/foo.json` -> `/foo`), `handleNextDataRequest`
won't handle that request since it's no longer a data request.
It's strange to me that `handleNextDataRequest` and
`middleware_next_data` are doing similar path normalization in
completely different ways, but that was a deeper rabbit hole and simply
removing the normalization logic in `resolveRoutes` causes other
problems.
### How
Since data requests that flow through this middleware matcher logic
aren't going to be handled by `handleNextDataRequest`, I've updated
`middleware_next_data` to perform the logic of attaching the locale
information to the query. Initially I was going to do this for anything
that calls `normalizeLocalePath` but it seems like other branches of
`resolveRoutes` do it in the matcher function directly.
Fixes #54217
Closes NDX-116
---
.../server/lib/router-utils/resolve-routes.ts | 11 +++++
.../i18n-navigations-middleware.test.ts | 43 +++++++++++++++++++
.../i18n-navigations-middleware/middleware.js | 6 +++
.../next.config.js | 9 ++++
.../pages/dynamic/[id].js | 11 +++++
.../pages/index.js | 37 ++++++++++++++++
.../pages/static.js | 11 +++++
7 files changed, 128 insertions(+)
create mode 100644 test/e2e/i18n-navigations-middleware/i18n-navigations-middleware.test.ts
create mode 100644 test/e2e/i18n-navigations-middleware/middleware.js
create mode 100644 test/e2e/i18n-navigations-middleware/next.config.js
create mode 100644 test/e2e/i18n-navigations-middleware/pages/dynamic/[id].js
create mode 100644 test/e2e/i18n-navigations-middleware/pages/index.js
create mode 100644 test/e2e/i18n-navigations-middleware/pages/static.js
diff --git a/packages/next/src/server/lib/router-utils/resolve-routes.ts b/packages/next/src/server/lib/router-utils/resolve-routes.ts
index 0ef3ebc84b506..1250838f93447 100644
--- a/packages/next/src/server/lib/router-utils/resolve-routes.ts
+++ b/packages/next/src/server/lib/router-utils/resolve-routes.ts
@@ -391,6 +391,17 @@ export function getResolveRoutes(
normalized = normalizers.postponed.normalize(normalized, true)
}
+ if (config.i18n) {
+ const curLocaleResult = normalizeLocalePath(
+ normalized,
+ config.i18n.locales
+ )
+
+ if (curLocaleResult.detectedLocale) {
+ parsedUrl.query.__nextLocale = curLocaleResult.detectedLocale
+ }
+ }
+
// If we updated the pathname, and it had a base path, re-add the
// base path.
if (updated) {
diff --git a/test/e2e/i18n-navigations-middleware/i18n-navigations-middleware.test.ts b/test/e2e/i18n-navigations-middleware/i18n-navigations-middleware.test.ts
new file mode 100644
index 0000000000000..18b84238bd616
--- /dev/null
+++ b/test/e2e/i18n-navigations-middleware/i18n-navigations-middleware.test.ts
@@ -0,0 +1,43 @@
+import { nextTestSetup } from 'e2e-utils'
+
+describe('i18n-navigations-middleware', () => {
+ const { next } = nextTestSetup({
+ files: __dirname,
+ })
+
+ it('should respect selected locale when navigating to a dynamic route', async () => {
+ const browser = await next.browser('/')
+ // change to "de" locale
+ await browser.elementByCss("[href='/de']").click()
+ const dynamicLink = await browser.waitForElementByCss(
+ "[href='/de/dynamic/1']"
+ )
+ expect(await browser.elementById('current-locale').text()).toBe(
+ 'Current locale: de'
+ )
+
+ // navigate to dynamic route
+ await dynamicLink.click()
+
+ // the locale should still be "de"
+ expect(await browser.elementById('dynamic-locale').text()).toBe(
+ 'Locale: de'
+ )
+ })
+
+ it('should respect selected locale when navigating to a static route', async () => {
+ const browser = await next.browser('/')
+ // change to "de" locale
+ await browser.elementByCss("[href='/de']").click()
+ const staticLink = await browser.waitForElementByCss("[href='/de/static']")
+ expect(await browser.elementById('current-locale').text()).toBe(
+ 'Current locale: de'
+ )
+
+ // navigate to static route
+ await staticLink.click()
+
+ // the locale should still be "de"
+ expect(await browser.elementById('static-locale').text()).toBe('Locale: de')
+ })
+})
diff --git a/test/e2e/i18n-navigations-middleware/middleware.js b/test/e2e/i18n-navigations-middleware/middleware.js
new file mode 100644
index 0000000000000..cf8566123cde8
--- /dev/null
+++ b/test/e2e/i18n-navigations-middleware/middleware.js
@@ -0,0 +1,6 @@
+import { NextResponse } from 'next/server'
+
+export const config = { matcher: ['/foo'] }
+export async function middleware(req) {
+ return NextResponse.next()
+}
diff --git a/test/e2e/i18n-navigations-middleware/next.config.js b/test/e2e/i18n-navigations-middleware/next.config.js
new file mode 100644
index 0000000000000..73755ea908a1a
--- /dev/null
+++ b/test/e2e/i18n-navigations-middleware/next.config.js
@@ -0,0 +1,9 @@
+/**
+ * @type {import('next').NextConfig}
+ */
+module.exports = {
+ i18n: {
+ defaultLocale: 'default',
+ locales: ['default', 'en', 'de'],
+ },
+}
diff --git a/test/e2e/i18n-navigations-middleware/pages/dynamic/[id].js b/test/e2e/i18n-navigations-middleware/pages/dynamic/[id].js
new file mode 100644
index 0000000000000..7f71bab87d7f5
--- /dev/null
+++ b/test/e2e/i18n-navigations-middleware/pages/dynamic/[id].js
@@ -0,0 +1,11 @@
+export const getServerSideProps = async ({ locale }) => {
+ return {
+ props: {
+ locale,
+ },
+ }
+}
+
+export default function Dynamic({ locale }) {
+ return