Merge branch 'canary' into patch-1

.github/workflows/build_test_deploy.yml

@@ -15,20 +15,20 @@ jobs:
       - uses: actions/checkout@v2
       - run: git fetch --depth=1 origin +refs/tags/*:refs/tags/*
       - run: yarn install --frozen-lockfile --check-files
-      - uses: actions/cache@v1
+      - uses: actions/cache@v2
         id: cache-build
         with:
-          path: '.'
+          path: ./*
           key: ${{ github.sha }}
 
   lint:
     runs-on: ubuntu-latest
     needs: build
     steps:
-      - uses: actions/cache@v1
+      - uses: actions/cache@v2
         id: restore-build
         with:
-          path: '.'
+          path: ./*
           key: ${{ github.sha }}
       - run: yarn lint
 
@@ -39,10 +39,10 @@ jobs:
     env:
       NEXT_TELEMETRY_DISABLED: 1
     steps:
-      - uses: actions/cache@v1
+      - uses: actions/cache@v2
         id: restore-build
         with:
-          path: '.'
+          path: ./*
           key: ${{ github.sha }}
       - run: ./check-pre-compiled.sh
 
@@ -59,10 +59,10 @@ jobs:
       matrix:
         group: [1, 2, 3, 4, 5, 6]
     steps:
-      - uses: actions/cache@v1
+      - uses: actions/cache@v2
         id: restore-build
         with:
-          path: '.'
+          path: ./*
           key: ${{ github.sha }}
 
       # TODO: remove after we fix watchpack watching too much
@@ -77,10 +77,9 @@ jobs:
     steps:
       - run: exit 0
 
-  testMacOS:
-    name: macOS ( Basic, Production, Acceptance )
-    runs-on: macos-latest
-    needs: build
+  testWebpack5:
+    name: webpack 5 (Basic, Production, Acceptance)
+    runs-on: ubuntu-latest
     env:
       NEXT_TELEMETRY_DISABLED: 1
       NEXT_TEST_JOB: 1
@@ -89,8 +88,8 @@ jobs:
     steps:
       - uses: actions/checkout@v2
       - run: git fetch --depth=1 origin +refs/tags/*:refs/tags/*
-      # Installing dependencies again since OS changed
-      - run: yarn install --frozen-lockfile --check-files
+      - run: cat package.json | jq '.resolutions.webpack = "^5.0.0-beta.22"' > package.json.tmp && mv package.json.tmp package.json
+      - run: yarn install --check-files
       - run: node run-tests.js test/integration/production/test/index.test.js
       - run: node run-tests.js test/integration/basic/test/index.test.js
       - run: node run-tests.js test/acceptance/*
@@ -104,10 +103,10 @@ jobs:
       BROWSERNAME: 'firefox'
       NEXT_TELEMETRY_DISABLED: 1
     steps:
-      - uses: actions/cache@v1
+      - uses: actions/cache@v2
         id: restore-build
         with:
-          path: '.'
+          path: ./*
           key: ${{ github.sha }}
       - run: node run-tests.js test/integration/production/test/index.test.js
 
@@ -123,10 +122,10 @@ jobs:
       BROWSERSTACK_USERNAME: ${{ secrets.BROWSERSTACK_USERNAME }}
       BROWSERSTACK_ACCESS_KEY: ${{ secrets.BROWSERSTACK_ACCESS_KEY }}
     steps:
-      - uses: actions/cache@v1
+      - uses: actions/cache@v2
         id: restore-build
         with:
-          path: '.'
+          path: ./*
           key: ${{ github.sha }}
       - run: '[[ -z "$BROWSERSTACK_ACCESS_KEY" ]] && echo "Skipping for PR" || node run-tests.js test/integration/production/test/index.test.js'
 
@@ -143,10 +142,10 @@ jobs:
       BROWSERSTACK_USERNAME: ${{ secrets.BROWSERSTACK_USERNAME }}
       BROWSERSTACK_ACCESS_KEY: ${{ secrets.BROWSERSTACK_ACCESS_KEY }}
     steps:
-      - uses: actions/cache@v1
+      - uses: actions/cache@v2
         id: restore-build
         with:
-          path: '.'
+          path: ./*
           key: ${{ github.sha }}
       - run: '[[ -z "$BROWSERSTACK_ACCESS_KEY" ]] && echo "Skipping for PR" || node run-tests.js test/integration/production-nav/test/index.test.js'
 
@@ -157,10 +156,10 @@ jobs:
     env:
       NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
     steps:
-      - uses: actions/cache@v1
+      - uses: actions/cache@v2
         id: restore-build
         with:
-          path: '.'
+          path: ./*
           key: ${{ github.sha }}
 
       - run: ./publish-release.sh

.github/workflows/test_macos.yml

@@ -0,0 +1,22 @@
+on:
+  push:
+    branches: [canary]
+
+name: Test macOS
+
+jobs:
+  testMacOS:
+    name: macOS (Basic, Production, Acceptance)
+    runs-on: macos-latest
+    env:
+      NEXT_TELEMETRY_DISABLED: 1
+      NEXT_TEST_JOB: 1
+      HEADLESS: true
+
+    steps:
+      - uses: actions/checkout@v2
+      - run: git fetch --depth=1 origin +refs/tags/*:refs/tags/*
+      - run: yarn install --frozen-lockfile --check-files || yarn install --frozen-lockfile --check-files
+      - run: node run-tests.js test/integration/production/test/index.test.js
+      - run: node run-tests.js test/integration/basic/test/index.test.js
+      - run: node run-tests.js test/acceptance/*

.github/workflows/test_react_next.yml

@@ -17,10 +17,10 @@ jobs:
 
   #     - run: yarn upgrade react@next react-dom@next -W --dev
 
-  #     - uses: actions/cache@v1
+  #     - uses: actions/cache@v2
   #       id: cache-build
   #       with:
-  #         path: '.'
+  #         path: ./*
   #         key: ${{ github.sha }}
 
   testAll:
@@ -35,10 +35,10 @@ jobs:
       matrix:
         group: [1, 2, 3, 4, 5, 6]
     steps:
-      # - uses: actions/cache@v1
+      # - uses: actions/cache@v2
       #   id: restore-build
       #   with:
-      #     path: '.'
+      #     path: ./*
       #     key: ${{ github.sha }}
 
       - uses: actions/checkout@v2

docs/advanced-features/custom-document.md

@@ -85,3 +85,21 @@ class MyDocument extends Document {
 
 export default MyDocument
 ```
+
+## TypeScript
+
+You can use the built-in `DocumentContext` type and change the file name to `./pages/_document.tsx` like so:
+
+```tsx
+import Document, { DocumentContext } from 'next/document'
+
+class MyDocument extends Document {
+  static async getInitialProps(ctx: DocumentContext) {
+    const initialProps = await Document.getInitialProps(ctx)
+
+    return initialProps
+  }
+}
+
+export default MyDocument
+```

docs/advanced-features/measuring-performance.md

@@ -30,8 +30,8 @@ The `metric` object returned to the function consists of a number of properties:
 
 - `id`: Unique identifier for the metric in the context of the current page load
 - `name`: Metric name
-- `startTime`: First recorded timestamp of the performance entry (if applicable)
-- `value`: Value, or duration, of performance entry
+- `startTime`: First recorded timestamp of the performance entry in [milliseconds](https://developer.mozilla.org/en-US/docs/Web/API/DOMHighResTimeStamp) (if applicable)
+- `value`: Value, or duration in [milliseconds](https://developer.mozilla.org/en-US/docs/Web/API/DOMHighResTimeStamp), of the performance entry
 - `label`: Type of metric (`web-vital` or `custom`)
 
 There are two types of metrics that are tracked:

docs/advanced-features/multi-zones.md

@@ -3,7 +3,7 @@
 <details>
   <summary><b>Examples</b></summary>
   <ul>
-    <li><a href="/examples/with-zones">With Zones</a></li>
+    <li><a href="https://github.com/vercel/next.js/tree/canary/examples/with-zones">With Zones</a></li>
   </ul>
 </details>
 

docs/api-reference/cli.md

@@ -48,6 +48,14 @@ NODE_OPTIONS='--inspect' next
 
 The first load is colored green, yellow, or red. Aim for green for performant applications.
 
+You can enable production profiling for React with the `--profile` flag in `next build`. This requires Next.js 9.5:
+
+```bash
+next build --profile
+```
+
+After that, you can use the profiler in the same way as you would in development.
+
 ## Development
 
 `next dev` starts the application in development mode with hot-code reloading, error reporting, and more:

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

@@ -4,6 +4,8 @@ description: Learn more about setting a base path in Next.js
 
 # Base Path
 
+> This feature was introduced in [Next.js 9.5](https://nextjs.org/blog/next-9-5) and up. If you’re using older versions of Next.js, please upgrade before trying it out.
+
 To deploy a Next.js application under a sub-path of a domain you can use the `basePath` option.
 
 `basePath` allows you to set a path prefix for the application. For example `/docs` instead of `/` (the default).

docs/api-reference/next.config.js/custom-webpack-config.md

@@ -4,12 +4,18 @@ description: Extend the default webpack config added by Next.js.
 
 # Custom Webpack Config
 
+Before continuing to add custom webpack configuration to your application make sure Next.js doesn't already support your use-case:
+
+- [CSS imports](/docs/basic-features/built-in-css-support#adding-a-global-stylesheet)
+- [CSS modules](/docs/basic-features/built-in-css-support#adding-component-level-css)
+- [Sass/SCSS imports](/docs/basic-features/built-in-css-support#sass-support)
+- [Sass/SCSS modules](/docs/basic-features/built-in-css-support#sass-support)
+- [preact](https://github.com/vercel/next.js/tree/canary/examples/using-preact)
+- [Customizing babel configuration](/docs/advanced-features/customizing-babel-config)
+
 Some commonly asked for features are available as plugins:
 
-- [@zeit/next-sass](https://github.com/zeit/next-plugins/tree/master/packages/next-sass)
-- [@zeit/next-less](https://github.com/zeit/next-plugins/tree/master/packages/next-less)
-- [@zeit/next-stylus](https://github.com/zeit/next-plugins/tree/master/packages/next-stylus)
-- [@zeit/next-preact](https://github.com/zeit/next-plugins/tree/master/packages/next-preact)
+- [@zeit/next-less](https://github.com/vercel/next-plugins/tree/master/packages/next-less)
 - [@next/mdx](https://github.com/vercel/next.js/tree/canary/packages/next-mdx)
 - [@next/bundle-analyzer](https://github.com/vercel/next.js/tree/canary/packages/next-bundle-analyzer)
 
@@ -20,12 +26,8 @@ module.exports = {
   webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
     // Note: we provide webpack above so you should not `require` it
     // Perform customizations to webpack config
-    // Important: return the modified config
     config.plugins.push(new webpack.IgnorePlugin(/\/__tests__\//))
-    return config
-  },
-  webpackDevMiddleware: (config) => {
-    // Perform customizations to webpack dev middleware config
+
     // Important: return the modified config
     return config
   },

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

@@ -4,6 +4,8 @@ description: Add custom HTTP headers to your Next.js app.
 
 # Headers
 
+> This feature was introduced in [Next.js 9.5](https://nextjs.org/blog/next-9-5) and up. If you’re using older versions of Next.js, please upgrade before trying it out.
+
 Headers allow you to set custom HTTP headers for an incoming request path.
 
 To set custom HTTP headers you can use the `headers` key in `next.config.js`:
@@ -90,6 +92,28 @@ module.exports = {
 }
 ```
 
+### Regex Path Matching
+
+To match a regex path you can wrap the regex in parenthesis after a parameter, for example `/blog/:slug(\\d{1,})` will match `/blog/123` but not `/blog/abc`:
+
+```js
+module.exports = {
+  async rewrites() {
+    return [
+      {
+        source: '/blog/:post(\\d{1,})',
+        headers: [
+          {
+            key: 'x-post',
+            value: ':post',
+          },
+        ],
+      },
+    ]
+  },
+}
+```
+
 ### Headers with basePath support
 
 When leveraging [`basePath` support](/docs/api-reference/next.config.js/basepath.md) with headers each `source` is automatically prefixed with the `basePath` unless you add `basePath: false` to the header:

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

@@ -4,6 +4,15 @@ description: Add redirects to your Next.js app.
 
 # Redirects
 
+> This feature was introduced in [Next.js 9.5](https://nextjs.org/blog/next-9-5) and up. If you’re using older versions of Next.js, please upgrade before trying it out.
+
+<details open>
+  <summary><b>Examples</b></summary>
+  <ul>
+    <li><a href="https://github.com/vercel/next.js/tree/canary/examples/redirects">Redirects</a></li>
+  </ul>
+</details>
+
 Redirects allow you to redirect an incoming request path to a different destination path.
 
 Redirects are only available on the Node.js environment and do not affect client-side routing.
@@ -66,6 +75,24 @@ module.exports = {
 }
 ```
 
+### Regex Path Matching
+
+To match a regex path you can wrap the regex in parenthesis after a parameter, for example `/blog/:slug(\\d{1,})` will match `/blog/123` but not `/blog/abc`:
+
+```js
+module.exports = {
+  async redirects() {
+    return [
+      {
+        source: '/old-blog/:post(\\d{1,})',
+        destination: '/blog/:post', // Matched parameters can be used in the destination
+        permanent: false,
+      },
+    ]
+  },
+}
+```
+
 ### Redirects with basePath support
 
 When leveraging [`basePath` support](/docs/api-reference/next.config.js/basepath.md) with redirects each `source` and `destination` is automatically prefixed with the `basePath` unless you add `basePath: false` to the redirect:
@@ -92,3 +119,5 @@ module.exports = {
   },
 }
 ```
+
+In some rare cases, you might need to assign a custom status code for older HTTP Clients to properly redirect. In these cases, you can use the `statusCode` property instead of the `permanent` property, but not both. Note: to ensure IE11 compatibility a `Refresh` header is automatically added for the 308 status code.