Merge remote-tracking branch 'upstream/canary' into fix/update-runtim…

…e-hot-chunk-name
vercel · Jun 17, 2021 · b9c27e6 · b9c27e6
2 parents 94339c3 + ef379f1
commit b9c27e6
Show file tree

Hide file tree

Showing 9 changed files with 117 additions and 22 deletions.
diff --git a/docs/basic-features/script.md b/docs/basic-features/script.md
@@ -6,23 +6,41 @@ description: Next.js helps you optimize loading third-party scripts with the bui
 
 Since version **11**, Next.js has a built-in Script component.
 
-Example of usage
+Example of usage:
 
 ```js
-import Script from 'next/script'
-
 // Before
-<script
-  async
-  src="https://www.google-analytics.com/analytics.js"
-/>
+
+// pages/index.js
+import Head from 'next/head'
+
+function Home() {
+  return (
+    <>
+      <Head>
+        <script async src="https://www.google-analytics.com/analytics.js" />
+      </Head>
+    </Head>
+  )
+}
 
 // After
-<Script
-  src="https://www.google-analytics.com/analytics.js"
-/>
+
+// pages/index.js
+
+function Home() {
+  return (
+    <>
+      <Script src="https://www.google-analytics.com/analytics.js" />
+    </>
+  )
+}
 ```
 
+> Note: `next/script` should **not** be wrapped in `next/head`.
+
+> Note: `next/script` should **not** be used in `pages/_document.js` as `next/script` has client-side functionality to ensure loading order.
+
 Three loading strategies will be initially supported for wrapping third-party scripts:
 
 - `beforeInteractive`

diff --git a/errors/future-webpack5-moved-to-webpack5.md b/errors/future-webpack5-moved-to-webpack5.md
@@ -6,7 +6,7 @@ The `future.webpack5` option has been moved to `webpack5` in `next.config.js`.
 
 #### Possible Ways to Fix It
 
-If you had the value `true` you can removed the option as webpack 5 is now the default for all Next.js apps unless opted out.
+If you had the value `true` you can remove the option as webpack 5 is now the default for all Next.js apps unless opted out.
 
 If you had he value `false` you can update `next.config.js`:
 

diff --git a/examples/with-chakra-ui-typescript/package.json b/examples/with-chakra-ui-typescript/package.json
@@ -21,7 +21,7 @@
     "@types/node": "^14.6.0",
     "@types/react": "^17.0.3",
     "@types/react-dom": "^17.0.3",
-    "typescript": "4.2.3"
+    "typescript": "4.3.2"
   },
   "license": "MIT"
 }
diff --git a/examples/with-supertokens/package.json b/examples/with-supertokens/package.json
@@ -9,10 +9,10 @@
   },
   "dependencies": {
     "next": "latest",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "supertokens-auth-react": "^0.13.0",
-    "supertokens-node": "^5.0.0"
+    "react": "17.0.1",
+    "react-dom": "17.0.1",
+    "supertokens-auth-react": "^0.14.0",
+    "supertokens-node": "^6.0.0"
   },
   "license": "MIT"
 }
diff --git a/packages/next/next-server/lib/router/utils/prepare-destination.ts b/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': {

diff --git a/test/integration/custom-routes/next.config.js b/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',

diff --git a/test/integration/custom-routes/pages/blog/[post]/index.js b/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' })
 

diff --git a/test/integration/custom-routes/test/index.test.js b/test/integration/custom-routes/test/index.test.js
@@ -39,6 +39,42 @@ let appPort
 let app
 
 const runTests = (isDev = false) => {
+  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 support long URLs for rewrites', async () => {
     const res = await fetchViaHTTP(
       appPort,
@@ -1718,6 +1754,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$'),

diff --git a/test/lib/next-test-utils.js b/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)
 }