Merge branch 'canary' into refactor/server-api-utils

.github/workflows/build_test_deploy.yml

@@ -19,7 +19,7 @@ jobs:
       - run: yarn install --frozen-lockfile --check-files
       - run: node run-tests.js --timings --write-timings -g 1/1
       - name: Check docs only change
-        run: echo ::set-output name=DOCS_CHANGE::$(node skip-docs-change.js echo 'docs-only')
+        run: echo ::set-output name=DOCS_CHANGE::$(node skip-docs-change.js echo 'not-docs-only-change')
         id: docs-change
       - run: echo ${{steps.docs-change.outputs.DOCS_CHANGE}}
       - uses: actions/cache@v2
@@ -47,13 +47,13 @@ jobs:
       NEXT_TELEMETRY_DISABLED: 1
     steps:
       - uses: actions/cache@v2
-        if: ${{needs.build.outputs.docsChange != 'docs-only'}}
+        if: ${{needs.build.outputs.docsChange != 'docs only change'}}
         id: restore-build
         with:
           path: ./*
           key: ${{ github.sha }}
       - run: ./check-pre-compiled.sh
-        if: ${{needs.build.outputs.docsChange != 'docs-only'}}
+        if: ${{needs.build.outputs.docsChange != 'docs only change'}}
 
   testUnit:
     name: Test Unit
@@ -65,14 +65,14 @@ jobs:
       HEADLESS: true
     steps:
       - uses: actions/cache@v2
-        if: ${{needs.build.outputs.docsChange != 'docs-only'}}
+        if: ${{needs.build.outputs.docsChange != 'docs only change'}}
         id: restore-build
         with:
           path: ./*
           key: ${{ github.sha }}
 
       - run: node run-tests.js --timings --type unit -g 1/1
-        if: ${{needs.build.outputs.docsChange != 'docs-only'}}
+        if: ${{needs.build.outputs.docsChange != 'docs only change'}}
 
   testIntegration:
     name: Test Integration
@@ -89,18 +89,18 @@ jobs:
     steps:
       - run: echo ${{needs.build.outputs.docsChange}}
       - uses: actions/cache@v2
-        if: ${{needs.build.outputs.docsChange != 'docs-only'}}
+        if: ${{needs.build.outputs.docsChange != 'docs only change'}}
         id: restore-build
         with:
           path: ./*
           key: ${{ github.sha }}
 
       # 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
-        if: ${{needs.build.outputs.docsChange != 'docs-only'}}
+        if: ${{needs.build.outputs.docsChange != 'docs only change'}}
 
       - run: xvfb-run node run-tests.js --timings -g ${{ matrix.group }}/6 -c 3
-        if: ${{needs.build.outputs.docsChange != 'docs-only'}}
+        if: ${{needs.build.outputs.docsChange != 'docs only change'}}
 
   testElectron:
     name: Test Electron
@@ -113,21 +113,21 @@ jobs:
       TEST_ELECTRON: 1
     steps:
       - uses: actions/cache@v2
-        if: ${{needs.build.outputs.docsChange != 'docs-only'}}
+        if: ${{needs.build.outputs.docsChange != 'docs only change'}}
         id: restore-build
         with:
           path: ./*
           key: ${{ github.sha }}
 
       # 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
-        if: ${{needs.build.outputs.docsChange != 'docs-only'}}
+        if: ${{needs.build.outputs.docsChange != 'docs only change'}}
 
       - run: yarn add -W --dev spectron@7.0.0 electron@5.0.0
-        if: ${{needs.build.outputs.docsChange != 'docs-only'}}
+        if: ${{needs.build.outputs.docsChange != 'docs only change'}}
 
       - run: xvfb-run node run-tests.js test/integration/with-electron/test/index.test.js
-        if: ${{needs.build.outputs.docsChange != 'docs-only'}}
+        if: ${{needs.build.outputs.docsChange != 'docs only change'}}
 
   testYarnPnP:
     runs-on: ubuntu-latest
@@ -137,14 +137,14 @@ jobs:
     steps:
       - uses: actions/checkout@v2
 
-      - run: echo ::set-output name=DOCS_CHANGE::$(node skip-docs-change.js echo 'docs-only')
+      - run: echo ::set-output name=DOCS_CHANGE::$(node skip-docs-change.js echo 'not-docs-only-change')
         id: docs-change
 
       - run: yarn install --frozen-lockfile --check-files
-        if: ${{steps.docs-change.outputs.DOCS_CHANGE != 'docs-only'}}
+        if: ${{steps.docs-change.outputs.DOCS_CHANGE != 'docs only change'}}
 
       - run: bash ./test-pnp.sh
-        if: ${{steps.docs-change.outputs.DOCS_CHANGE != 'docs-only'}}
+        if: ${{steps.docs-change.outputs.DOCS_CHANGE != 'docs only change'}}
 
   testsPass:
     name: thank you, next
@@ -160,22 +160,22 @@ jobs:
       NEXT_TELEMETRY_DISABLED: 1
       NEXT_TEST_JOB: 1
       HEADLESS: true
-      NEXT_WEBPACK5: 1
+      NEXT_PRIVATE_TEST_WEBPACK5_MODE: 1
 
     steps:
       - uses: actions/checkout@v2
 
-      - run: echo ::set-output name=DOCS_CHANGE::$(node skip-docs-change.js echo 'docs-only')
+      - run: echo ::set-output name=DOCS_CHANGE::$(node skip-docs-change.js echo 'not-docs-only-change')
         id: docs-change
 
       - run: git fetch --depth=1 origin +refs/tags/*:refs/tags/*
-        if: ${{ steps.docs-change.outputs.DOCS_CHANGE != 'docs-only' }}
+        if: ${{ steps.docs-change.outputs.DOCS_CHANGE != 'docs only change' }}
 
       - run: yarn install --check-files
-        if: ${{ steps.docs-change.outputs.DOCS_CHANGE != 'docs-only' }}
+        if: ${{ steps.docs-change.outputs.DOCS_CHANGE != 'docs only change' }}
 
-      - run: xvfb-run node run-tests.js test/integration/{link-ref,production,basic,async-modules,font-optimization,ssr-ctx,worker-loader}/test/index.test.js test/acceptance/*.test.js
-        if: ${{ steps.docs-change.outputs.DOCS_CHANGE != 'docs-only' }}
+      - run: xvfb-run node run-tests.js test/integration/{link-ref,production,basic,async-modules,font-optimization,ssr-ctx}/test/index.test.js test/acceptance/*.test.js
+        if: ${{ steps.docs-change.outputs.DOCS_CHANGE != 'docs only change' }}
 
   testLegacyReact:
     name: React 16 + Webpack 4 (Basic, Production, Acceptance)
@@ -188,26 +188,26 @@ jobs:
     steps:
       - uses: actions/checkout@v2
 
-      - run: echo ::set-output name=DOCS_CHANGE::$(node skip-docs-change.js echo 'docs-only')
+      - run: echo ::set-output name=DOCS_CHANGE::$(node skip-docs-change.js echo 'not-docs-only-change')
         id: docs-change
 
       - run: git fetch --depth=1 origin +refs/tags/*:refs/tags/*
-        if: ${{ steps.docs-change.outputs.DOCS_CHANGE != 'docs-only' }}
+        if: ${{ steps.docs-change.outputs.DOCS_CHANGE != 'docs only change' }}
 
       - run: cat package.json | jq '.resolutions.react = "^16.14.0"' > package.json.tmp && mv package.json.tmp package.json
-        if: ${{ steps.docs-change.outputs.DOCS_CHANGE != 'docs-only' }}
+        if: ${{ steps.docs-change.outputs.DOCS_CHANGE != 'docs only change' }}
 
       - run: cat package.json | jq '.resolutions."react-dom" = "^16.14.0"' > package.json.tmp && mv package.json.tmp package.json
-        if: ${{ steps.docs-change.outputs.DOCS_CHANGE != 'docs-only' }}
+        if: ${{ steps.docs-change.outputs.DOCS_CHANGE != 'docs only change' }}
 
       - run: yarn install --check-files
-        if: ${{ steps.docs-change.outputs.DOCS_CHANGE != 'docs-only' }}
+        if: ${{ steps.docs-change.outputs.DOCS_CHANGE != 'docs only change' }}
 
       - run: yarn list react react-dom
-        if: ${{ steps.docs-change.outputs.DOCS_CHANGE != 'docs-only' }}
+        if: ${{ steps.docs-change.outputs.DOCS_CHANGE != 'docs only change' }}
 
       - run: xvfb-run node run-tests.js test/integration/{link-ref,production,basic,async-modules,font-optimization,ssr-ctx,worker-loader}/test/index.test.js test/acceptance/*.test.js
-        if: ${{ steps.docs-change.outputs.DOCS_CHANGE != 'docs-only' }}
+        if: ${{ steps.docs-change.outputs.DOCS_CHANGE != 'docs only change' }}
 
   testFirefox:
     name: Test Firefox (production)
@@ -219,13 +219,13 @@ jobs:
       NEXT_TELEMETRY_DISABLED: 1
     steps:
       - uses: actions/cache@v2
-        if: ${{needs.build.outputs.docsChange != 'docs-only'}}
+        if: ${{needs.build.outputs.docsChange != 'docs only change'}}
         id: restore-build
         with:
           path: ./*
           key: ${{ github.sha }}
       - run: node run-tests.js test/integration/production/test/index.test.js
-        if: ${{needs.build.outputs.docsChange != 'docs-only'}}
+        if: ${{needs.build.outputs.docsChange != 'docs only change'}}
 
   testSafari:
     name: Test Safari (production)
@@ -240,13 +240,13 @@ jobs:
       BROWSERSTACK_ACCESS_KEY: ${{ secrets.BROWSERSTACK_ACCESS_KEY }}
     steps:
       - uses: actions/cache@v2
-        if: ${{needs.build.outputs.docsChange != 'docs-only'}}
+        if: ${{needs.build.outputs.docsChange != 'docs only change'}}
         id: restore-build
         with:
           path: ./*
           key: ${{ github.sha }}
       - run: '[[ -z "$BROWSERSTACK_ACCESS_KEY" ]] && echo "Skipping for PR" || node run-tests.js test/integration/production/test/index.test.js'
-        if: ${{needs.build.outputs.docsChange != 'docs-only'}}
+        if: ${{needs.build.outputs.docsChange != 'docs only change'}}
 
   testSafariOld:
     name: Test Safari 10.1 (nav)
@@ -262,13 +262,13 @@ jobs:
       BROWSERSTACK_ACCESS_KEY: ${{ secrets.BROWSERSTACK_ACCESS_KEY }}
     steps:
       - uses: actions/cache@v2
-        if: ${{needs.build.outputs.docsChange != 'docs-only'}}
+        if: ${{needs.build.outputs.docsChange != 'docs only change'}}
         id: restore-build
         with:
           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'
-        if: ${{needs.build.outputs.docsChange != 'docs-only'}}
+        if: ${{needs.build.outputs.docsChange != 'docs only change'}}
 
   publishRelease:
     name: Potentially publish release

.github/workflows/cancel.yml

@@ -1,6 +1,10 @@
 name: Cancel
 on:
   pull_request_target:
+    branches-ignore:
+      # don't run cancel job for branches named canary until
+      # it no longer cancels the main canary branches jobs
+      - canary
     types:
       - edited
       - synchronize

.github/workflows/pull_request_stats.yml

@@ -10,7 +10,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
-      - run: echo ::set-output name=DOCS_CHANGE::$(node skip-docs-change.js echo 'docs-only')
+      - run: echo ::set-output name=DOCS_CHANGE::$(node skip-docs-change.js echo 'not-docs-only-change')
         id: docs-change
       - uses: ./.github/actions/next-stats-action
-        if: ${{ steps.docs-change.outputs.DOCS_CHANGE != 'docs-only' }}
+        if: ${{ steps.docs-change.outputs.DOCS_CHANGE != 'docs only change' }}

.vscode/launch.json

@@ -42,6 +42,16 @@
       "port": 9229,
       "skipFiles": ["<node_internals>/**"],
       "outFiles": ["${workspaceFolder}/packages/next/dist/**/*"]
+    },
+    {
+      "name": "Launch this example",
+      "type": "node",
+      "request": "launch",
+      "cwd": "${workspaceFolder}",
+      "runtimeExecutable": "yarn",
+      "runtimeArgs": ["run", "debug", "dev", "${fileDirname}"],
+      "skipFiles": ["<node_internals>/**"],
+      "port": 9229
     }
   ]
 }

docs/advanced-features/measuring-performance.md

@@ -1,14 +1,19 @@
 ---
-description: Measure and track page performance using Next.js's build-in performance relayer
+description: Measure and track page performance using Next.js Analytics
 ---
 
 # Measuring performance
 
-Next.js has a built-in relayer that allows you to analyze and measure the performance of
+[Next.js Analytics](https://nextjs.org/analytics) allows you to analyze and measure the performance of
 pages using different metrics.
 
-To measure any of the supported metrics, you will need to create a [custom
-App](/docs/advanced-features/custom-app.md) component and define a `reportWebVitals` function:
+You can start collecting your [Real Experience Score](https://vercel.com/docs/analytics#metrics) with zero-configuration on [Vercel deployments](https://vercel.com/docs/analytics). There's also support for Analytics if you're [self-hosting](https://vercel.com/docs/analytics#self-hosted).
+
+The rest of this documentation describes the built-in relayer Next.js Analytics uses.
+
+## Build Your Own
+
+First, you will need to create a [custom App](/docs/advanced-features/custom-app.md) component and define a `reportWebVitals` function:
 
 ```js
 // pages/_app.js

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

@@ -224,3 +224,7 @@ module.exports = {
   },
 }
 ```
+
+### Cache-Control
+
+Cache-Control headers set in next.config.js will be overwritten in production to ensure that static assets can be cached effectively. If you need to revalidate the cache of a page that has been [statically generated](https://nextjs.org/docs/basic-features/pages#static-generation-recommended), you can do so by setting `revalidate` in the page's [`getStaticProps`](https://nextjs.org/docs/basic-features/data-fetching#getstaticprops-static-generation) function.

docs/api-reference/next/router.md

@@ -402,3 +402,26 @@ function Page({ router }) {
 
 export default withRouter(Page)
 ```
+
+### Typescript
+
+To use class components with `withRouter`, the component needs to accept a router prop:
+
+```tsx
+import React from 'react'
+import { withRouter, NextRouter } from 'next/router'
+
+interface WithRouterProps {
+  router: NextRouter
+}
+
+interface MyComponentProps extends WithRouterProps {}
+
+class MyComponent extends React.Component<MyComponentProps> {
+  render() {
+    return <p>{this.props.router.pathname}</p>
+  }
+}
+
+export default withRouter(MyComponent)
+```

docs/basic-features/data-fetching.md

@@ -289,7 +289,7 @@ Since Next.js compiles your code into a separate directory you can't use `__dirn
 Instead you can use `process.cwd()` which gives you the directory where Next.js is being executed.
 
 ```jsx
-import fs from 'fs'
+import { promises as fs } from 'fs'
 import path from 'path'
 
 // posts will be populated at build time by getStaticProps()
@@ -311,11 +311,11 @@ function Blog({ posts }) {
 // direct database queries. See the "Technical details" section.
 export async function getStaticProps() {
   const postsDirectory = path.join(process.cwd(), 'posts')
-  const filenames = fs.readdirSync(postsDirectory)
+  const filenames = await fs.readdir(postsDirectory)
 
-  const posts = filenames.map((filename) => {
+  const posts = filenames.map(async (filename) => {
     const filePath = path.join(postsDirectory, filename)
-    const fileContents = fs.readFileSync(filePath, 'utf8')
+    const fileContents = await fs.readFile(filePath, 'utf8')
 
     // Generally you would parse/transform the contents
     // For example you can transform markdown to HTML here
@@ -329,7 +329,7 @@ export async function getStaticProps() {
   // will receive `posts` as a prop at build time
   return {
     props: {
-      posts,
+      posts: await Promise.all(posts),
     },
   }
 }

docs/manifest.json

@@ -265,6 +265,10 @@
             }
           ]
         },
+        {
+          "title": "Static Optimization Indicator",
+          "path": "/docs/api-reference/next.config.js/static-optimization-indicator.md"
+        },
         {
           "title": "next.config.js",
           "routes": [

examples/amp-story/README.md

@@ -13,9 +13,9 @@ Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_mediu
 Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example:
 
 ```bash
-npx create-next-app --example amp-story amp-app
+npx create-next-app --example amp-story amp-story-app
 # or
-yarn create next-app --example amp-story amp-app
+yarn create next-app --example amp-story amp-story-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)).

examples/auth0/README.md

@@ -16,9 +16,9 @@ Read more: [https://auth0.com/blog/ultimate-guide-nextjs-authentication-auth0/](
 Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example:
 
 ```bash
-npx create-next-app --example auth0 auth0
+npx create-next-app --example auth0 auth0-app
 # or
-yarn create next-app --example auth0 auth0
+yarn create next-app --example auth0 auth0-app
 ```
 
 ## Configuring Auth0

examples/blog-starter-typescript/package.json

@@ -26,7 +26,6 @@
     "@types/react-dom": "^16.9.8",
     "autoprefixer": "^10.2.1",
     "postcss": "^8.2.4",
-    "postcss-preset-env": "^6.7.0",
     "tailwindcss": "^2.0.2"
   },
   "license": "MIT"

examples/blog-starter-typescript/postcss.config.js

@@ -1,3 +1,3 @@
 module.exports = {
-  plugins: ['tailwindcss', 'postcss-preset-env'],
+  plugins: ['tailwindcss', 'autoprefixer'],
 }