Ensure query is present with i18n and history navigation (#20441)

This makes sure the query isn't dropped when doing a history navigation with i18n. Additional tests have been added to ensure this is working correctly as well. 

Fixes: https://github.com/vercel/next.js/issues/20212

packages/next/next-server/lib/router/router.ts

@@ -635,9 +635,17 @@ export default class Router implements BaseRouter {
         parsedAs.pathname,
         this.locales
       )
+
       if (localePathResult.detectedLocale) {
         this.locale = localePathResult.detectedLocale
-        url = addBasePath(localePathResult.pathname)
+        parsedAs.pathname = addBasePath(parsedAs.pathname)
+        as = formatWithValidation(parsedAs)
+        url = addBasePath(
+          normalizeLocalePath(
+            hasBasePath(url) ? delBasePath(url) : url,
+            this.locales
+          ).pathname
+        )
       }
 
       // if the locale isn't configured hard navigate to show 404 page

test/integration/i18n-support-base-path/pages/gssp/index.js

@@ -22,9 +22,15 @@ export default function Page(props) {
   )
 }
 
-export const getServerSideProps = ({ locale, locales, defaultLocale }) => {
+export const getServerSideProps = ({
+  locale,
+  locales,
+  defaultLocale,
+  query,
+}) => {
   return {
     props: {
+      query,
       locale,
       locales,
       defaultLocale,

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

@@ -22,9 +22,15 @@ export default function Page(props) {
   )
 }
 
-export const getServerSideProps = ({ locale, locales, defaultLocale }) => {
+export const getServerSideProps = ({
+  locale,
+  locales,
+  defaultLocale,
+  query,
+}) => {
   return {
     props: {
+      query,
       locale,
       locales,
       defaultLocale,

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

@@ -27,6 +27,46 @@ async function addDefaultLocaleCookie(browser) {
 }
 
 export function runTests(ctx) {
+  it('should navigate through history with query correctly', async () => {
+    const browser = await webdriver(ctx.appPort, `${ctx.basePath || '/'}`)
+
+    await browser.eval(`(function() {
+      window.beforeNav = 1
+      window.next.router.push(
+        window.next.router.pathname,
+        window.next.router.asPath,
+        { locale: 'nl' }
+      )
+      window.next.router.push(
+        '/gssp?page=1'
+      )
+    })()`)
+
+    await browser.waitForElementByCss('#gssp')
+
+    const props = JSON.parse(await browser.elementByCss('#props').text())
+    expect(props).toEqual({
+      locale: 'nl',
+      locales,
+      defaultLocale: 'en-US',
+      query: { page: '1' },
+    })
+
+    await browser
+      .back()
+      .waitForElementByCss('#index')
+      .forward()
+      .waitForElementByCss('#gssp')
+
+    const props2 = JSON.parse(await browser.elementByCss('#props').text())
+    expect(props2).toEqual({
+      locale: 'nl',
+      locales,
+      defaultLocale: 'en-US',
+      query: { page: '1' },
+    })
+  })
+
   if (!ctx.isDev) {
     it('should not contain backslashes in pages-manifest', async () => {
       const pagesManifestContent = await fs.readFile(
@@ -1310,7 +1350,7 @@ export function runTests(ctx) {
     }
   })
 
-  it('should provide correctly defaultLocale for locale domain', async () => {
+  it('should provide defaultLocale correctly for locale domain', async () => {
     for (const { host, locale } of [
       { host: 'example.fr', locale: 'fr' },
       { host: 'example.be', locale: 'nl-BE' },
@@ -1336,6 +1376,7 @@ export function runTests(ctx) {
         defaultLocale: locale,
         locale,
         locales,
+        query: {},
       })
       expect(JSON.parse($('#router-locales').text())).toEqual(locales)
     }
@@ -1954,6 +1995,7 @@ export function runTests(ctx) {
     expect(JSON.parse($('#props').text())).toEqual({
       locale: 'en-US',
       locales,
+      query: {},
       defaultLocale: 'en-US',
     })
     expect($('#router-locale').text()).toBe('en-US')
@@ -2165,6 +2207,7 @@ export function runTests(ctx) {
     expect(JSON.parse($('#props').text())).toEqual({
       locale: 'en-US',
       locales,
+      query: {},
       defaultLocale: 'en-US',
     })
     expect($('#router-locale').text()).toBe('en-US')
@@ -2178,6 +2221,7 @@ export function runTests(ctx) {
     expect(JSON.parse($2('#props').text())).toEqual({
       locale: 'nl-NL',
       locales,
+      query: {},
       defaultLocale: 'en-US',
     })
     expect($2('#router-locale').text()).toBe('nl-NL')