Merge branch 'canary' into patch-1

vercel · Apr 19, 2021 · da38d5f · da38d5f
2 parents a3a39f1 + 0bcc694
commit da38d5f
Show file tree

Hide file tree

Showing 72 changed files with 850 additions and 293 deletions.
diff --git a/.github/workflows/build_test_deploy.yml b/.github/workflows/build_test_deploy.yml
@@ -126,7 +126,7 @@ jobs:
       - run: echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p
         if: ${{needs.build.outputs.docsChange != 'docs only change'}}
 
-      - run: yarn add -W --dev spectron@7.0.0 electron@5.0.0
+      - run: cd test/integration/with-electron/app && yarn
         if: ${{needs.build.outputs.docsChange != 'docs only change'}}
 
       - run: xvfb-run node run-tests.js test/integration/with-electron/test/index.test.js

diff --git a/azure-pipelines.yml b/azure-pipelines.yml
@@ -69,7 +69,7 @@ stages:
   - stage: Test
     dependsOn: Build
     jobs:
-      - job: test_ie11_production
+      - job: test_ie11
         pool:
           vmImage: 'windows-2019'
         steps:
@@ -86,7 +86,7 @@ stages:
               path: $(System.DefaultWorkingDirectory)
             displayName: Cache Build
           - script: |
-              yarn testie --forceExit test/integration/production/
+              yarn testie --forceExit test/integration/production/ test/integration/css-client-nav/
             displayName: 'Run tests'
 
       - job: test_unit

diff --git a/docs/advanced-features/custom-app.md b/docs/advanced-features/custom-app.md
@@ -44,6 +44,7 @@ The `Component` prop is the active `page`, so whenever you navigate between rout
 
 - If your app is running and you just added a custom `App`, you'll need to restart the development server. Only required if `pages/_app.js` didn't exist before.
 - Adding a custom `getInitialProps` in your `App` will disable [Automatic Static Optimization](/docs/advanced-features/automatic-static-optimization.md) in pages without [Static Generation](/docs/basic-features/data-fetching.md#getstaticprops-static-generation).
+- When you add `getInitialProps` in your custom app, you must `import App from "next/app"`, call `App.getInitialProps(appContext)` inside `getInitialProps` and merge the returned object into the return value.
 - `App` currently does not support Next.js [Data Fetching methods](/docs/basic-features/data-fetching.md) like [`getStaticProps`](/docs/basic-features/data-fetching.md#getstaticprops-static-generation) or [`getServerSideProps`](/docs/basic-features/data-fetching.md#getserversideprops-server-side-rendering).
 
 ### TypeScript

diff --git a/docs/api-reference/next.config.js/headers.md b/docs/api-reference/next.config.js/headers.md
@@ -154,6 +154,23 @@ module.exports = {
 }
 ```
 
+The following characters `(`, `)`, `{`, `}`, `:`, `*`, `+`, `?` are used for regex path matching, so when used in the `source` as non-special values they must be escaped by adding `\\` before them:
+
+```js
+module.exports = {
+  async redirects() {
+    return [
+      {
+        // this will match `/english(default)/something` being requested
+        source: '/english\\(default\\)/:slug',
+        destination: '/en-us/:slug',
+        permanent: false,
+      },
+    ]
+  },
+}
+```
+
 ## Header, Cookie, and Query Matching
 
 Note: this feature is still experimental and not covered by semver and is to be used at your own risk until it is made stable.

diff --git a/docs/api-reference/next.config.js/redirects.md b/docs/api-reference/next.config.js/redirects.md
@@ -82,7 +82,7 @@ module.exports = {
 
 ### Regex Path Matching
 
-To match a regex path you can wrap the regex in parenthesis after a parameter, for example `/post/:slug(\\d{1,})` will match `/post/123` but not `/post/abc`:
+To match a regex path you can wrap the regex in parentheses after a parameter, for example `/post/:slug(\\d{1,})` will match `/post/123` but not `/post/abc`:
 
 ```js
 module.exports = {
@@ -98,6 +98,23 @@ module.exports = {
 }
 ```
 
+The following characters `(`, `)`, `{`, `}`, `:`, `*`, `+`, `?` are used for regex path matching, so when used in the `source` as non-special values they must be escaped by adding `\\` before them:
+
+```js
+module.exports = {
+  async redirects() {
+    return [
+      {
+        // this will match `/english(default)/something` being requested
+        source: '/english\\(default\\)/:slug',
+        destination: '/en-us/:slug',
+        permanent: false,
+      },
+    ]
+  },
+}
+```
+
 ## Header, Cookie, and Query Matching
 
 Note: this feature is still experimental and not covered by semver and is to be used at your own risk until it is made stable.

diff --git a/docs/api-reference/next.config.js/rewrites.md b/docs/api-reference/next.config.js/rewrites.md
@@ -178,6 +178,23 @@ module.exports = {
 }
 ```
 
+The following characters `(`, `)`, `{`, `}`, `:`, `*`, `+`, `?` are used for regex path matching, so when used in the `source` as non-special values they must be escaped by adding `\\` before them:
+
+```js
+module.exports = {
+  async redirects() {
+    return [
+      {
+        // this will match `/english(default)/something` being requested
+        source: '/english\\(default\\)/:slug',
+        destination: '/en-us/:slug',
+        permanent: false,
+      },
+    ]
+  },
+}
+```
+
 ## Header, Cookie, and Query Matching
 
 Note: this feature is still experimental and not covered by semver and is to be used at your own risk until it is made stable.
@@ -283,29 +300,27 @@ module.exports = {
 
 ### Incremental adoption of Next.js
 
-You can also make Next.js check the application routes before falling back to proxying to the previous website.
+You can also have Next.js fall back to proxying to an existing website after checking all Next.js routes.
 
 This way you don't have to change the rewrites configuration when migrating more pages to Next.js
 
 ```js
 module.exports = {
   async rewrites() {
-    return [
-      // we need to define a no-op rewrite to trigger checking
-      // all pages/static files before we attempt proxying
-      {
-        source: '/:path*',
-        destination: '/:path*',
-      },
-      {
-        source: '/:path*',
-        destination: `https://custom-routes-proxying-endpoint.vercel.app/:path*`,
-      },
-    ]
+    return {
+      fallback: [
+        {
+          source: '/:path*',
+          destination: `https://custom-routes-proxying-endpoint.vercel.app/:path*`,
+        },
+      ],
+    }
   },
 }
 ```
 
+See additional information on incremental adoption [in the docs here](https://nextjs.org/docs/migrating/incremental-adoption).
+
 ### Rewrites with basePath support
 
 When leveraging [`basePath` support](/docs/api-reference/next.config.js/basepath.md) with rewrites each `source` and `destination` is automatically prefixed with the `basePath` unless you add `basePath: false` to the rewrite:

diff --git a/docs/api-reference/next/link.md b/docs/api-reference/next/link.md
@@ -57,7 +57,7 @@ export default Home
 - `href` - The path or URL to navigate to. This is the only required prop
 - `as` - Optional decorator for the path that will be shown in the browser URL bar. Before Next.js 9.5.3 this was used for dynamic routes, check our [previous docs](https://nextjs.org/docs/tag/v9.5.2/api-reference/next/link#dynamic-routes) to see how it worked
 - [`passHref`](#if-the-child-is-a-custom-component-that-wraps-an-a-tag) - Forces `Link` to send the `href` property to its child. Defaults to `false`
-- `prefetch` - Prefetch the page in the background. Defaults to `true`. Any `<Link />` that is in the viewport (initially or through scroll) will be preloaded. Prefetch can be disabled by passing `prefetch={false}`. Pages using [Static Generation](/docs/basic-features/data-fetching.md#getstaticprops-static-generation) will preload `JSON` files with the data for faster page transitions. Prefetching is only enabled in production.
+- `prefetch` - Prefetch the page in the background. Defaults to `true`. Any `<Link />` that is in the viewport (initially or through scroll) will be preloaded. Prefetch can be disabled by passing `prefetch={false}`. When `prefetch` is set to `false`, prefetching will still occur on hover. Pages using [Static Generation](/docs/basic-features/data-fetching.md#getstaticprops-static-generation) will preload `JSON` files with the data for faster page transitions. Prefetching is only enabled in production.
 - [`replace`](#replace-the-url-instead-of-push) - Replace the current `history` state instead of adding a new url into the stack. Defaults to `false`
 - [`scroll`](#disable-scrolling-to-the-top-of-the-page) - Scroll to the top of the page after a navigation. Defaults to `true`
 - [`shallow`](/docs/routing/shallow-routing.md) - Update the path of the current page without rerunning [`getStaticProps`](/docs/basic-features/data-fetching.md#getstaticprops-static-generation), [`getServerSideProps`](/docs/basic-features/data-fetching.md#getserversideprops-server-side-rendering) or [`getInitialProps`](/docs/api-reference/data-fetching/getInitialProps.md). Defaults to `false`

diff --git a/errors/non-dynamic-getstaticpaths-usage.md b/errors/non-dynamic-getstaticpaths-usage.md
@@ -0,0 +1,14 @@
+# getStaticPaths Used on Non-Dynamic Page
+
+#### Why This Error Occurred
+
+On a non-dynamic SSG page `getStaticPaths` was incorrectly exported as this can only be used on dynamic pages to return the paths to prerender.
+
+#### Possible Ways to Fix It
+
+Remove the `getStaticPaths` export on the non-dynamic page or rename the page to be a dynamic page.
+
+### Useful Links
+
+- [Dynamic Routes Documentation](https://nextjs.org/docs/routing/dynamic-routes)
+- [`getStaticPaths` Documentation](https://nextjs.org/docs/routing/dynamic-routes)
diff --git a/examples/with-chakra-ui-typescript/README.md b/examples/with-chakra-ui-typescript/README.md
@@ -25,3 +25,9 @@ yarn create next-app --example with-chakra-ui-typescript with-chakra-ui-typescri
 ```
 
 Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).
+
+## Notes
+
+Chakra has supported Gradients and RTL in `v1.1`. To utilize RTL, [add RTL direction and swap](https://chakra-ui.com/docs/features/rtl-support).
+
+If you don't have multi-direction app, you should make `<Html lang="ar" dir="rtl">` inside `_document.ts`.
diff --git a/examples/with-chakra-ui-typescript/package.json b/examples/with-chakra-ui-typescript/package.json
@@ -8,20 +8,20 @@
   },
   "dependencies": {
     "@chakra-ui/icons": "^1.0.5",
-    "@chakra-ui/react": "^1.3.3",
-    "@chakra-ui/theme-tools": "1.0.4",
+    "@chakra-ui/react": "^1.4.2",
+    "@chakra-ui/theme-tools": "1.1.2",
     "@emotion/react": "11.1.5",
     "@emotion/styled": "11.1.5",
-    "framer-motion": "^3.5.2",
+    "framer-motion": "^4.0.3",
     "next": "latest",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1"
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
   },
   "devDependencies": {
     "@types/node": "^14.6.0",
-    "@types/react": "^16.9.46",
-    "@types/react-dom": "^16.9.8",
-    "typescript": "4.0.5"
+    "@types/react": "^17.0.3",
+    "@types/react-dom": "^17.0.3",
+    "typescript": "4.2.3"
   },
   "license": "MIT"
 }
diff --git a/examples/with-chakra-ui-typescript/src/components/CTA.tsx b/examples/with-chakra-ui-typescript/src/components/CTA.tsx
@@ -9,7 +9,7 @@ export const CTA = () => (
     bottom="0"
     width="100%"
     maxWidth="48rem"
-    py={2}
+    py={3}
   >
     <ChakraLink isExternal href="https://chakra-ui.com" flexGrow={1} mx={2}>
       <Button width="100%" variant="outline" colorScheme="green">

diff --git a/examples/with-chakra-ui-typescript/src/components/Hero.tsx b/examples/with-chakra-ui-typescript/src/components/Hero.tsx
@@ -1,7 +1,13 @@
 import { Flex, Heading } from '@chakra-ui/react'
 
 export const Hero = ({ title }: { title: string }) => (
-  <Flex justifyContent="center" alignItems="center" height="100vh">
+  <Flex
+    justifyContent="center"
+    alignItems="center"
+    height="100vh"
+    bgGradient="linear(to-l, #7928CA, #FF0080)"
+    bgClip="text"
+  >
     <Heading fontSize="6vw">{title}</Heading>
   </Flex>
 )

diff --git a/examples/with-chakra-ui/README.md b/examples/with-chakra-ui/README.md
@@ -21,3 +21,9 @@ yarn create next-app --example with-chakra-ui with-chakra-ui-app
 ```
 
 Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).
+
+## Notes
+
+Chakra has supported Gradients and RTL in `v1.1`. To utilize RTL, [add RTL direction and swap](https://chakra-ui.com/docs/features/rtl-support).
+
+If you don't have multi-direction app, you should make `<Html lang="ar" dir="rtl">` inside `_document.js`.
diff --git a/examples/with-chakra-ui/package.json b/examples/with-chakra-ui/package.json
@@ -8,13 +8,13 @@
   },
   "dependencies": {
     "@chakra-ui/icons": "^1.0.0",
-    "@chakra-ui/react": "^1.0.0",
+    "@chakra-ui/react": "^1.4.2",
     "@emotion/react": "^11.0.0",
     "@emotion/styled": "^11.0.0",
-    "framer-motion": "^2.9.4",
+    "framer-motion": "^4.0.3",
     "next": "latest",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1"
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
   },
   "license": "MIT"
 }
diff --git a/examples/with-chakra-ui/src/components/CTA.js b/examples/with-chakra-ui/src/components/CTA.js
@@ -12,7 +12,7 @@ export const CTA = () => (
     py={2}
   >
     <ChakraLink isExternal href="https://chakra-ui.com" flexGrow={1} mx={2}>
-      <Button width="100%" variant="outline" variantcolor="green">
+      <Button width="100%" bgGradient="linear(to-tr, teal.300,yellow.400)">
         chakra-ui
       </Button>
     </ChakraLink>
@@ -23,7 +23,7 @@ export const CTA = () => (
       flexGrow={3}
       mx={2}
     >
-      <Button width="100%" variant="solid" variantcolor="green">
+      <Button width="100%" bgGradient="linear(to-tr, teal.300,yellow.400)">
         View Repo
       </Button>
     </ChakraLink>

diff --git a/examples/with-chakra-ui/src/components/Hero.js b/examples/with-chakra-ui/src/components/Hero.js
@@ -2,7 +2,13 @@ import { Flex, Heading } from '@chakra-ui/react'
 
 export const Hero = ({ title }) => (
   <Flex justifyContent="center" alignItems="center" height="100vh">
-    <Heading fontSize="10vw">{title}</Heading>
+    <Heading
+      fontSize="10vw"
+      bgGradient="linear(to-l, #7928CA, #FF0080)"
+      bgClip="text"
+    >
+      {title}
+    </Heading>
   </Flex>
 )
 

diff --git a/examples/with-magic/package.json b/examples/with-magic/package.json
@@ -13,7 +13,7 @@
     "next": "latest",
     "react": "latest",
     "react-dom": "latest",
-    "swr": "0.1.16"
+    "swr": "0.5.5"
   },
   "license": "MIT"
 }
diff --git a/examples/with-typescript-graphql/pages/index.tsx b/examples/with-typescript-graphql/pages/index.tsx
@@ -1,6 +1,7 @@
 import Link from 'next/link'
 import { useState } from 'react'
 import {
+  ViewerQuery,
   useViewerQuery,
   useUpdateNameMutation,
   ViewerDocument,
@@ -19,21 +20,18 @@ const Index = () => {
       },
       //Follow apollo suggestion to update cache
       //https://www.apollographql.com/docs/angular/features/cache-updates/#update
-      update: (
-        store,
-        {
-          data: {
-            updateName: { name },
-          },
-        }
-      ) => {
+      update: (cache, mutationResult) => {
+        const { data } = mutationResult
+        if (!data) return // Cancel updating name in cache if no data is returned from mutation.
         // Read the data from our cache for this query.
-        const { viewer } = store.readQuery({ query: ViewerDocument })
+        const { viewer } = cache.readQuery({
+          query: ViewerDocument,
+        }) as ViewerQuery
         const newViewer = { ...viewer }
         // Add our comment from the mutation to the end.
-        newViewer.name = name
+        newViewer.name = data.updateName.name
         // Write our data back to the cache.
-        store.writeQuery({ query: ViewerDocument, data: { viewer: newViewer } })
+        cache.writeQuery({ query: ViewerDocument, data: { viewer: newViewer } })
       },
     })
   }

diff --git a/lerna.json b/lerna.json
@@ -17,5 +17,5 @@
       "registry": "https://registry.npmjs.org/"
     }
   },
-  "version": "10.1.4-canary.7"
+  "version": "10.1.4-canary.10"
 }
diff --git a/packages/create-next-app/package.json b/packages/create-next-app/package.json
@@ -1,6 +1,6 @@
 {
   "name": "create-next-app",
-  "version": "10.1.4-canary.7",
+  "version": "10.1.4-canary.10",
   "keywords": [
     "react",
     "next",

diff --git a/packages/eslint-plugin-next/package.json b/packages/eslint-plugin-next/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/eslint-plugin-next",
-  "version": "10.1.4-canary.7",
+  "version": "10.1.4-canary.10",
   "description": "ESLint plugin for NextJS.",
   "main": "lib/index.js",
   "license": "MIT",

diff --git a/packages/next-bundle-analyzer/package.json b/packages/next-bundle-analyzer/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/bundle-analyzer",
-  "version": "10.1.4-canary.7",
+  "version": "10.1.4-canary.10",
   "main": "index.js",
   "license": "MIT",
   "repository": {

diff --git a/packages/next-codemod/package.json b/packages/next-codemod/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/codemod",
-  "version": "10.1.4-canary.7",
+  "version": "10.1.4-canary.10",
   "license": "MIT",
   "dependencies": {
     "chalk": "4.1.0",

diff --git a/packages/next-env/package.json b/packages/next-env/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/env",
-  "version": "10.1.4-canary.7",
+  "version": "10.1.4-canary.10",
   "keywords": [
     "react",
     "next",