Merge branch 'canary' of github.com:zeit/next.js into font

.eslintignore

@@ -16,4 +16,5 @@ packages/next-codemod/**/*.js
 packages/next-codemod/**/*.d.ts
 packages/next-env/**/*.d.ts
 test/integration/async-modules/**
-test-timings.json
+test-timings.json
+packages/next/lib/regexr/**/*

.github/actions/next-stats-action/src/add-comment.js

@@ -83,7 +83,7 @@ module.exports = async function addComment(
         else if (!isGzipItem && !groupKey.match(gzipIgnoreRegex)) return
 
         if (
-          itemKey !== 'buildDuration' ||
+          !itemKey.startsWith('buildDuration') ||
           (isBenchmark && itemKey.match(/req\/sec/))
         ) {
           if (typeof mainItemVal === 'number') mainRepoTotal += mainItemVal

.github/actions/next-stats-action/src/run/index.js

@@ -26,6 +26,7 @@ async function runConfigs(
       let curStats = {
         General: {
           buildDuration: null,
+          buildDurationCached: null,
           nodeModulesSize: null,
         },
       }
@@ -55,20 +56,25 @@ async function runConfigs(
         )
       }
 
-      const buildStart = new Date().getTime()
+      const buildStart = Date.now()
       await exec(`cd ${statsAppDir} && ${statsConfig.appBuildCommand}`, false, {
         env: yarnEnvValues,
       })
-      curStats.General.buildDuration = new Date().getTime() - buildStart
+      curStats.General.buildDuration = Date.now() - buildStart
 
       // apply renames to get deterministic output names
       for (const rename of config.renames) {
         const results = await glob(rename.srcGlob, { cwd: statsAppDir })
-        if (results.length === 0 || results[0] === rename.dest) continue
-        await fs.move(
-          path.join(statsAppDir, results[0]),
-          path.join(statsAppDir, rename.dest)
-        )
+        for (const result of results) {
+          let dest = rename.removeHash
+            ? result.replace(/(\.|-)[0-9a-f]{20}(\.|-)/g, '$1HASH$2')
+            : rename.dest
+          if (result === dest) continue
+          await fs.move(
+            path.join(statsAppDir, result),
+            path.join(statsAppDir, dest)
+          )
+        }
       }
 
       const collectedStats = await collectStats(config, statsConfig)
@@ -80,19 +86,17 @@ async function runConfigs(
       const applyRenames = (renames, stats) => {
         if (renames) {
           for (const rename of renames) {
+            let { cur, prev } = rename
+            cur = path.basename(cur)
+            prev = path.basename(prev)
+
             Object.keys(stats).forEach((group) => {
-              Object.keys(stats[group]).forEach((item) => {
-                let { cur, prev } = rename
-                cur = path.basename(cur)
-                prev = path.basename(prev)
-
-                if (cur === item) {
-                  stats[group][prev] = stats[group][item]
-                  stats[group][prev + ' gzip'] = stats[group][item + ' gzip']
-                  delete stats[group][item]
-                  delete stats[group][item + ' gzip']
-                }
-              })
+              if (stats[group][cur]) {
+                stats[group][prev] = stats[group][cur]
+                stats[group][prev + ' gzip'] = stats[group][cur + ' gzip']
+                delete stats[group][cur]
+                delete stats[group][cur + ' gzip']
+              }
             })
           }
         }
@@ -146,6 +150,12 @@ async function runConfigs(
         /* eslint-disable-next-line */
         mainRepoStats = curStats
       }
+
+      const secondBuildStart = Date.now()
+      await exec(`cd ${statsAppDir} && ${statsConfig.appBuildCommand}`, false, {
+        env: yarnEnvValues,
+      })
+      curStats.General.buildDurationCached = Date.now() - secondBuildStart
     }
 
     logger(`Finished running: ${config.title}`)

.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

.github/workflows/test_react_experimental.yml

@@ -0,0 +1,55 @@
+on:
+  schedule:
+    # * is a special character in YAML so you have to quote this string
+    - cron: '0 0,12 * * *'
+
+name: Test react@experimental
+
+jobs:
+  # build:
+  #   runs-on: ubuntu-latest
+  #   steps:
+  #     - uses: actions/checkout@v2
+
+  #     - run: yarn install --frozen-lockfile --check-files
+  #       env:
+  #         NEXT_TELEMETRY_DISABLED: 1
+
+  #     - run: yarn upgrade react@next react-dom@next -W --dev
+
+  #     - uses: actions/cache@v2
+  #       id: cache-build
+  #       with:
+  #         path: ./*
+  #         key: ${{ github.sha }}
+
+  testAll:
+    name: Test All
+    runs-on: ubuntu-latest
+    # needs: build
+    env:
+      NEXT_TELEMETRY_DISABLED: 1
+      NEXT_PRIVATE_REACT_MODE: concurrent
+      HEADLESS: true
+      NEXT_PRIVATE_SKIP_SIZE_TESTS: true
+    strategy:
+      fail-fast: false
+      matrix:
+        group: [1, 2, 3, 4, 5, 6]
+    steps:
+      # - uses: actions/cache@v2
+      #   id: restore-build
+      #   with:
+      #     path: ./*
+      #     key: ${{ github.sha }}
+
+      - uses: actions/checkout@v2
+
+      - run: yarn install --frozen-lockfile --check-files
+
+      - run: yarn upgrade react@experimental react-dom@experimental -W --dev
+
+      # TODO: remove after we fix watchpack watching too much
+      - run: echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p
+
+      - run: node run-tests.js --timings -g ${{ matrix.group }}/6 -c 3

.github/workflows/test_react_next.yml

@@ -30,6 +30,7 @@ jobs:
     env:
       NEXT_TELEMETRY_DISABLED: 1
       HEADLESS: true
+      NEXT_PRIVATE_SKIP_SIZE_TESTS: true
     strategy:
       fail-fast: false
       matrix:

.vscode/launch.json

@@ -12,6 +12,7 @@
       "runtimeExecutable": "yarn",
       "runtimeArgs": ["run", "debug", "dev", "test/integration/basic"],
       "skipFiles": ["<node_internals>/**"],
+      "outFiles": ["${workspaceFolder}/packages/next/dist/**/*"],
       "port": 9229
     },
     {

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

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

docs/advanced-features/preview-mode.md

@@ -9,19 +9,19 @@ description: Next.js has the preview mode for statically generated pages. You ca
 <details open>
   <summary><b>Examples</b></summary>
   <ul>
-    <li><a href="https://github.com/vercel/next.js/tree/canary/examples/cms-wordpress">WordPress Example</a> (<a href="https://next-blog-wordpress.now.sh">Demo</a>)</li>
-    <li><a href="https://github.com/vercel/next.js/tree/canary/examples/cms-datocms">DatoCMS Example</a> (<a href="https://next-blog-datocms.now.sh/">Demo</a>)</li>
-    <li><a href="https://github.com/vercel/next.js/tree/canary/examples/cms-takeshape">TakeShape Example</a> (<a href="https://next-blog-takeshape.now.sh/">Demo</a>)</li>
-    <li><a href="https://github.com/vercel/next.js/tree/canary/examples/cms-sanity">Sanity Example</a> (<a href="https://next-blog-sanity.now.sh/">Demo</a>)</li>
-    <li><a href="https://github.com/vercel/next.js/tree/canary/examples/cms-prismic">Prismic Example</a> (<a href="https://next-blog-prismic.now.sh/">Demo</a>)</li>
-    <li><a href="https://github.com/vercel/next.js/tree/canary/examples/cms-contentful">Contentful Example</a> (<a href="https://next-blog-contentful.now.sh/">Demo</a>)</li>
-    <li><a href="https://github.com/vercel/next.js/tree/canary/examples/cms-strapi">Strapi Example</a> (<a href="https://next-blog-strapi.now.sh/">Demo</a>)</li>
-    <li><a href="https://github.com/vercel/next.js/tree/canary/examples/cms-prepr">Prepr Example</a> (<a href="https://next-blog-prepr.now.sh/">Demo</a>)</li>    
-    <li><a href="https://github.com/vercel/next.js/tree/canary/examples/cms-agilitycms">Agility CMS Example</a> (<a href="https://next-blog-agilitycms.now.sh/">Demo</a>)</li>
-    <li><a href="https://github.com/vercel/next.js/tree/canary/examples/cms-cosmic">Cosmic Example</a> (<a href="https://next-blog-cosmic.now.sh/">Demo</a>)</li>
-    <li><a href="https://github.com/vercel/next.js/tree/canary/examples/cms-buttercms">ButterCMS Example</a> (<a href="https://next-blog-buttercms.now.sh/">Demo</a>)</li>
-    <li><a href="https://github.com/vercel/next.js/tree/canary/examples/cms-storyblok">Storyblok Example</a> (<a href="https://next-blog-storyblok.now.sh/">Demo</a>)</li>
-    <li><a href="https://github.com/vercel/next.js/tree/canary/examples/cms-graphcms">GraphCMS Example</a> (<a href="https://next-blog-graphcms.now.sh/">Demo</a>)</li>
+    <li><a href="https://github.com/vercel/next.js/tree/canary/examples/cms-wordpress">WordPress Example</a> (<a href="https://next-blog-wordpress.vercel.app">Demo</a>)</li>
+    <li><a href="https://github.com/vercel/next.js/tree/canary/examples/cms-datocms">DatoCMS Example</a> (<a href="https://next-blog-datocms.vercel.app/">Demo</a>)</li>
+    <li><a href="https://github.com/vercel/next.js/tree/canary/examples/cms-takeshape">TakeShape Example</a> (<a href="https://next-blog-takeshape.vercel.app/">Demo</a>)</li>
+    <li><a href="https://github.com/vercel/next.js/tree/canary/examples/cms-sanity">Sanity Example</a> (<a href="https://next-blog-sanity.vercel.app/">Demo</a>)</li>
+    <li><a href="https://github.com/vercel/next.js/tree/canary/examples/cms-prismic">Prismic Example</a> (<a href="https://next-blog-prismic.vercel.app/">Demo</a>)</li>
+    <li><a href="https://github.com/vercel/next.js/tree/canary/examples/cms-contentful">Contentful Example</a> (<a href="https://next-blog-contentful.vercel.app/">Demo</a>)</li>
+    <li><a href="https://github.com/vercel/next.js/tree/canary/examples/cms-strapi">Strapi Example</a> (<a href="https://next-blog-strapi.vercel.app/">Demo</a>)</li>
+    <li><a href="https://github.com/vercel/next.js/tree/canary/examples/cms-prepr">Prepr Example</a> (<a href="https://next-blog-prepr.vercel.app/">Demo</a>)</li>
+    <li><a href="https://github.com/vercel/next.js/tree/canary/examples/cms-agilitycms">Agility CMS Example</a> (<a href="https://next-blog-agilitycms.vercel.app/">Demo</a>)</li>
+    <li><a href="https://github.com/vercel/next.js/tree/canary/examples/cms-cosmic">Cosmic Example</a> (<a href="https://next-blog-cosmic.vercel.app/">Demo</a>)</li>
+    <li><a href="https://github.com/vercel/next.js/tree/canary/examples/cms-buttercms">ButterCMS Example</a> (<a href="https://next-blog-buttercms.vercel.app/">Demo</a>)</li>
+    <li><a href="https://github.com/vercel/next.js/tree/canary/examples/cms-storyblok">Storyblok Example</a> (<a href="https://next-blog-storyblok.vercel.app/">Demo</a>)</li>
+    <li><a href="https://github.com/vercel/next.js/tree/canary/examples/cms-graphcms">GraphCMS Example</a> (<a href="https://next-blog-graphcms.vercel.app/">Demo</a>)</li>
     <li><a href="https://github.com/vercel/next.js/tree/canary/examples/cms-kontent">Kontent Example</a> (<a href="https://next-blog-kontent.vercel.app//">Demo</a>)</li>
   </ul>
 </details>

docs/api-reference/next.config.js/headers.md

@@ -156,6 +156,8 @@ module.exports = {
 
 ## 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.
+
 To only apply a header when either header, cookie, or query values also match the `has` field can be used. Both the `source` and all `has` items must match for the header to be applied.
 
 `has` items have the following fields:
@@ -193,6 +195,9 @@ module.exports = {
           {
             type: 'query',
             key: 'page',
+            // the page value will not be available in the
+            // header key/values since value is provided and
+            // doesn't use a named capture group e.g. (?<page>home)
             value: 'home',
           },
           {

docs/api-reference/next.config.js/redirects.md

@@ -100,6 +100,8 @@ module.exports = {
 
 ## 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.
+
 To only match a redirect when header, cookie, or query values also match the `has` field can be used. Both the `source` and all `has` items must match for the redirect to be applied.
 
 `has` items have the following fields:
@@ -133,6 +135,9 @@ module.exports = {
           {
             type: 'query',
             key: 'page',
+            // the page value will not be available in the
+            // destination since value is provided and doesn't
+            // use a named capture group e.g. (?<page>home)
             value: 'home',
           },
           {

docs/api-reference/next.config.js/rewrites.md

@@ -40,7 +40,7 @@ module.exports = {
 - `locale`: `false` or `undefined` - whether the locale should not be included when matching.
 - `has` is an array of [has objects](#header-cookie-and-query-matching) with the `type`, `key` and `value` properties.
 
-Rewrites are applied after checking the filesystem (pages and `/public` files) and before dynamic routes by default. This behavior can be changed by instead returning an object instead of an array from the `rewrites` function:
+Rewrites are applied after checking the filesystem (pages and `/public` files) and before dynamic routes by default. This behavior can be changed by instead returning an object instead of an array from the `rewrites` function since `v10.1` of Next.js:
 
 ```js
 module.exports = {
@@ -180,6 +180,8 @@ module.exports = {
 
 ## 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.
+
 To only match a rewrite when header, cookie, or query values also match the `has` field can be used. Both the `source` and all `has` items must match for the rewrite to be applied.
 
 `has` items have the following fields:
@@ -212,6 +214,9 @@ module.exports = {
           {
             type: 'query',
             key: 'page',
+            // the page value will not be available in the
+            // destination since value is provided and doesn't
+            // use a named capture group e.g. (?<page>home)
             value: 'home',
           },
           {
@@ -220,7 +225,7 @@ module.exports = {
             value: 'true',
           },
         ],
-        destination: '/:path*/:page',
+        destination: '/:path*/home',
       },
       // if the header `x-authorized` is present and
       // contains a matching value, this rewrite will be applied

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
+- `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.
 - [`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`

docs/api-reference/next/router.md

@@ -405,7 +405,7 @@ function Page({ router }) {
 export default withRouter(Page)
 ```
 
-### Typescript
+### TypeScript
 
 To use class components with `withRouter`, the component needs to accept a router prop:
 

docs/basic-features/built-in-css-support.md

@@ -72,6 +72,7 @@ For importing CSS required by a third party component, you can do so in your com
 // components/ExampleDialog.js
 import { useState } from 'react'
 import { Dialog } from '@reach/dialog'
+import VisuallyHidden from '@reach/visually-hidden'
 import '@reach/dialog/styles.css'
 
 function ExampleDialog(props) {
@@ -201,6 +202,7 @@ Error: Cannot find module 'less'
     <li><a href="https://github.com/vercel/next.js/tree/canary/examples/with-styled-jsx">Styled JSX</a></li>
     <li><a href="https://github.com/vercel/next.js/tree/canary/examples/with-styled-components">Styled Components</a></li>
     <li><a href="https://github.com/vercel/next.js/tree/canary/examples/with-emotion">Emotion</a></li>
+    <li><a href="https://github.com/vercel/next.js/tree/canary/examples/with-linaria">Linaria</a></li>
     <li><a href="https://github.com/vercel/next.js/tree/canary/examples/with-tailwindcss-emotion">Tailwind CSS + Emotion</a></li>
     <li><a href="https://github.com/vercel/next.js/tree/canary/examples/with-styletron">Styletron</a></li>
     <li><a href="https://github.com/vercel/next.js/tree/canary/examples/with-glamor">Glamor</a></li>