Merge branch 'canary' into don-t-recommend-the-usage-of-next-link-wit…

…hout-ch15296
vercel · Nov 17, 2020 · f535451 · f535451
2 parents 220d09f + 99e10a0
commit f535451
Show file tree

Hide file tree

Showing 6 changed files with 160 additions and 5 deletions.
diff --git a/packages/next/client/link.tsx b/packages/next/client/link.tsx
@@ -52,8 +52,13 @@ function prefetch(
       throw err
     }
   })
+  const curLocale =
+    options && typeof options.locale !== 'undefined'
+      ? options.locale
+      : router && router.locale
+
   // Join on an invalid URI character
-  prefetched[href + '%' + as] = true
+  prefetched[href + '%' + as + (curLocale ? '%' + curLocale : '')] = true
 }
 
 function isModifiedEvent(event: React.MouseEvent) {
@@ -251,11 +256,13 @@ function Link(props: React.PropsWithChildren<LinkProps>) {
   )
   useEffect(() => {
     const shouldPrefetch = isVisible && p && isLocalURL(href)
-    const isPrefetched = prefetched[href + '%' + as]
+    const curLocale =
+      typeof locale !== 'undefined' ? locale : router && router.locale
+    const isPrefetched =
+      prefetched[href + '%' + as + (curLocale ? '%' + curLocale : '')]
     if (shouldPrefetch && !isPrefetched) {
       prefetch(router, href, as, {
-        locale:
-          typeof locale !== 'undefined' ? locale : router && router.locale,
+        locale: curLocale,
       })
     }
   }, [as, href, isVisible, locale, p, router])

diff --git a/test/integration/i18n-support-base-path/pages/mixed.js b/test/integration/i18n-support-base-path/pages/mixed.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="links">links 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="/gsp" locale="en-US">
+        <a id="to-gsp-en-us">to /gsp</a>
+      </Link>
+      <br />
+
+      <Link href="/gsp" locale="nl-NL">
+        <a id="to-gsp-nl-nl">to /gsp</a>
+      </Link>
+      <br />
+
+      <Link href="/gsp" locale="fr">
+        <a id="to-gsp-fr">to /gsp</a>
+      </Link>
+    </>
+  )
+}
diff --git a/test/integration/i18n-support-catchall/pages/[[...slug]].js b/test/integration/i18n-support-catchall/pages/[[...slug]].js
@@ -15,6 +15,16 @@ export default function Page(props) {
       <p id="router-pathname">{router.pathname}</p>
       <p id="router-as-path">{router.asPath}</p>
 
+      <Link href="/" locale="en-US">
+        <a id="to-def-locale-index">to /</a>
+      </Link>
+      <br />
+
+      <Link href="/another" locale="en-US">
+        <a id="to-def-locale-another">to /another</a>
+      </Link>
+      <br />
+
       <Link href="/" locale="nl-NL">
         <a id="to-locale-index">to /nl-nl</a>
       </Link>
@@ -24,6 +34,16 @@ export default function Page(props) {
         <a id="to-locale-another">to /nl-nl/another</a>
       </Link>
       <br />
+
+      <Link href="/" locale="fr">
+        <a id="to-fr-locale-index">to /fr</a>
+      </Link>
+      <br />
+
+      <Link href="/another" locale="fr">
+        <a id="to-fr-locale-another">to /fr/another</a>
+      </Link>
+      <br />
     </>
   )
 }

diff --git a/test/integration/i18n-support-catchall/test/index.test.js b/test/integration/i18n-support-catchall/test/index.test.js
@@ -1,5 +1,5 @@
 /* eslint-env jest */
-
+import assert from 'assert'
 import http from 'http'
 import qs from 'querystring'
 import fs from 'fs-extra'
@@ -188,6 +188,43 @@ function runTests(isDev) {
       defaultLocale: 'en-US',
     })
   })
+
+  if (!isDev) {
+    it('should preload data correctly', async () => {
+      const browser = await webdriver(appPort, '/')
+
+      await browser.eval(`(function() {
+        document.querySelector('#to-def-locale-index').scrollIntoView()
+        document.querySelector('#to-def-locale-another').scrollIntoView()
+        document.querySelector('#to-locale-index').scrollIntoView()
+        document.querySelector('#to-locale-another').scrollIntoView()
+        document.querySelector('#to-fr-locale-another').scrollIntoView()
+        document.querySelector('#to-fr-locale-index').scrollIntoView()
+      })()`)
+
+      await check(async () => {
+        const hrefs = await browser.eval(`Object.keys(window.next.router.sdc)`)
+        hrefs.sort()
+
+        console.log({ hrefs })
+
+        assert.deepEqual(
+          hrefs.map((href) =>
+            new URL(href).pathname.replace(/^\/_next\/data\/[^/]+/, '')
+          ),
+          [
+            '/en-US.json',
+            '/en-US/another.json',
+            '/fr.json',
+            '/fr/another.json',
+            '/nl-NL.json',
+            '/nl-NL/another.json',
+          ]
+        )
+        return 'yes'
+      }, 'yes')
+    })
+  }
 }
 
 describe('i18n Support Root Catch-all', () => {

diff --git a/test/integration/i18n-support/pages/mixed.js b/test/integration/i18n-support/pages/mixed.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="links">links 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="/gsp" locale="en-US">
+        <a id="to-gsp-en-us">to /gsp</a>
+      </Link>
+      <br />
+
+      <Link href="/gsp" locale="nl-NL">
+        <a id="to-gsp-nl-nl">to /gsp</a>
+      </Link>
+      <br />
+
+      <Link href="/gsp" locale="fr">
+        <a id="to-gsp-fr">to /gsp</a>
+      </Link>
+    </>
+  )
+}
diff --git a/test/integration/i18n-support/test/shared.js b/test/integration/i18n-support/test/shared.js
@@ -38,6 +38,31 @@ export function runTests(ctx) {
         '`redirect` and `notFound` can not both be returned from getStaticProps at the same time. Page: /gsp/fallback/[slug]'
       )
     })
+  } else {
+    it('should preload all locales data correctly', async () => {
+      const browser = await webdriver(ctx.appPort, `${ctx.basePath}/mixed`)
+
+      await browser.eval(`(function() {
+        document.querySelector('#to-gsp-en-us').scrollIntoView()
+        document.querySelector('#to-gsp-nl-nl').scrollIntoView()
+        document.querySelector('#to-gsp-fr').scrollIntoView()
+      })()`)
+
+      await check(async () => {
+        const hrefs = await browser.eval(`Object.keys(window.next.router.sdc)`)
+        hrefs.sort()
+
+        assert.deepEqual(
+          hrefs.map((href) =>
+            new URL(href).pathname
+              .replace(ctx.basePath, '')
+              .replace(/^\/_next\/data\/[^/]+/, '')
+          ),
+          ['/en-US/gsp.json', '/fr/gsp.json', '/nl-NL/gsp.json']
+        )
+        return 'yes'
+      }, 'yes')
+    })
   }
 
   it('should have correct values for non-prefixed path', async () => {