Fix a couple i18n cases (#17805)

While working on #17755 noticed a couple of cases that needed fixing and broke them out to this PR to make that one easier to review. One fix is for `ssgCacheKey` where it wasn't having the `locale` prefix stripped correctly due to the locales no longer being populated under the server instances `renderOpts` and the second fix is for the `asPath` not being set to `/` when the `locale` is the only part in the URL e.g. `/en` became an empty string `""`

x-ref: #17370

Author: ijjk

packages/next/client/index.tsx

@@ -92,7 +92,7 @@ if (process.env.__NEXT_i18n_SUPPORT) {
     const localePathResult = normalizeLocalePath(asPath, locales)
 
     if (localePathResult.detectedLocale) {
-      asPath = asPath.substr(localePathResult.detectedLocale.length + 1)
+      asPath = asPath.substr(localePathResult.detectedLocale.length + 1) || '/'
     } else {
       // derive the default locale if it wasn't detected in the asPath
       // since we don't prerender static pages with all possible default

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

@@ -1150,6 +1150,13 @@ export default class Server {
     const isDataReq = !!query._nextDataReq && (isSSG || isServerProps)
     delete query._nextDataReq
 
+    const locale = query.__nextLocale as string
+    const locales = query.__nextLocales as string[]
+    // const defaultLocale = query.__nextDefaultLocale as string
+    delete query.__nextLocale
+    delete query.__nextLocales
+    // delete query.__nextDefaultLocale
+
     let previewData: string | false | object | undefined
     let isPreviewMode = false
 
@@ -1178,7 +1185,7 @@ export default class Server {
       }
 
       if (this.nextConfig.experimental.i18n) {
-        return normalizeLocalePath(path, this.renderOpts.locales).pathname
+        return normalizeLocalePath(path, locales).pathname
       }
       return path
     }
@@ -1190,13 +1197,6 @@ export default class Server {
       urlPathname = stripNextDataPath(urlPathname)
     }
 
-    const locale = query.__nextLocale as string
-    const locales = query.__nextLocales as string[]
-    // const defaultLocale = query.__nextDefaultLocale as string
-    delete query.__nextLocale
-    delete query.__nextLocales
-    // delete query.__nextDefaultLocale
-
     const ssgCacheKey =
       isPreviewMode || !isSSG
         ? undefined // Preview mode bypasses the cache

test/integration/i18n-support/test/index.test.js

@@ -26,7 +26,46 @@ let appPort
 
 const locales = ['en-US', 'nl-NL', 'nl-BE', 'nl', 'fr-BE', 'fr', 'en']
 
-function runTests() {
+function runTests(isDev) {
+  it('should update asPath on the client correctly', async () => {
+    for (const check of ['en', 'En']) {
+      const browser = await webdriver(appPort, `/${check}`)
+
+      expect(await browser.elementByCss('html').getAttribute('lang')).toBe('en')
+      expect(await browser.elementByCss('#router-locale').text()).toBe('en')
+      expect(
+        JSON.parse(await browser.elementByCss('#router-locales').text())
+      ).toEqual(locales)
+      expect(await browser.elementByCss('#router-as-path').text()).toBe('/')
+      expect(await browser.elementByCss('#router-pathname').text()).toBe('/')
+    }
+  })
+
+  if (!isDev) {
+    it('should handle fallback correctly after generating', async () => {
+      const browser = await webdriver(
+        appPort,
+        '/en/gsp/fallback/hello-fallback'
+      )
+
+      // wait for the fallback to be generated/stored to ISR cache
+      browser.waitForElementByCss('#gsp')
+
+      // now make sure we're serving the previously generated file from the cache
+      const html = await renderViaHTTP(
+        appPort,
+        '/en/gsp/fallback/hello-fallback'
+      )
+      const $ = cheerio.load(html)
+
+      expect($('#gsp').text()).toBe('gsp page')
+      expect($('#router-locale').text()).toBe('en')
+      expect(JSON.parse($('#router-locales').text())).toEqual(locales)
+      expect($('#router-pathname').text()).toBe('/gsp/fallback/[slug]')
+      expect($('#router-as-path').text()).toBe('/gsp/fallback/hello-fallback')
+    })
+  }
+
   it('should use correct default locale for locale domains', async () => {
     const res = await fetchViaHTTP(appPort, '/', undefined, {
       headers: {
@@ -729,7 +768,7 @@ describe('i18n Support', () => {
     })
     afterAll(() => killApp(app))
 
-    runTests()
+    runTests(true)
   })
 
   describe('production mode', () => {