Fix splitting page path by buildId (#19901)

Running next.js in `development` causes issues when having pages named "development" or "developments",... as `this.buildId` = `development` Fixes: #19520
vercel · Jan 19, 2021 · 72ce099 · 72ce099
1 parent d33aad7
commit 72ce099
Show file tree

Hide file tree

Showing 4 changed files with 100 additions and 2 deletions.
diff --git a/packages/next/next-server/server/next-server.ts b/packages/next/next-server/server/next-server.ts
@@ -1401,9 +1401,11 @@ export default class Server {
 
     const stripNextDataPath = (path: string) => {
       if (path.includes(this.buildId)) {
-        path = denormalizePagePath(
-          (path.split(this.buildId).pop() || '/').replace(/\.json$/, '')
+        const splitPath = path.substring(
+          path.indexOf(this.buildId) + this.buildId.length
         )
+
+        path = denormalizePagePath(splitPath.replace(/\.json$/, ''))
       }
 
       if (this.nextConfig.i18n) {

diff --git a/test/integration/i18n-support-base-path/pages/developments/index.js b/test/integration/i18n-support-base-path/pages/developments/index.js
@@ -0,0 +1,33 @@
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+
+export default function Page(props) {
+  const router = useRouter()
+
+  return (
+    <>
+      <p id="developments">developments page</p>
+      <p id="props">{JSON.stringify(props)}</p>
+      <p id="router-locale">{router.locale}</p>
+      <p id="router-default-locale">{router.defaultLocale}</p>
+      <p id="router-locales">{JSON.stringify(router.locales)}</p>
+      <p id="router-query">{JSON.stringify(router.query)}</p>
+      <p id="router-pathname">{router.pathname}</p>
+      <p id="router-as-path">{router.asPath}</p>
+      <Link href="/">
+        <a id="to-index">to /</a>
+      </Link>
+      <br />
+    </>
+  )
+}
+
+export const getServerSideProps = ({ locale, locales, defaultLocale }) => {
+  return {
+    props: {
+      locale,
+      locales,
+      defaultLocale,
+    },
+  }
+}
diff --git a/test/integration/i18n-support/pages/developments/index.js b/test/integration/i18n-support/pages/developments/index.js
@@ -0,0 +1,33 @@
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+
+export default function Page(props) {
+  const router = useRouter()
+
+  return (
+    <>
+      <p id="developments">developments page</p>
+      <p id="props">{JSON.stringify(props)}</p>
+      <p id="router-locale">{router.locale}</p>
+      <p id="router-default-locale">{router.defaultLocale}</p>
+      <p id="router-locales">{JSON.stringify(router.locales)}</p>
+      <p id="router-query">{JSON.stringify(router.query)}</p>
+      <p id="router-pathname">{router.pathname}</p>
+      <p id="router-as-path">{router.asPath}</p>
+      <Link href="/">
+        <a id="to-index">to /</a>
+      </Link>
+      <br />
+    </>
+  )
+}
+
+export const getServerSideProps = ({ locale, locales, defaultLocale }) => {
+  return {
+    props: {
+      locale,
+      locales,
+      defaultLocale,
+    },
+  }
+}
diff --git a/test/integration/i18n-support/test/shared.js b/test/integration/i18n-support/test/shared.js
@@ -37,6 +37,36 @@ async function addDefaultLocaleCookie(browser) {
 }
 
 export function runTests(ctx) {
+  it('should navigate to page with same name as development buildId', async () => {
+    const browser = await webdriver(ctx.appPort, `${ctx.basePath || '/'}`)
+
+    await browser.eval(`(function() {
+      window.beforeNav = 1
+      window.next.router.push('/developments')
+    })()`)
+
+    await browser.waitForElementByCss('#developments')
+    expect(await browser.eval('window.beforeNav')).toBe(1)
+    expect(await browser.elementByCss('#router-locale').text()).toBe('en-US')
+    expect(await browser.elementByCss('#router-default-locale').text()).toBe(
+      'en-US'
+    )
+    expect(await browser.elementByCss('#router-pathname').text()).toBe(
+      '/developments'
+    )
+    expect(await browser.elementByCss('#router-as-path').text()).toBe(
+      '/developments'
+    )
+    expect(
+      JSON.parse(await browser.elementByCss('#router-query').text())
+    ).toEqual({})
+    expect(JSON.parse(await browser.elementByCss('#props').text())).toEqual({
+      locales,
+      locale: 'en-US',
+      defaultLocale: 'en-US',
+    })
+  })
+
   it('should redirect to locale domain correctly client-side', async () => {
     const browser = await webdriver(ctx.appPort, `${ctx.basePath || '/'}`)