From 2b01bc8ae1179410c23e04123d0b598dcedd502f Mon Sep 17 00:00:00 2001
From: Zack Tanner <1939140+ztanner@users.noreply.github.com>
Date: Thu, 15 Aug 2024 09:28:18 -0700
Subject: [PATCH] fix i18n data pathname resolving

---
 .../shared/lib/i18n/normalize-locale-path.ts  |  6 ++-
 .../i18n-data-route.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, 122 insertions(+), 1 deletion(-)
 create mode 100644 test/e2e/i18n-navigations-middleware/i18n-data-route.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/shared/lib/i18n/normalize-locale-path.ts b/packages/next/src/shared/lib/i18n/normalize-locale-path.ts
index d687605e14a28..e08afa0f8b182 100644
--- a/packages/next/src/shared/lib/i18n/normalize-locale-path.ts
+++ b/packages/next/src/shared/lib/i18n/normalize-locale-path.ts
@@ -17,8 +17,12 @@ export function normalizeLocalePath(
   locales?: string[]
 ): PathLocale {
   let detectedLocale: string | undefined
+  // For data routes, the URL will be prefixed with /_next/data/
+  // Since this function relies on pathname splitting & assumes the locale
+  // is the first part of the path, we need to remove the /_next/data/ prefix.
+  const pathNameNoDataPrefix = pathname.replace(/^\/_next\/data\//, '')
   // first item will be empty string from splitting at first char
-  const pathnameParts = pathname.split('/')
+  const pathnameParts = pathNameNoDataPrefix.split('/')
 
   ;(locales || []).some((locale) => {
     if (
diff --git a/test/e2e/i18n-navigations-middleware/i18n-data-route.test.ts b/test/e2e/i18n-navigations-middleware/i18n-data-route.test.ts
new file mode 100644
index 0000000000000..18b84238bd616
--- /dev/null
+++ b/test/e2e/i18n-navigations-middleware/i18n-data-route.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 <div id="dynamic-locale">Locale: {locale}</div>
+}
diff --git a/test/e2e/i18n-navigations-middleware/pages/index.js b/test/e2e/i18n-navigations-middleware/pages/index.js
new file mode 100644
index 0000000000000..a97c006085cb9
--- /dev/null
+++ b/test/e2e/i18n-navigations-middleware/pages/index.js
@@ -0,0 +1,37 @@
+import Link from 'next/link'
+
+export const getServerSideProps = async ({ locale }) => {
+  return {
+    props: {
+      locale,
+    },
+  }
+}
+
+export default function Home({ locale }) {
+  return (
+    <main
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '20px',
+      }}
+    >
+      <p id="current-locale">Current locale: {locale}</p>
+      Locale switch:
+      <Link href="/" locale="default">
+        Default
+      </Link>
+      <Link href="/" locale="en">
+        English
+      </Link>
+      <Link href="/" locale="de">
+        German
+      </Link>
+      <br />
+      Test links:
+      <Link href="/dynamic/1">Dynamic 1</Link>
+      <Link href="/static">Static</Link>
+    </main>
+  )
+}
diff --git a/test/e2e/i18n-navigations-middleware/pages/static.js b/test/e2e/i18n-navigations-middleware/pages/static.js
new file mode 100644
index 0000000000000..d2653988ff04f
--- /dev/null
+++ b/test/e2e/i18n-navigations-middleware/pages/static.js
@@ -0,0 +1,11 @@
+export const getServerSideProps = async ({ locale }) => {
+  return {
+    props: {
+      locale,
+    },
+  }
+}
+
+export default function Static({ locale }) {
+  return <div id="static-locale">Locale: {locale}</div>
+}