Merge branch 'canary' into feat/image-sources

.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`
@@ -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`

docs/advanced-features/measuring-performance.md

@@ -175,7 +175,7 @@ export function reportWebVitals(metric) {
 > }
 > ```
 >
-> Read more about sending results to Google Analytics [here](https://github.com/GoogleChrome/web-vitals#send-the-results-to-google-analytics).
+> Read more about [sending results to Google Analytics](https://github.com/GoogleChrome/web-vitals#send-the-results-to-google-analytics).
 
 ## TypeScript
 

docs/api-reference/cli.md

@@ -21,7 +21,7 @@ Usage
   $ next <command>
 
 Available commands
-  build, start, export, dev, telemetry
+  build, start, export, dev, lint, telemetry
 
 Options
   --version, -v   Version number
@@ -74,6 +74,20 @@ The application will start at `http://localhost:3000` by default. The default po
 npx next dev -p 4000
 ```
 
+Or using the `PORT` environment variable:
+
+```bash
+PORT=4000 npx next dev
+```
+
+> Note: `PORT` can not be set in `.env` as booting up the HTTP server happens before any other code is initialized.
+
+You can also set the hostname to be different from the default of `0.0.0.0`, this can be useful for making the application available for other devices on the network. The default hostname can be changed with `-H`, like so:
+
+```bash
+npx next dev -H 192.168.1.2
+```
+
 ## Production
 
 `next start` starts the application in production mode. The application should be compiled with [`next build`](#build) first.
@@ -84,6 +98,27 @@ The application will start at `http://localhost:3000` by default. The default po
 npx next start -p 4000
 ```
 
+Or using the `PORT` environment variable:
+
+```bash
+PORT=4000 npx next start
+```
+
+> Note: `PORT` can not be set in `.env` as booting up the HTTP server happens before any other code is initialized.
+
+## Lint
+
+`next lint` runs ESLint for all files in the `pages`, `components`, and `lib` directories. It also
+provides a guided setup to install any required dependencies if ESLint is not already configured in
+your application.
+
+If you have other directories that you would like to lint, you can specify them using the `--dir`
+flag:
+
+```bash
+next lint --dir utils
+```
+
 ## Telemetry
 
 Next.js collects **completely anonymous** telemetry data about general usage.