Ensure has query encoding is normalized

packages/next/next-server/lib/router/utils/prepare-destination.ts

@@ -31,6 +31,17 @@ export function matchHas(
   query: Params
 ): false | Params {
   const params: Params = {}
+  let initialQueryValues: string[] = []
+
+  if (typeof window === 'undefined') {
+    initialQueryValues = Object.values((req as any).__NEXT_INIT_QUERY)
+  }
+  if (typeof window !== 'undefined') {
+    initialQueryValues = Array.from(
+      new URLSearchParams(location.search).values()
+    )
+  }
+
   const allMatch = has.every((hasItem) => {
     let value: undefined | string
     let key = hasItem.key
@@ -46,7 +57,12 @@ export function matchHas(
         break
       }
       case 'query': {
+        // preserve initial encoding of query values
         value = query[key!]
+
+        if (initialQueryValues.includes(value || '')) {
+          value = encodeURIComponent(value!)
+        }
         break
       }
       case 'host': {

test/integration/custom-routes/next.config.js

@@ -190,6 +190,16 @@ module.exports = {
           ],
           destination: '/with-params?idk=:idk',
         },
+        {
+          source: '/has-rewrite-8',
+          has: [
+            {
+              type: 'query',
+              key: 'post',
+            },
+          ],
+          destination: '/blog/:post',
+        },
         {
           source: '/blog/about',
           destination: '/hello',

test/integration/custom-routes/pages/blog/[post]/index.js

@@ -1,10 +1,14 @@
 import { useRouter } from 'next/router'
 
-const Page = () => (
-  <>
-    <p>post: {useRouter().query.post}</p>
-  </>
-)
+const Page = () => {
+  const { query } = useRouter()
+  return (
+    <>
+      <p>post: {query.post}</p>
+      <div id="query">{JSON.stringify(query)}</div>
+    </>
+  )
+}
 
 Page.getInitialProps = () => ({ hello: 'world' })
 

test/integration/custom-routes/test/index.test.js

@@ -39,7 +39,43 @@ let appPort
 let app
 
 const runTests = (isDev = false) => {
-  it('should resolveHref correctly navigating through history', async () => {
+  it('should handle has query encoding correctly', async () => {
+    for (const expected of [
+      {
+        post: 'first',
+      },
+      {
+        post: 'hello%20world',
+      },
+      {
+        post: 'hello/world',
+      },
+      {
+        post: 'hello%2fworld',
+      },
+    ]) {
+      const { status = 200, post } = expected
+      const res = await fetchViaHTTP(
+        appPort,
+        '/has-rewrite-8',
+        `?post=${post}`,
+        {
+          redirect: 'manual',
+        }
+      )
+
+      expect(res.status).toBe(status)
+
+      if (status === 200) {
+        const $ = cheerio.load(await res.text())
+        expect(JSON.parse($('#query').text())).toEqual({
+          post: decodeURIComponent(post),
+        })
+      }
+    }
+  })
+
+  it('should resolve href correctly navigating through history', async () => {
     const browser = await webdriver(appPort, '/')
     await browser.eval('window.beforeNav = 1')
 
@@ -1707,6 +1743,17 @@ const runTests = (isDev = false) => {
               regex: normalizeRegEx('^\\/has-rewrite-7$'),
               source: '/has-rewrite-7',
             },
+            {
+              destination: '/blog/:post',
+              has: [
+                {
+                  key: 'post',
+                  type: 'query',
+                },
+              ],
+              regex: normalizeRegEx('^\\/has-rewrite-8$'),
+              source: '/has-rewrite-8',
+            },
             {
               destination: '/hello',
               regex: normalizeRegEx('^\\/blog\\/about$'),

test/lib/next-test-utils.js

@@ -83,7 +83,7 @@ export function renderViaHTTP(appPort, pathname, query, opts) {
 
 export function fetchViaHTTP(appPort, pathname, query, opts) {
   const url = `http://localhost:${appPort}${pathname}${
-    query ? `?${qs.stringify(query)}` : ''
+    typeof query === 'string' ? query : query ? `?${qs.stringify(query)}` : ''
   }`
   return fetch(url, opts)
 }