Merge branch 'canary' into hotfix/css-page-order

.eslintignore

@@ -4,6 +4,7 @@ node_modules
 **/dist/**
 examples/with-typescript-eslint-jest/**
 examples/with-kea/**
+packages/next/bundles/webpack/packages/*.runtime.js
 packages/next/compiled/**/*
 packages/react-refresh-utils/**/*.js
 packages/react-dev-overlay/lib/**

.github/ISSUE_TEMPLATE/1.bug_report.yml

@@ -10,6 +10,12 @@ inputs:
   - type: description
     attributes:
       value: If you leave out sections there is a high likelihood it will be moved to the GitHub Discussions "Help" section.
+  - type: description
+    attributes:
+      value: 'Please first verify if your issue exists in the Next.js canary release line: `npm install next@canary`.'
+  - type: description
+    attributes:
+      value: 'next@canary is the beta version of Next.js. It includes all features and fixes that are pending to land on the stable release line.'
   - type: input
     attributes:
       label: What version of Next.js are you using?

.github/actions/next-stats-action/src/prepare/repo-setup.js

@@ -69,13 +69,17 @@ module.exports = (actionInfo) => {
       for (const pkg of pkgs) {
         const pkgPath = path.join(repoDir, 'packages', pkg)
         const packedPkgPath = path.join(pkgPath, `${pkg}-packed.tgz`)
-        // pack the package with yarn
-        await exec(`cd ${pkgPath} && yarn pack -f ${pkg}-packed.tgz`)
 
         const pkgDataPath = path.join(pkgPath, 'package.json')
         const pkgData = require(pkgDataPath)
         const { name } = pkgData
-        pkgDatas.set(name, { pkgDataPath, pkgData, packedPkgPath })
+        pkgDatas.set(name, {
+          pkgDataPath,
+          pkg,
+          pkgPath,
+          pkgData,
+          packedPkgPath,
+        })
         pkgPaths.set(name, packedPkgPath)
       }
 
@@ -93,6 +97,13 @@ module.exports = (actionInfo) => {
           'utf8'
         )
       }
+
+      // wait to pack packages until after dependency paths have been updated
+      // to the correct versions
+      for (const pkgName of pkgDatas.keys()) {
+        const { pkg, pkgPath } = pkgDatas.get(pkgName)
+        await exec(`cd ${pkgPath} && yarn pack -f ${pkg}-packed.tgz`)
+      }
       return pkgPaths
     },
   }

.github/workflows/build_test_deploy.yml

@@ -11,11 +11,17 @@ jobs:
     runs-on: ubuntu-latest
     env:
       NEXT_TELEMETRY_DISABLED: 1
+    outputs:
+      docsChange: ${{ steps.docs-change.outputs.DOCS_CHANGE }}
     steps:
       - uses: actions/checkout@v2
       - run: git fetch --depth=1 origin +refs/tags/*:refs/tags/*
       - 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')
+        id: docs-change
+      - run: echo ${{steps.docs-change.outputs.DOCS_CHANGE}}
       - uses: actions/cache@v2
         id: cache-build
         with:
@@ -41,11 +47,13 @@ jobs:
       NEXT_TELEMETRY_DISABLED: 1
     steps:
       - uses: actions/cache@v2
+        if: ${{needs.build.outputs.docsChange != 'docs-only'}}
         id: restore-build
         with:
           path: ./*
           key: ${{ github.sha }}
       - run: ./check-pre-compiled.sh
+        if: ${{needs.build.outputs.docsChange != 'docs-only'}}
 
   testUnit:
     name: Test Unit
@@ -57,12 +65,14 @@ jobs:
       HEADLESS: true
     steps:
       - uses: actions/cache@v2
+        if: ${{needs.build.outputs.docsChange != 'docs-only'}}
         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'}}
 
   testIntegration:
     name: Test Integration
@@ -77,16 +87,20 @@ jobs:
       matrix:
         group: [1, 2, 3, 4, 5, 6]
     steps:
+      - run: echo ${{needs.build.outputs.docsChange}}
       - uses: actions/cache@v2
+        if: ${{needs.build.outputs.docsChange != 'docs-only'}}
         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'}}
 
       - run: xvfb-run node run-tests.js --timings -g ${{ matrix.group }}/6 -c 3
+        if: ${{needs.build.outputs.docsChange != 'docs-only'}}
 
   testElectron:
     name: Test Electron
@@ -99,17 +113,21 @@ jobs:
       TEST_ELECTRON: 1
     steps:
       - uses: actions/cache@v2
+        if: ${{needs.build.outputs.docsChange != 'docs-only'}}
         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'}}
 
       - run: yarn add -W --dev [email protected] [email protected]
+        if: ${{needs.build.outputs.docsChange != 'docs-only'}}
 
       - run: xvfb-run node run-tests.js test/integration/with-electron/test/index.test.js
+        if: ${{needs.build.outputs.docsChange != 'docs-only'}}
 
   testYarnPnP:
     runs-on: ubuntu-latest
@@ -119,9 +137,14 @@ jobs:
     steps:
       - uses: actions/checkout@v2
 
+      - run: echo ::set-output name=DOCS_CHANGE::$(node skip-docs-change.js echo 'docs-only')
+        id: docs-change
+
       - run: yarn install --frozen-lockfile --check-files
+        if: ${{steps.docs-change.outputs.DOCS_CHANGE != 'docs-only'}}
 
       - run: bash ./test-pnp.sh
+        if: ${{steps.docs-change.outputs.DOCS_CHANGE != 'docs-only'}}
 
   testsPass:
     name: thank you, next
@@ -131,22 +154,60 @@ jobs:
       - run: exit 0
 
   testFutureDependencies:
-    name: React 17 + webpack 5 (Basic, Production, Acceptance)
+    name: Webpack 5 (Basic, Production, Acceptance)
     runs-on: ubuntu-latest
     env:
       NEXT_TELEMETRY_DISABLED: 1
       NEXT_TEST_JOB: 1
       HEADLESS: true
+      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')
+        id: docs-change
+
       - run: git fetch --depth=1 origin +refs/tags/*:refs/tags/*
-      - run: cat package.json | jq '.resolutions.webpack = "^5.11.1"' > package.json.tmp && mv package.json.tmp package.json
-      - run: cat package.json | jq '.resolutions.react = "^17.0.1"' > package.json.tmp && mv package.json.tmp package.json
-      - run: cat package.json | jq '.resolutions."react-dom" = "^17.0.1"' > package.json.tmp && mv package.json.tmp package.json
+        if: ${{ steps.docs-change.outputs.DOCS_CHANGE != 'docs-only' }}
+
       - run: yarn install --check-files
-      - run: yarn list webpack react react-dom
+        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' }}
+
+  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
+
+      - run: echo ::set-output name=DOCS_CHANGE::$(node skip-docs-change.js echo 'docs-only')
+        id: docs-change
+
+      - run: git fetch --depth=1 origin +refs/tags/*:refs/tags/*
+        if: ${{ steps.docs-change.outputs.DOCS_CHANGE != 'docs-only' }}
+
+      - 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' }}
+
+      - 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' }}
+
+      - run: yarn install --check-files
+        if: ${{ steps.docs-change.outputs.DOCS_CHANGE != 'docs-only' }}
+
+      - run: yarn list react react-dom
+        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,worker-loader}/test/index.test.js test/acceptance/*.test.js
+        if: ${{ steps.docs-change.outputs.DOCS_CHANGE != 'docs-only' }}
 
   testFirefox:
     name: Test Firefox (production)
@@ -158,11 +219,13 @@ jobs:
       NEXT_TELEMETRY_DISABLED: 1
     steps:
       - uses: actions/cache@v2
+        if: ${{needs.build.outputs.docsChange != 'docs-only'}}
         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'}}
 
   testSafari:
     name: Test Safari (production)
@@ -177,11 +240,13 @@ jobs:
       BROWSERSTACK_ACCESS_KEY: ${{ secrets.BROWSERSTACK_ACCESS_KEY }}
     steps:
       - uses: actions/cache@v2
+        if: ${{needs.build.outputs.docsChange != 'docs-only'}}
         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'}}
 
   testSafariOld:
     name: Test Safari 10.1 (nav)
@@ -197,11 +262,13 @@ jobs:
       BROWSERSTACK_ACCESS_KEY: ${{ secrets.BROWSERSTACK_ACCESS_KEY }}
     steps:
       - uses: actions/cache@v2
+        if: ${{needs.build.outputs.docsChange != 'docs-only'}}
         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'}}
 
   publishRelease:
     name: Potentially publish release

.github/workflows/pull_request_stats.yml

@@ -10,4 +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')
+        id: docs-change
       - uses: ./.github/actions/next-stats-action
+        if: ${{ steps.docs-change.outputs.DOCS_CHANGE != 'docs-only' }}

.github/workflows/test_macos.yml

@@ -1,6 +1,11 @@
 on:
   push:
     branches: [canary]
+    paths-ignore:
+      - 'bench/**'
+      - 'docs/**'
+      - 'errors/**'
+      - 'examples/**'
 
 name: Test macOS
 

.prettierignore

@@ -2,6 +2,7 @@ node_modules
 **/.next/**
 **/_next/**
 **/dist/**
+packages/next/bundles/webpack/packages/*.runtime.js
 packages/next/compiled/**
 packages/react-refresh-utils/**/*.js
 packages/react-refresh-utils/**/*.d.ts
@@ -14,4 +15,4 @@ packages/next-codemod/transforms/__tests__/**/*
 packages/next-codemod/**/*.js
 packages/next-codemod/**/*.d.ts
 packages/next-env/**/*.d.ts
-test-timings.json
+test-timings.json

.prettierignore_staged

@@ -2,6 +2,7 @@
 **/_next/**
 **/dist/**
 packages/next/compiled/**/*
+packages/next/bundles/webpack/packages/*.runtime.js
 lerna.json
 packages/next-codemod/transforms/__testfixtures__/**/*
 packages/next-codemod/transforms/__tests__/**/*

bench/instrument.js

@@ -1,11 +1,35 @@
+// Disable automatic instrumentation
+process.env.OTEL_NO_PATCH_MODULES = '*'
+
 const { NodeTracerProvider } = require('@opentelemetry/node')
-const { BatchSpanProcessor } = require('@opentelemetry/tracing')
+const { SimpleSpanProcessor } = require('@opentelemetry/tracing')
 const { ZipkinExporter } = require('@opentelemetry/exporter-zipkin')
 
-const tracerProvider = new NodeTracerProvider()
+const tracerProvider = new NodeTracerProvider({
+  // All automatic instrumentation plugins have to be disabled as it affects worker_thread/child_process bootup performance
+  plugins: {
+    mongodb: { enabled: false, path: '@opentelemetry/plugin-mongodb' },
+    grpc: { enabled: false, path: '@opentelemetry/plugin-grpc' },
+    '@grpc/grpc-js': { enabled: false, path: '@opentelemetry/plugin-grpc-js' },
+    http: { enabled: false, path: '@opentelemetry/plugin-http' },
+    https: { enabled: false, path: '@opentelemetry/plugin-https' },
+    mysql: { enabled: false, path: '@opentelemetry/plugin-mysql' },
+    pg: { enabled: false, path: '@opentelemetry/plugin-pg' },
+    redis: { enabled: false, path: '@opentelemetry/plugin-redis' },
+    ioredis: { enabled: false, path: '@opentelemetry/plugin-ioredis' },
+    'pg-pool': { enabled: false, path: '@opentelemetry/plugin-pg-pool' },
+    express: { enabled: false, path: '@opentelemetry/plugin-express' },
+    '@hapi/hapi': {
+      enabled: false,
+      path: '@opentelemetry/hapi-instrumentation',
+    },
+    koa: { enabled: false, path: '@opentelemetry/koa-instrumentation' },
+    dns: { enabled: false, path: '@opentelemetry/plugin-dns' },
+  },
+})
 
 tracerProvider.addSpanProcessor(
-  new BatchSpanProcessor(
+  new SimpleSpanProcessor(
     new ZipkinExporter({
       serviceName: 'next-js',
     })

check-pre-compiled.sh

@@ -1,5 +1,8 @@
 #!/bin/bash
 
+yarn --cwd packages/next/bundles
+cp packages/next/bundles/node_modules/webpack5/lib/hmr/HotModuleReplacement.runtime.js packages/next/bundles/webpack/packages/
+cp packages/next/bundles/node_modules/webpack5/lib/hmr/JavascriptHotModuleReplacement.runtime.js packages/next/bundles/webpack/packages/
 yarn --cwd packages/next ncc-compiled
 
 # Make sure to exit with 1 if there are changes after running ncc-compiled

contributing.md

@@ -18,7 +18,7 @@ To contribute to [our examples](examples), take a look at the [“Adding example
 
 Make sure you have `chromedriver` installed for your Chrome version. You can install it with
 
-- `brew cask install chromedriver` on Mac OS X
+- `brew install --cask chromedriver` on Mac OS X
 - `chocolatey install chromedriver` on Windows
 - Or manually download the version that matches your installed chrome version (if there's no match, download a version under it, but not above) from the [chromedriver repo](https://chromedriver.storage.googleapis.com/index.html) and add the binary to `<next-repo>/node_modules/.bin`
 
@@ -134,7 +134,7 @@ Description
 
 Deploy the example using [Vercel](https://vercel.com/now):
 
-[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/project?template=https://github.com/vercel/next.js/tree/canary/examples/DIRECTORY_NAME)
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/DIRECTORY_NAME&project-name=DIRECTORY_NAME&repository-name=DIRECTORY_NAME)
 
 ## How to use
 
@@ -146,5 +146,5 @@ npx create-next-app --example DIRECTORY_NAME DIRECTORY_NAME-app
 yarn create next-app --example DIRECTORY_NAME DIRECTORY_NAME-app
 ```
 
-Deploy it to the cloud with [Vercel](https://vercel.com/import?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).
+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)).
 ````