Merge remote-tracking branch 'upstream/canary' into patch-1

# Conflicts:
#	examples/image-component/README.md

.alexignore

@@ -0,0 +1,2 @@
+CODE_OF_CONDUCT.md
+examples/

.alexrc

@@ -0,0 +1,21 @@
+{
+  "allow": [
+    "attacks",
+    "color",
+    "dead",
+    "execute",
+    "executed",
+    "executes",
+    "execution",
+    "executions",
+    "failed",
+    "failure",
+    "failures",
+    "fire",
+    "fires",
+    "hook",
+    "hooks",
+    "host-hostess",
+    "invalid"
+  ]
+}

.github/actions/next-stats-action/Dockerfile

@@ -1,8 +1,8 @@
-FROM node:10-buster
+FROM node:14-buster
 
 LABEL com.github.actions.name="Next.js PR Stats"
 LABEL com.github.actions.description="Compares stats of a PR with the main branch"
-LABEL repository="https://github.com/zeit/next-stats-action"
+LABEL repository="https://github.com/vercel/next-stats-action"
 
 COPY . /next-stats
 

.github/workflows/build_test_deploy.yml

@@ -156,15 +156,15 @@ jobs:
     steps:
       - run: exit 0
 
-  testFutureDependencies:
-    name: Webpack 5 (Basic, Production, Acceptance)
+  testLegacyWebpack:
+    name: Webpack 4 (Basic, Production, Acceptance)
     runs-on: ubuntu-latest
     needs: build
     env:
       NEXT_TELEMETRY_DISABLED: 1
       NEXT_TEST_JOB: 1
       HEADLESS: true
-      NEXT_PRIVATE_TEST_WEBPACK5_MODE: 1
+      NEXT_PRIVATE_TEST_WEBPACK4_MODE: 1
 
     steps:
       - uses: actions/cache@v2
@@ -174,50 +174,16 @@ jobs:
           path: ./*
           key: ${{ github.sha }}
 
-      - run: xvfb-run node run-tests.js test/integration/{fallback-modules,link-ref,production,basic,async-modules,font-optimization,ssr-ctx}/test/index.test.js test/acceptance/*.test.js
+      - run: xvfb-run node run-tests.js test/integration/{basic,fallback-modules,link-ref,production,async-modules,font-optimization,ssr-ctx}/test/index.test.js test/acceptance/*.test.js
         if: ${{needs.build.outputs.docsChange != 'docs only change'}}
 
-  testLegacyReact:
-    name: React 16 + Webpack 4 (Basic, Production, Acceptance)
-    runs-on: ubuntu-latest
-    env:
-      NEXT_TELEMETRY_DISABLED: 1
-      NEXT_TEST_JOB: 1
-      HEADLESS: true
-
-    steps:
-      - uses: actions/checkout@v2
-        with:
-          fetch-depth: 25
-
-      - 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 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 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 change' }}
-
-      - run: yarn install --check-files
-        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 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 change' }}
-
   testFirefox:
     name: Test Firefox (production)
     runs-on: ubuntu-latest
     needs: build
     env:
       HEADLESS: true
-      BROWSERNAME: 'firefox'
+      BROWSER_NAME: 'firefox'
       NEXT_TELEMETRY_DISABLED: 1
     steps:
       - uses: actions/cache@v2
@@ -226,7 +192,7 @@ jobs:
         with:
           path: ./*
           key: ${{ github.sha }}
-      - run: node run-tests.js test/integration/production/test/index.test.js
+      - run: node run-tests.js -c 1 test/integration/production/test/index.test.js
         if: ${{needs.build.outputs.docsChange != 'docs only change'}}
 
   testSafari:
@@ -235,7 +201,7 @@ jobs:
     needs: build
     env:
       BROWSERSTACK: true
-      BROWSERNAME: 'safari'
+      BROWSER_NAME: 'safari'
       NEXT_TELEMETRY_DISABLED: 1
       SKIP_LOCAL_SELENIUM_SERVER: true
       BROWSERSTACK_USERNAME: ${{ secrets.BROWSERSTACK_USERNAME }}
@@ -247,7 +213,7 @@ jobs:
         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'
+      - run: '[[ -z "$BROWSERSTACK_ACCESS_KEY" ]] && echo "Skipping for PR" || node run-tests.js -c 1 test/integration/production/test/index.test.js'
         if: ${{needs.build.outputs.docsChange != 'docs only change'}}
 
   testSafariOld:
@@ -257,7 +223,7 @@ jobs:
     env:
       BROWSERSTACK: true
       LEGACY_SAFARI: true
-      BROWSERNAME: 'safari'
+      BROWSER_NAME: 'safari'
       NEXT_TELEMETRY_DISABLED: 1
       SKIP_LOCAL_SELENIUM_SERVER: true
       BROWSERSTACK_USERNAME: ${{ secrets.BROWSERSTACK_USERNAME }}
@@ -269,7 +235,7 @@ jobs:
         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'
+      - run: '[[ -z "$BROWSERSTACK_ACCESS_KEY" ]] && echo "Skipping for PR" || node run-tests.js -c 1 test/integration/production-nav/test/index.test.js'
         if: ${{needs.build.outputs.docsChange != 'docs only change'}}
 
   publishRelease:

.github/workflows/test_react_next.yml

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

azure-pipelines.yml

@@ -117,13 +117,13 @@ stages:
           vmImage: 'windows-2019'
         strategy:
           matrix:
-            node-10-1:
+            nodejs-1:
               group: 1/4
-            node-10-2:
+            nodejs-2:
               group: 2/4
-            node-10-3:
+            nodejs-3:
               group: 3/4
-            node-10-4:
+            nodejs-4:
               group: 4/4
         steps:
           - checkout: none

bench/capture-trace.js

@@ -1,5 +1,5 @@
-const http = require('http')
-const fs = require('fs')
+import { createServer } from 'http'
+import { writeFileSync } from 'fs'
 
 const PORT = 9411
 const HOST = '0.0.0.0'
@@ -53,11 +53,11 @@ const main = () => {
 
   process.on('SIGINT', () => {
     console.log(`\nSaving to ${outFile}...`)
-    fs.writeFileSync(outFile, JSON.stringify(traces, null, 2))
+    writeFileSync(outFile, JSON.stringify(traces, null, 2))
     process.exit()
   })
 
-  const server = http.createServer(onRequest)
+  const server = createServer(onRequest)
   server.listen(PORT, HOST, onReady)
 }
 

bench/package.json

@@ -8,7 +8,7 @@
     "bench:recursive-copy": "node recursive-copy/run"
   },
   "dependencies": {
-    "fs-extra": "7.0.1",
-    "recursive-copy": "2.0.10"
+    "fs-extra": "10.0.0",
+    "recursive-copy": "2.0.11"
   }
 }

bench/readdir/glob.js

@@ -1,6 +1,7 @@
-const { join } = require('path')
-const { promisify } = require('util')
-const globMod = require('glob')
+import { join } from 'path'
+import { promisify } from 'util'
+import globMod from 'glob'
+
 const glob = promisify(globMod)
 const resolveDataDir = join(__dirname, 'fixtures', '**/*')
 

bench/readdir/recursive-readdir.js

@@ -1,5 +1,5 @@
-const { join } = require('path')
-const { recursiveReadDir } = require('next/dist/lib/recursive-readdir')
+import { join } from 'path'
+import { recursiveReadDir } from 'next/dist/lib/recursive-readdir'
 const resolveDataDir = join(__dirname, 'fixtures')
 
 async function test() {

bench/recursive-copy/run.js

@@ -1,26 +1,22 @@
-const { join } = require('path')
-const fs = require('fs-extra')
-
-const recursiveCopyNpm = require('recursive-copy')
-
-const {
-  recursiveCopy: recursiveCopyCustom,
-} = require('next/dist/lib/recursive-copy')
+import { join } from 'path'
+import { ensureDir, outputFile, remove } from 'fs-extra'
+import recursiveCopyNpm from 'recursive-copy'
+import { recursiveCopy as recursiveCopyCustom } from 'next/dist/lib/recursive-copy'
 
 const fixturesDir = join(__dirname, 'fixtures')
 const srcDir = join(fixturesDir, 'src')
 const destDir = join(fixturesDir, 'dest')
 
 const createSrcFolder = async () => {
-  await fs.ensureDir(srcDir)
+  await ensureDir(srcDir)
 
   const files = new Array(100)
     .fill(undefined)
     .map((x, i) =>
       join(srcDir, `folder${i % 5}`, `folder${i + (1 % 5)}`, `file${i}`)
     )
 
-  await Promise.all(files.map((file) => fs.outputFile(file, 'hello')))
+  await Promise.all(files.map((file) => outputFile(file, 'hello')))
 }
 
 async function run(fn) {
@@ -38,7 +34,7 @@ async function run(fn) {
 
   for (let i = 0; i < 10; i++) {
     const t = await test()
-    await fs.remove(destDir)
+    await remove(destDir)
     ts.push(t)
   }
 
@@ -57,7 +53,7 @@ async function main() {
   console.log('test recursive-copy custom implementation')
   await run(recursiveCopyCustom)
 
-  await fs.remove(fixturesDir)
+  await remove(fixturesDir)
 }
 
 main()

bench/recursive-delete/recursive-delete.js

@@ -1,5 +1,5 @@
-const { join } = require('path')
-const { recursiveDelete } = require('next/dist/lib/recursive-delete')
+import { join } from 'path'
+import { recursiveDelete } from 'next/dist/lib/recursive-delete'
 const resolveDataDir = join(__dirname, `fixtures-${process.argv[2]}`)
 
 async function test() {

bench/recursive-delete/rimraf.js

@@ -1,8 +1,9 @@
-const { join } = require('path')
-const { promisify } = require('util')
-const rimrafMod = require('rimraf')
-const resolveDataDir = join(__dirname, `fixtures-${process.argv[2]}`, '**/*')
+import { join } from 'path'
+import { promisify } from 'util'
+import rimrafMod from 'rimraf'
+
 const rimraf = promisify(rimrafMod)
+const resolveDataDir = join(__dirname, `fixtures-${process.argv[2]}`, '**/*')
 
 async function test() {
   const time = process.hrtime()

contributing.md

@@ -1,6 +1,6 @@
 # Contributing to Next.js
 
-Our Commitment to Open Source can be found [here](https://vercel.com/oss).
+Read about our [Commitment to Open Source](https://vercel.com/oss).
 
 1. [Fork](https://help.github.com/articles/fork-a-repo/) this repository to your own GitHub account and then [clone](https://help.github.com/articles/cloning-a-repository/) it to your local device.
 2. Create a new branch: `git checkout -b MY_BRANCH_NAME`
@@ -46,7 +46,7 @@ Running a specific test suite inside of the `test/integration` directory:
 yarn testonly --testPathPattern "production"
 ```
 
-Running just one test in the `production` test suite:
+Running one test in the `production` test suite:
 
 ```sh
 yarn testonly --testPathPattern "production" -t "should allow etag header support"
@@ -124,12 +124,19 @@ When you add an example to the [examples](examples) directory, don’t forget to
 - To add additional installation instructions, please add it where appropriate.
 - To add additional notes, add `## Notes` section at the end.
 - Remove the `Deploy your own` section if your example can’t be immediately deployed to Vercel.
+- Remove the `Preview` section if the example doesn't work on [StackBlitz](http://stackblitz.com/) and file an issue [here](https://github.com/stackblitz/webcontainer-core).
 
 ````markdown
 # Example Name
 
 Description
 
+## Preview
+
+Preview the example live on [StackBlitz](http://stackblitz.com/):
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/DIRECTORY_NAME)
+
 ## Deploy your own
 
 Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):

docs/advanced-features/amp-support/typescript.md

@@ -6,4 +6,4 @@ description: Using AMP with TypeScript? Extend your typings to allow AMP compone
 
 AMP currently doesn't have built-in types for TypeScript, but it's in their roadmap ([#13791](https://github.com/ampproject/amphtml/issues/13791)).
 
-As a workaround you can manually create a file called `amp.d.ts` inside your project and add the custom types described [here](https://stackoverflow.com/a/50601125).
+As a workaround you can manually create a file called `amp.d.ts` inside your project and add these [custom types](https://stackoverflow.com/a/50601125).

docs/advanced-features/codemods.md

@@ -17,6 +17,14 @@ Codemods are transformations that run on your codebase programmatically. This al
 - `--dry` Do a dry-run, no code will be edited
 - `--print` Prints the changed output for comparison
 
+## Next.js 11
+
+### `cra-to-next` (experimental)
+
+Migrates a Create React App project to Next.js; creating a pages directory and necessary config to match behavior. Client-side only rendering is leveraged initially to prevent breaking compatibility due to `window` usage during SSR and can be enabled seamlessly to allow gradual adoption of Next.js specific features.
+
+Please share any feedback related to this transform [in this discussion](https://github.com/vercel/next.js/discussions/25858).
+
 ## Next.js 10
 
 ### `add-missing-react-import`
@@ -161,7 +169,7 @@ export default withRouter(
 )
 ```
 
-This is just one case. All the cases that are transformed (and tested) can be found in the [`__testfixtures__` directory](https://github.com/vercel/next.js/tree/canary/packages/next-codemod/transforms/__testfixtures__/url-to-withrouter).
+This is one case. All the cases that are transformed (and tested) can be found in the [`__testfixtures__` directory](https://github.com/vercel/next.js/tree/canary/packages/next-codemod/transforms/__testfixtures__/url-to-withrouter).
 
 #### Usage
 

docs/advanced-features/custom-app.md

@@ -42,7 +42,7 @@ The `Component` prop is the active `page`, so whenever you navigate between rout
 
 ### Caveats
 
-- 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.
+- If your app is running and you 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).

docs/advanced-features/debugging.md

@@ -69,7 +69,7 @@ Now hit <kdb>F5</kbd> or select **Debug: Start Debugging** from the Command Pale
 
 Now you can use the [`debugger`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/debugger) statement to pause your backend or frontend code anytime you want to observe and debug your code more precisely.
 
-If you trigger the underlying code by refreshing the current page, clicking on a page link or fetching an API route, your code will be paused and the debugger window will pop up.
+If you trigger the underlying code by refreshing the current page, clicking on a page link or fetching an API route, your code will be paused and the debugger window will appear.
 
 To learn more on how to use a JavaScript debugger, take a look at the following documentation:
 

docs/advanced-features/dynamic-import.md

@@ -45,7 +45,7 @@ export default function Page() {
 
 You can think of dynamic imports as another way to split your code into manageable chunks.
 
-React components can also be imported using dynamic imports, but in this case we use it in conjunction with `next/dynamic` to make sure it works just like any other React Component. Check out the sections below for more details on how it works.
+React components can also be imported using dynamic imports, but in this case we use it in conjunction with `next/dynamic` to make sure it works like any other React Component. Check out the sections below for more details on how it works.
 
 ## Basic usage