[backport] Fix i18n fallback: false collision (#82158)

This backports #82136 to our
next-15-4 release branch

Author: ijjk

packages/next/src/server/lib/i18n-provider.ts

@@ -118,8 +118,8 @@ export class I18NProvider {
       // query and strip it from the pathname.
       if (analysis.detectedLocale) {
         if (analysis.detectedLocale !== detectedLocale) {
-          throw new Error(
-            `Invariant: The detected locale does not match the locale in the query. Expected to find '${detectedLocale}' in '${pathname}' but found '${analysis.detectedLocale}'}`
+          console.warn(
+            `The detected locale does not match the locale in the query. Expected to find '${detectedLocale}' in '${pathname}' but found '${analysis.detectedLocale}'}`
           )
         }
 

packages/next/src/server/next-server.ts

@@ -1096,9 +1096,9 @@ export default class NextNodeServer extends BaseServer<
       throw new Error('Invariant: pathname is undefined')
     }
 
-    // This is a catch-all route, there should be no fallbacks so mark it as
-    // such.
-    addRequestMeta(req, 'bubbleNoFallback', true)
+    // When in minimal mode we do not bubble the fallback as the
+    // router-server is not present to handle the error
+    addRequestMeta(req, 'bubbleNoFallback', this.minimalMode ? undefined : true)
 
     // TODO: this is only needed until route-module can handle
     // rendering/serving the 404 directly with next-server

test/e2e/i18n-fallback-collision/i18n-fallback-collision.test.ts

@@ -0,0 +1,45 @@
+import { nextTestSetup } from 'e2e-utils'
+
+describe('i18n-disallow-multiple-locales', () => {
+  const { next } = nextTestSetup({
+    files: __dirname,
+  })
+
+  it.each([
+    ['/non-existent'],
+    ['/es/non-existent'],
+    ['/first/non-existent'],
+    ['/es/first/non-existent'],
+    ['/first/second/non-existent'],
+    ['/es/first/second/non-existent'],
+  ])(
+    'should 404 properly for fallback: false non-prerendered %s',
+    async (pathname) => {
+      const res = await next.fetch(pathname)
+      expect(res.status).toBe(404)
+    }
+  )
+
+  it.each([
+    { urlPath: '/first', page: '/[first]' },
+    { urlPath: '/first/second', page: '/[first]/[second]' },
+    { urlPath: '/first/second/third', page: '/[first]/[second]/[third]' },
+    {
+      urlPath: '/first/second/third/fourth',
+      page: '/[first]/[second]/[third]/[fourth]',
+    },
+  ])(
+    'should render properly for fallback: false prerendered $urlPath',
+    async ({ urlPath, page }) => {
+      const res = await next.fetch(urlPath)
+      expect(res.status).toBe(200)
+      expect(await res.text()).toContain(page)
+    }
+  )
+
+  it('should render properly for fallback: blocking', async () => {
+    const res = await next.fetch('/first/second/third/another')
+    expect(res.status).toBe(200)
+    expect(await res.text()).toContain('/[first]/[second]/[third]/[fourth]')
+  })
+})

test/e2e/i18n-fallback-collision/next.config.ts

@@ -0,0 +1,13 @@
+import type { NextConfig } from 'next'
+
+const nextConfig: NextConfig = {
+  /* config options here */
+  reactStrictMode: true,
+
+  i18n: {
+    defaultLocale: 'en',
+    locales: ['en', 'es'],
+  },
+}
+
+export default nextConfig

test/e2e/i18n-fallback-collision/pages/[first]/[second]/[third]/[fourth]/index.js

@@ -0,0 +1,32 @@
+export default function Page() {
+  return (
+    <>
+      <p>page: /[first]/[second]/[third]/[fourth]</p>
+    </>
+  )
+}
+
+export function getStaticProps({ params }) {
+  return {
+    props: {
+      params,
+      now: Date.now(),
+    },
+  }
+}
+
+export function getStaticPaths() {
+  return {
+    paths: [
+      {
+        params: {
+          first: 'first',
+          second: 'second',
+          third: 'third',
+          fourth: 'fourth',
+        },
+      },
+    ],
+    fallback: 'blocking',
+  }
+}

test/e2e/i18n-fallback-collision/pages/[first]/[second]/[third]/index.js

@@ -0,0 +1,27 @@
+export default function Page() {
+  return (
+    <>
+      <p>page: /[first]/[second]/[third]</p>
+    </>
+  )
+}
+
+export function getStaticProps({ params }) {
+  return {
+    props: {
+      params,
+      now: Date.now(),
+    },
+  }
+}
+
+export function getStaticPaths() {
+  return {
+    paths: [
+      {
+        params: { first: 'first', second: 'second', third: 'third' },
+      },
+    ],
+    fallback: false,
+  }
+}

test/e2e/i18n-fallback-collision/pages/[first]/[second]/index.js

@@ -0,0 +1,27 @@
+export default function Page() {
+  return (
+    <>
+      <p>page: /[first]/[second]</p>
+    </>
+  )
+}
+
+export function getStaticProps({ params }) {
+  return {
+    props: {
+      params,
+      now: Date.now(),
+    },
+  }
+}
+
+export function getStaticPaths() {
+  return {
+    paths: [
+      {
+        params: { first: 'first', second: 'second' },
+      },
+    ],
+    fallback: false,
+  }
+}

test/e2e/i18n-fallback-collision/pages/[first]/index.js

@@ -0,0 +1,27 @@
+export default function Page() {
+  return (
+    <>
+      <p>page: /[first]</p>
+    </>
+  )
+}
+
+export function getStaticProps({ params }) {
+  return {
+    props: {
+      params,
+      now: Date.now(),
+    },
+  }
+}
+
+export function getStaticPaths() {
+  return {
+    paths: [
+      {
+        params: { first: 'first' },
+      },
+    ],
+    fallback: false,
+  }
+}

test/e2e/i18n-fallback-collision/pages/_app.tsx

@@ -0,0 +1,5 @@
+import type { AppProps } from 'next/app'
+
+export default function App({ Component, pageProps }: AppProps) {
+  return <Component {...pageProps} />
+}

test/e2e/i18n-fallback-collision/pages/_document.tsx

@@ -0,0 +1,13 @@
+import { Html, Head, Main, NextScript } from 'next/document'
+
+export default function Document() {
+  return (
+    <Html lang="en">
+      <Head />
+      <body className="antialiased">
+        <Main />
+        <NextScript />
+      </body>
+    </Html>
+  )
+}