Remove querystring from the client (#15378)

packages/next/client/index.js

@@ -1,6 +1,6 @@
 /* global location */
 import { createRouter, makePublicRouterInstance } from 'next/router'
-import { parse as parseQs, stringify as stringifyQs } from 'querystring'
+import * as querystring from '../next-server/lib/router/utils/querystring'
 import React from 'react'
 import ReactDOM from 'react-dom'
 import { HeadManagerContext } from '../next-server/lib/head-manager-context'
@@ -99,10 +99,12 @@ class Container extends React.Component {
       router.replace(
         router.pathname +
           '?' +
-          stringifyQs({
-            ...router.query,
-            ...parseQs(location.search.substr(1)),
-          }),
+          String(
+            querystring.assign(
+              querystring.urlQueryToSearchParams(router.query),
+              new URLSearchParams(location.search)
+            )
+          ),
         asPath,
         {
           // WARNING: `_h` is an internal option for handing Next.js

packages/next/client/page-loader.js

@@ -2,7 +2,7 @@ import mitt from '../next-server/lib/mitt'
 import { isDynamicRoute } from './../next-server/lib/router/utils/is-dynamic'
 import { getRouteMatcher } from './../next-server/lib/router/utils/route-matcher'
 import { getRouteRegex } from './../next-server/lib/router/utils/route-regex'
-import { searchParamsToUrlQuery } from './../next-server/lib/router/utils/search-params-to-url-query'
+import { searchParamsToUrlQuery } from './../next-server/lib/router/utils/querystring'
 import { parseRelativeUrl } from './../next-server/lib/router/utils/parse-relative-url'
 import escapePathDelimiters from '../next-server/lib/router/utils/escape-path-delimiters'
 import getAssetPathFromRoute from './../next-server/lib/router/utils/get-asset-path-from-route'

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

@@ -16,7 +16,7 @@ import {
 import { isDynamicRoute } from './utils/is-dynamic'
 import { getRouteMatcher } from './utils/route-matcher'
 import { getRouteRegex } from './utils/route-regex'
-import { searchParamsToUrlQuery } from './utils/search-params-to-url-query'
+import { searchParamsToUrlQuery } from './utils/querystring'
 import { parseRelativeUrl } from './utils/parse-relative-url'
 import {
   removePathTrailingSlash,

packages/next/next-server/lib/router/utils/format-url.ts

@@ -21,7 +21,8 @@
 // USE OR OTHER DEALINGS IN THE SOFTWARE.
 
 import { UrlObject } from 'url'
-import { encode as encodeQuerystring } from 'querystring'
+import { ParsedUrlQuery } from 'querystring'
+import * as querystring from './querystring'
 
 const slashedProtocols = /https?|ftp|gopher|file/
 
@@ -45,8 +46,7 @@ export function formatUrl(urlObj: UrlObject) {
   }
 
   if (query && typeof query === 'object') {
-    // query = '' + new URLSearchParams(query);
-    query = encodeQuerystring(query)
+    query = String(querystring.urlQueryToSearchParams(query as ParsedUrlQuery))
   }
 
   let search = urlObj.search || (query && `?${query}`) || ''

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

@@ -0,0 +1,42 @@
+import { ParsedUrlQuery } from 'querystring'
+
+export function searchParamsToUrlQuery(
+  searchParams: URLSearchParams
+): ParsedUrlQuery {
+  const query: ParsedUrlQuery = {}
+  searchParams.forEach((value, key) => {
+    if (typeof query[key] === 'undefined') {
+      query[key] = value
+    } else if (Array.isArray(query[key])) {
+      ;(query[key] as string[]).push(value)
+    } else {
+      query[key] = [query[key] as string, value]
+    }
+  })
+  return query
+}
+
+export function urlQueryToSearchParams(
+  urlQuery: ParsedUrlQuery
+): URLSearchParams {
+  const result = new URLSearchParams()
+  Object.entries(urlQuery).forEach(([key, value]) => {
+    if (Array.isArray(value)) {
+      value.forEach((item) => result.append(key, item))
+    } else {
+      result.set(key, value)
+    }
+  })
+  return result
+}
+
+export function assign(
+  target: URLSearchParams,
+  ...searchParamsList: URLSearchParams[]
+): URLSearchParams {
+  searchParamsList.forEach((searchParams) => {
+    Array.from(searchParams.keys()).forEach((key) => target.delete(key))
+    searchParams.forEach((value, key) => target.append(key, value))
+  })
+  return target
+}