Avoid adding basePath when it's not needed (#14535)

* Avoid adding basePath when it's not needed

When using the `basePath` setting, on pages with params it will fire a router change. This will pass the url pathname in the `as` param using the `getUrl()` function. This means the `as` path will be sent through already including the `basePath`, leading to `/basePath/basePath/path` which will cause the router to throw an error.

* lint

* Add test case and ensure removal

* Make sure to re-add before changeState
Co-authored-by: NJJ Kasper <jj@jjsweb.site>

packages/next/client/index.js

@@ -9,6 +9,7 @@ import { RouterContext } from '../next-server/lib/router-context'
 import { isDynamicRoute } from '../next-server/lib/router/utils/is-dynamic'
 import * as envConfig from '../next-server/lib/runtime-config'
 import { getURL, loadGetInitialProps, ST } from '../next-server/lib/utils'
+import { delBasePath } from '../next-server/lib/router/router'
 import initHeadManager from './head-manager'
 import PageLoader from './page-loader'
 import measureWebVitals from './performance-relayer'
@@ -48,7 +49,7 @@ envConfig.setConfig({
   publicRuntimeConfig: runtimeConfig || {},
 })
 
-const asPath = getURL()
+const asPath = delBasePath(getURL())
 
 const pageLoader = new PageLoader(buildId, prefix, page)
 const register = ([r, f]) => pageLoader.registerPage(r, f)

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

@@ -263,7 +263,7 @@ export default class Router implements BaseRouter {
         this.changeState(
           'replaceState',
           formatWithValidation({ pathname: addBasePath(pathname), query }),
-          as
+          addBasePath(as)
         )
       }
 

test/integration/basepath/pages/[slug].js

 import { useRouter } from 'next/router'
 
-export default () => <p>slug: {useRouter().query.slug}</p>
+export default () => <p id="slug">slug: {useRouter().query.slug}</p>

test/integration/basepath/test/index.test.js

@@ -116,6 +116,12 @@ const runTests = (context, dev = false) => {
     })
   }
 
+  it('should update dynamic params after mount correctly', async () => {
+    const browser = await webdriver(context.appPort, '/docs/hello-dynamic')
+    const text = await browser.elementByCss('#slug').text()
+    expect(text).toContain('slug: hello-dynamic')
+  })
+
   it('should navigate to index page with getStaticProps', async () => {
     const browser = await webdriver(context.appPort, '/docs/hello')
     await browser.eval('window.beforeNavigate = "hi"')