Merge branch 'canary' into fix/gip-aspath

.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

@@ -154,12 +154,13 @@ 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
@@ -170,22 +171,42 @@ jobs:
       - 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.webpack = "^5.11.1"' > package.json.tmp && mv package.json.tmp package.json
+      - run: yarn install --check-files
+        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 = "^17.0.1"' > package.json.tmp && mv package.json.tmp package.json
+      - 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" = "^17.0.1"' > package.json.tmp && mv package.json.tmp package.json
+      - 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 webpack react react-dom
+      - 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}/test/index.test.js test/acceptance/*.test.js
+      - 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:

.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__/**/*

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`
 

docs/advanced-features/codemods.md

@@ -17,13 +17,42 @@ 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 10
+
+### `add-missing-react-import`
+
+Transforms files that do not import `React` to include the import in order for the new [React JSX transform](https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html) to work.
+
+For example:
+
+```jsx
+// my-component.js
+export default class Home extends React.Component {
+  render() {
+    return <div>Hello World</div>
+  }
+}
+```
+
+Transforms into:
+
+```jsx
+// my-component.js
+import React from 'react'
+export default class Home extends React.Component {
+  render() {
+    return <div>Hello World</div>
+  }
+}
+```
+
 ## Next.js 9
 
 ### `name-default-component`
 
 Transforms anonymous components into named components to make sure they work with [Fast Refresh](https://nextjs.org/blog/next-9-4#fast-refresh).
 
-For example
+For example:
 
 ```jsx
 // my-component.js

docs/advanced-features/i18n-routing.md

@@ -39,6 +39,7 @@ module.exports = {
     defaultLocale: 'en-US',
     // This is a list of locale domains and the default locale they
     // should handle (these are only required when setting up domain routing)
+    // Note: subdomains must be included in the domain value to be matched e.g. "fr.example.com".
     domains: [
       {
         domain: 'example.com',

docs/deployment.md

@@ -15,7 +15,7 @@ If you haven’t already done so, push your Next.js app to a Git provider of you
 Then, follow these steps:
 
 1. [Sign up to Vercel](https://vercel.com/signup) (no credit card is required).
-2. After signing up, you’ll arrive on the [“Import Project”](https://vercel.com/new) page. Under “From Git Repository”, choose the Git provider you use and set up an integration. (Instructions: [GitHub](https://vercel.com/docs/v2/git-integrations/vercel-for-github) / [GitLab](https://vercel.com/docs/v2/git-integrations/vercel-for-gitlab) / [BitBucket](https://vercel.com/docs/v2/git-integrations/vercel-for-bitbucket)).
+2. After signing up, you’ll arrive on the [“Import Project”](https://vercel.com/new) page. Under “From Git Repository”, choose the Git provider you use and set up an integration. (Instructions: [GitHub](https://vercel.com/docs/git/vercel-for-github) / [GitLab](https://vercel.com/docs/git/vercel-for-gitlab) / [BitBucket](https://vercel.com/docs/git/vercel-for-bitbucket)).
 3. Once that’s set up, click “Import Project From …” and import your Next.js app. It auto-detects that your app is using Next.js and sets up the build configuration for you. No need to change anything — everything should work just fine!
 4. After importing, it’ll deploy your Next.js app and provide you with a deployment URL. Click “Visit” to see your app in production.
 
@@ -40,13 +40,13 @@ By using the DPS workflow, in addition to doing _code reviews_, you can do _depl
 For example, the [hybrid pages](/docs/basic-features/pages.md) approach is fully supported out of the box.
 
 - Every page can either use [Static Generation](/docs/basic-features/pages.md#static-generation) or [Server-Side Rendering](/docs/basic-features/pages.md#server-side-rendering).
-- Pages that use [Static Generation](/docs/basic-features/pages.md#static-generation) and assets (JS, CSS, images, fonts, etc) will automatically be served from [Vercel's Edge Network](https://vercel.com/docs/v2/edge-network/overview), which is blazingly fast.
+- Pages that use [Static Generation](/docs/basic-features/pages.md#static-generation) and assets (JS, CSS, images, fonts, etc) will automatically be served from [Vercel's Edge Network](https://vercel.com/docs/edge-network/overview), which is blazingly fast.
 - Pages that use [Server-Side Rendering](/docs/basic-features/pages.md#server-side-rendering) and [API routes](/docs/api-routes/introduction.md) will automatically become isolated Serverless Functions. This allows page rendering and API requests to scale infinitely.
 
 ### Custom Domains, Environment Variables, Automatic HTTPS, and more
 
-- **Custom Domains:** Once deployed on [Vercel](https://vercel.com), you can assign a custom domain to your Next.js app. Take a look at [our documentation here](https://vercel.com/docs/v2/custom-domains).
-- **Environment Variables:** You can also set environment variables on Vercel. Take a look at [our documentation here](https://vercel.com/docs/v2/build-step#using-environment-variables-and-secrets). You can then [use those environment variables](/docs/api-reference/next.config.js/environment-variables.md) in your Next.js app.
+- **Custom Domains:** Once deployed on [Vercel](https://vercel.com), you can assign a custom domain to your Next.js app. Take a look at [our documentation here](https://vercel.com/docs/custom-domains).
+- **Environment Variables:** You can also set environment variables on Vercel. Take a look at [our documentation here](https://vercel.com/docs/environment-variables). You can then [use those environment variables](/docs/api-reference/next.config.js/environment-variables.md) in your Next.js app.
 - **Automatic HTTPS:** HTTPS is enabled by default (including custom domains) and doesn't require extra configuration. We auto-renew SSL certificates.
 - **More:** [Read our documentation](https://vercel.com/docs) to learn more about the Vercel platform.
 

docs/manifest.json

@@ -213,6 +213,14 @@
             {
               "title": "Migrating from Gatsby",
               "path": "/docs/migrating/from-gatsby.md"
+            },
+            {
+              "title": "Migrating from Create React App",
+              "path": "/docs/migrating/from-create-react-app.md"
+            },
+            {
+              "title": "Migrating from React Router",
+              "path": "/docs/migrating/from-react-router.md"
             }
           ]
         },
@@ -257,6 +265,10 @@
             }
           ]
         },
+        {
+          "title": "Static Optimization Indicator",
+          "path": "/docs/api-reference/next.config.js/static-optimization-indicator.md"
+        },
         {
           "title": "next.config.js",
           "routes": [