Don't add locale to client side redirects from data fetching

packages/next/shared/lib/router/router.ts

@@ -1299,6 +1299,9 @@ export default class Router implements BaseRouter {
       // handle redirect on client-transition
       if ((__N_SSG || __N_SSP) && props) {
         if (props.pageProps && props.pageProps.__N_REDIRECT) {
+          // Use the destination from redirect without adding locale
+          options.locale = false
+
           const destination = props.pageProps.__N_REDIRECT
 
           // check if destination is internal (resolves to a page) and attempt

test/e2e/i18n-data-fetching-redirect/app/next.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  i18n: {
+    locales: ['en', 'sv'],
+    defaultLocale: 'en',
+  },
+}

test/e2e/i18n-data-fetching-redirect/app/pages/gsp-blocking-redirect/[locale].js

@@ -0,0 +1,21 @@
+export async function getStaticProps(ctx) {
+  let toLocale = ctx.params.locale
+  if (toLocale === 'from-ctx') {
+    toLocale = ctx.locale
+  }
+
+  return {
+    redirect: {
+      destination: `/${toLocale}/home`,
+      permanent: false,
+    },
+  }
+}
+
+export async function getStaticPaths() {
+  return { paths: [], fallback: 'blocking' }
+}
+
+export default function Component() {
+  return 'gsp-blocking-redirect'
+}

test/e2e/i18n-data-fetching-redirect/app/pages/gsp-fallback-redirect/[locale].js

@@ -0,0 +1,21 @@
+export async function getStaticProps(ctx) {
+  let toLocale = ctx.params.locale
+  if (toLocale === 'from-ctx') {
+    toLocale = ctx.locale
+  }
+
+  return {
+    redirect: {
+      destination: `/${toLocale}/home`,
+      permanent: false,
+    },
+  }
+}
+
+export async function getStaticPaths() {
+  return { paths: [], fallback: true }
+}
+
+export default function Component() {
+  return 'gsp-fallback-redirect'
+}

test/e2e/i18n-data-fetching-redirect/app/pages/gssp-redirect/[locale].js

@@ -0,0 +1,17 @@
+export async function getServerSideProps(ctx) {
+  let toLocale = ctx.params.locale
+  if (toLocale === 'from-ctx') {
+    toLocale = ctx.locale
+  }
+
+  return {
+    redirect: {
+      destination: `/${toLocale}/home`,
+      permanent: false,
+    },
+  }
+}
+
+export default function Component() {
+  return 'gssp-redirect'
+}

test/e2e/i18n-data-fetching-redirect/app/pages/home.js

@@ -0,0 +1,12 @@
+import { useRouter } from 'next/router'
+
+export default function Component() {
+  const router = useRouter()
+  return (
+    <>
+      <p id="router-locale">{router.locale}</p>
+      <p id="router-pathname">{router.pathname}</p>
+      <p id="router-as-path">{router.asPath}</p>
+    </>
+  )
+}

test/e2e/i18n-data-fetching-redirect/app/pages/index.js

@@ -0,0 +1,41 @@
+import Link from 'next/link'
+
+export default function Component() {
+  return (
+    <>
+      <Link href="/gssp-redirect/en">
+        <a id="to-gssp-redirect-en">to /gssp-redirect/en"</a>
+      </Link>
+      <Link href="/gssp-redirect/sv">
+        <a id="to-gssp-redirect-sv">to /gssp-redirect/sv"</a>
+      </Link>
+      <Link href="/gssp-redirect/from-ctx">
+        <a id="to-gssp-redirect-from-ctx">to /gssp-redirect/from-ctx</a>
+      </Link>
+
+      <Link href="/gsp-blocking-redirect/en">
+        <a id="to-gsp-blocking-redirect-en">to /gsp-blocking-redirect/en"</a>
+      </Link>
+      <Link href="/gsp-blocking-redirect/sv">
+        <a id="to-gsp-blocking-redirect-sv">to /gsp-blocking-redirect/sv"</a>
+      </Link>
+      <Link href="/gsp-blocking-redirect/from-ctx">
+        <a id="to-gsp-blocking-redirect-from-ctx">
+          to /gsp-blocking-redirect/from-ctx
+        </a>
+      </Link>
+
+      <Link href="/gsp-fallback-redirect/en">
+        <a id="to-gsp-fallback-redirect-en">to /gsp-fallback-redirect/en"</a>
+      </Link>
+      <Link href="/gsp-fallback-redirect/sv">
+        <a id="to-gsp-fallback-redirect-sv">to /gsp-fallback-redirect/sv"</a>
+      </Link>
+      <Link href="/gsp-fallback-redirect/from-ctx">
+        <a id="to-gsp-fallback-redirect-from-ctx">
+          to /gsp-fallback-redirect/from-ctx
+        </a>
+      </Link>
+    </>
+  )
+}

test/e2e/i18n-data-fetching-redirect/index.test.ts

@@ -0,0 +1,139 @@
+import { join } from 'path'
+import { createNext, FileRef } from 'e2e-utils'
+import { NextInstance } from 'test/lib/next-modes/base'
+import { check } from 'next-test-utils'
+import webdriver from 'next-webdriver'
+
+describe('i18n-data-fetching-redirect', () => {
+  let next: NextInstance
+
+  beforeAll(async () => {
+    next = await createNext({
+      files: {
+        pages: new FileRef(join(__dirname, 'app/pages')),
+        'next.config.js': new FileRef(join(__dirname, 'app/next.config.js')),
+      },
+      dependencies: {},
+    })
+  })
+  afterAll(() => next.destroy())
+
+  describe('Redirect to another locale', () => {
+    test.each`
+      path                       | fromLocale | toLocale
+      ${'gssp-redirect'}         | ${'en'}    | ${'sv'}
+      ${'gssp-redirect'}         | ${'sv'}    | ${'en'}
+      ${'gsp-blocking-redirect'} | ${'en'}    | ${'sv'}
+      ${'gsp-blocking-redirect'} | ${'sv'}    | ${'en'}
+      ${'gsp-fallback-redirect'} | ${'en'}    | ${'sv'}
+      ${'gsp-fallback-redirect'} | ${'sv'}    | ${'en'}
+    `(
+      '$path $fromLocale -> $toLocale',
+      async ({ path, fromLocale, toLocale }) => {
+        const browser = await webdriver(
+          next.url,
+          `/${fromLocale}/${path}/${toLocale}`
+        )
+
+        await check(
+          () => browser.eval('window.location.pathname'),
+          `/${toLocale}/home`
+        )
+        expect(await browser.elementByCss('#router-locale').text()).toBe(
+          toLocale
+        )
+        expect(await browser.elementByCss('#router-pathname').text()).toBe(
+          '/home'
+        )
+        expect(await browser.elementByCss('#router-as-path').text()).toBe(
+          '/home'
+        )
+      }
+    )
+
+    test.each`
+      path                       | fromLocale | toLocale
+      ${'gssp-redirect'}         | ${'en'}    | ${'sv'}
+      ${'gssp-redirect'}         | ${'sv'}    | ${'en'}
+      ${'gsp-blocking-redirect'} | ${'en'}    | ${'sv'}
+      ${'gsp-blocking-redirect'} | ${'sv'}    | ${'en'}
+      ${'gsp-fallback-redirect'} | ${'en'}    | ${'sv'}
+      ${'gsp-fallback-redirect'} | ${'sv'}    | ${'en'}
+    `(
+      'next/link $path $fromLocale -> $toLocale',
+      async ({ path, fromLocale, toLocale }) => {
+        const browser = await webdriver(next.url, `/${fromLocale}`)
+        await browser.eval('window.beforeNav = 1')
+
+        await browser.elementByCss(`#to-${path}-${toLocale}`).click()
+
+        await check(
+          () => browser.eval('window.location.pathname'),
+          `/${toLocale}/home`
+        )
+
+        expect(await browser.eval('window.beforeNav')).toBe(1)
+        expect(await browser.elementByCss('#router-locale').text()).toBe(
+          toLocale
+        )
+        expect(await browser.elementByCss('#router-pathname').text()).toBe(
+          '/home'
+        )
+        expect(await browser.elementByCss('#router-as-path').text()).toBe(
+          '/home'
+        )
+      }
+    )
+  })
+
+  describe('Redirect to locale from context', () => {
+    test.each`
+      path                       | locale
+      ${'gssp-redirect'}         | ${'en'}
+      ${'gssp-redirect'}         | ${'sv'}
+      ${'gsp-blocking-redirect'} | ${'en'}
+      ${'gsp-blocking-redirect'} | ${'sv'}
+      ${'gsp-fallback-redirect'} | ${'en'}
+      ${'gsp-fallback-redirect'} | ${'sv'}
+    `('$path $locale', async ({ path, locale }) => {
+      const browser = await webdriver(next.url, `/${locale}/${path}/from-ctx`)
+
+      await check(
+        () => browser.eval('window.location.pathname'),
+        `/${locale}/home`
+      )
+      expect(await browser.elementByCss('#router-locale').text()).toBe(locale)
+      expect(await browser.elementByCss('#router-pathname').text()).toBe(
+        '/home'
+      )
+      expect(await browser.elementByCss('#router-as-path').text()).toBe('/home')
+    })
+
+    test.each`
+      path                       | locale
+      ${'gssp-redirect'}         | ${'en'}
+      ${'gssp-redirect'}         | ${'sv'}
+      ${'gsp-blocking-redirect'} | ${'en'}
+      ${'gsp-blocking-redirect'} | ${'sv'}
+      ${'gsp-fallback-redirect'} | ${'en'}
+      ${'gsp-fallback-redirect'} | ${'sv'}
+    `('next/link $path $locale', async ({ path, locale }) => {
+      const browser = await webdriver(next.url, `/${locale}`)
+      await browser.eval('window.beforeNav = 1')
+
+      await browser.elementByCss(`#to-${path}-from-ctx`).click()
+
+      await check(
+        () => browser.eval('window.location.pathname'),
+        `/${locale}/home`
+      )
+
+      expect(await browser.eval('window.beforeNav')).toBe(1)
+      expect(await browser.elementByCss('#router-locale').text()).toBe(locale)
+      expect(await browser.elementByCss('#router-pathname').text()).toBe(
+        '/home'
+      )
+      expect(await browser.elementByCss('#router-as-path').text()).toBe('/home')
+    })
+  })
+})