Fix base path handling with URL queries in dev server (#13560)

So I can't *entirely* explain why, but I believe this fixes #13132. 🙈 I basically ended up looking around at other `_next` URLs (are those asset URLs?) around the project and seeing that they tended to use `delBasePath()` to remove the base path from the current page's path whenever it was used.

When testing locally with the [repo submitted with the issue](https://github.com/robertovg/next-base-path-example), I no longer experience the constant page-reloading in dev mode when adding a query string to the URL.

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

@@ -379,6 +379,10 @@ export default class Router implements BaseRouter {
       let url = typeof _url === 'object' ? formatWithValidation(_url) : _url
       let as = typeof _as === 'object' ? formatWithValidation(_as) : _as
 
+      // parse url parts without basePath since pathname should map 1-1 with
+      // pages dir
+      const { pathname, query, protocol } = parse(delBasePath(url), true)
+
       url = addBasePath(url)
       as = addBasePath(as)
 
@@ -410,8 +414,6 @@ export default class Router implements BaseRouter {
         return resolve(true)
       }
 
-      const { pathname, query, protocol } = parse(url, true)
-
       if (!pathname || protocol) {
         if (process.env.NODE_ENV !== 'production') {
           throw new Error(

test/integration/basepath/pages/gsp.js

@@ -1,3 +1,5 @@
+import { useRouter } from 'next/router'
+
 export const getStaticProps = () => {
   return {
     props: {
@@ -11,5 +13,6 @@ export default (props) => (
   <>
     <h3 id="gsp">getStaticProps</h3>
     <p id="props">{JSON.stringify(props)}</p>
+    <div id="pathname">{useRouter().pathname}</div>
   </>
 )

test/integration/basepath/pages/gssp.js

@@ -1,3 +1,5 @@
+import { useRouter } from 'next/router'
+
 export const getServerSideProps = () => {
   return {
     props: {
@@ -11,5 +13,6 @@ export default (props) => (
   <>
     <h3 id="gssp">getServerSideProps</h3>
     <p id="props">{JSON.stringify(props)}</p>
+    <div id="pathname">{useRouter().pathname}</div>
   </>
 )

test/integration/basepath/pages/hello.js

@@ -21,5 +21,6 @@ export default () => (
       </a>
     </Link>
     <div id="base-path">{useRouter().basePath}</div>
+    <div id="pathname">{useRouter().pathname}</div>
   </>
 )

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

@@ -59,17 +59,23 @@ const runTests = (context, dev = false) => {
 
     const props = JSON.parse(await browser.elementByCss('#props').text())
     expect(props.hello).toBe('world')
+
+    const pathname = await browser.elementByCss('#pathname').text()
+    expect(pathname).toBe('/gsp')
   })
 
   it('should fetch data for getServerSideProps without reloading', async () => {
     const browser = await webdriver(context.appPort, '/docs/hello')
     await browser.eval('window.beforeNavigate = true')
-    await browser.elementByCss('#gsp-link').click()
-    await browser.waitForElementByCss('#gsp')
+    await browser.elementByCss('#gssp-link').click()
+    await browser.waitForElementByCss('#gssp')
     expect(await browser.eval('window.beforeNavigate')).toBe(true)
 
     const props = JSON.parse(await browser.elementByCss('#props').text())
     expect(props.hello).toBe('world')
+
+    const pathname = await browser.elementByCss('#pathname').text()
+    expect(pathname).toBe('/gssp')
   })
 
   it('should have correct href for a link', async () => {
@@ -118,6 +124,24 @@ const runTests = (context, dev = false) => {
       await browser.close()
     }
   })
+
+  it('should allow URL query strings without refresh', async () => {
+    const browser = await webdriver(context.appPort, '/docs/hello?query=true')
+    try {
+      await browser.eval('window.itdidnotrefresh = "hello"')
+      await new Promise((resolve, reject) => {
+        // Timeout of EventSource created in setupPing()
+        // (on-demand-entries-utils.js) is 5000 ms (see #13132, #13560)
+        setTimeout(resolve, 10000)
+      })
+      expect(await browser.eval('window.itdidnotrefresh')).toBe('hello')
+
+      const pathname = await browser.elementByCss('#pathname').text()
+      expect(pathname).toBe('/hello')
+    } finally {
+      await browser.close()
+    }
+  })
 }
 
 describe('basePath development', () => {