Merge branch 'canary' into eslint-a11y-rules

.alexignore

@@ -1,4 +1,2 @@
 CODE_OF_CONDUCT.md
-docs/
-errors/
 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"
+  ]
+}

.eslintignore

@@ -6,6 +6,10 @@ e2e-tests/**
 examples/with-eslint/**
 examples/with-typescript-eslint-jest/**
 examples/with-kea/**
+examples/with-custom-babel-config/**
+examples/with-flow/**
+examples/with-mobx-state-tree/**
+examples/with-mobx/**
 packages/next/bundles/webpack/packages/*.runtime.js
 packages/next/compiled/**/*
 packages/react-refresh-utils/**/*.js
@@ -18,6 +22,5 @@ packages/next-codemod/**/*.js
 packages/next-codemod/**/*.d.ts
 packages/next-env/**/*.d.ts
 packages/create-next-app/templates/**
-test/integration/async-modules/**
 test/integration/eslint/**
 test-timings.json

.eslintrc.json

@@ -1,6 +1,6 @@
 {
   "root": true,
-  "parser": "babel-eslint",
+  "parser": "@babel/eslint-parser",
   "plugins": ["react", "react-hooks", "jest", "import"],
   "env": {
     "browser": true,
@@ -9,10 +9,17 @@
     "node": true
   },
   "parserOptions": {
-    "ecmaVersion": 2018,
+    "requireConfigFile": false,
     "sourceType": "module",
     "ecmaFeatures": {
       "jsx": true
+    },
+    "babelOptions": {
+      "presets": ["@babel/preset-env", "@babel/preset-react"],
+      "caller": {
+        // Eslint supports top level await when a parser for it is included. We enable the parser by default for Babel.
+        "supportsTopLevelAwait": true
+      }
     }
   },
   "settings": {

.github/CODEOWNERS

@@ -1,6 +1,6 @@
 # Learn how to add code owners here:
 # https://help.github.com/en/articles/about-code-owners
 
-*          @timneutkens @ijjk @lfades @divmain @shuding
-/docs/     @timneutkens @ijjk @lfades @divmain @shuding @leerob
-/examples/ @timneutkens @ijjk @lfades @divmain @shuding @leerob
+*          @timneutkens @ijjk @shuding @styfle @huozhi @padmaia
+/docs/     @timneutkens @ijjk @shuding @styfle @huozhi @padmaia @leerob @lfades
+/examples/ @timneutkens @ijjk @shuding @styfle @huozhi @padmaia @leerob @lfades

.github/actions/next-stats-action/src/index.js

@@ -102,13 +102,17 @@ if (!allowedActions.has(actionInfo.actionName) && !actionInfo.isRelease) {
       logger(`Running initial build for ${dir}`)
       if (!actionInfo.skipClone) {
         let buildCommand = `cd ${dir}${
-          !statsConfig.skipInitialInstall ? ' && yarn install' : ''
+          !statsConfig.skipInitialInstall
+            ? ' && yarn install --network-timeout 1000000'
+            : ''
         }`
 
         if (statsConfig.initialBuildCommand) {
           buildCommand += ` && ${statsConfig.initialBuildCommand}`
         }
-        await exec(buildCommand)
+        // allow 5 minutes node_modules install + building all packages
+        // in case of noisy environment slowing down initial repo build
+        await exec(buildCommand, false, { timeout: 5 * 60 * 1000 })
       }
 
       logger(`Linking packages in ${dir}`)

.github/labeler.json

@@ -9,13 +9,23 @@
       "packages/react-refresh-utils/**",
       "packages/next-codemod/**"
     ],
-    "type: chrome": [
+    "created-by: Chrome Aurora": [
       { "type": "user", "pattern": "spanicker" },
       { "type": "user", "pattern": "housseindjirdeh" },
       { "type": "user", "pattern": "devknoll" },
       { "type": "user", "pattern": "janicklas-ralph" },
       { "type": "user", "pattern": "atcastle" },
       { "type": "user", "pattern": "Joonpark13" }
+    ],
+    "created-by: Next.js team": [
+      { "type": "user", "pattern": "ijjk" },
+      { "type": "user", "pattern": "padmaia" },
+      { "type": "user", "pattern": "huozhi" },
+      { "type": "user", "pattern": "shuding" },
+      { "type": "user", "pattern": "sokra" },
+      { "type": "user", "pattern": "styfle" },
+      { "type": "user", "pattern": "leerob" },
+      { "type": "user", "pattern": "timneutkens" }
     ]
   }
 }

.github/pull_request_template.md

@@ -8,6 +8,7 @@ Choose the right checklist for the change that you're making:
 
 - [ ] Related issues linked using `fixes #number`
 - [ ] Integration tests added
+- [ ] Errors have helpful link attached, see `contributing.md`
 
 ## Feature
 
@@ -16,6 +17,7 @@ Choose the right checklist for the change that you're making:
 - [ ] Integration tests added
 - [ ] Documentation added
 - [ ] Telemetry added. In case of a feature if it's used or not.
+- [ ] Errors have helpful link attached, see `contributing.md`
 
 ## Documentation / Examples
 

.github/workflows/build_test_deploy.yml

@@ -55,7 +55,7 @@ jobs:
         with:
           path: ./*
           key: ${{ github.sha }}
-      - run: ./check-pre-compiled.sh
+      - run: ./scripts/check-pre-compiled.sh
         if: ${{needs.build.outputs.docsChange != 'docs only change'}}
 
   testUnit:
@@ -146,7 +146,7 @@ jobs:
           path: ./*
           key: ${{ github.sha }}
 
-      - run: bash ./test-pnp.sh
+      - run: bash ./scripts/test-pnp.sh
         if: ${{needs.build.outputs.docsChange != 'docs only change'}}
 
   testsPass:
@@ -251,7 +251,7 @@ jobs:
           path: ./*
           key: ${{ github.sha }}
 
-      - run: ./publish-release.sh
+      - run: ./scripts/publish-release.sh
 
   prStats:
     name: Release Stats
@@ -263,7 +263,7 @@ jobs:
         with:
           path: ./*
           key: ${{ github.sha }}
-      - run: ./release-stats.sh
+      - run: ./scripts/release-stats.sh
       - uses: ./.github/actions/next-stats-action
         env:
           PR_STATS_COMMENT_TOKEN: ${{ secrets.PR_STATS_COMMENT_TOKEN }}

.prettierignore

@@ -16,3 +16,4 @@ packages/next-codemod/**/*.js
 packages/next-codemod/**/*.d.ts
 packages/next-env/**/*.d.ts
 test-timings.json
+test/**/out/**

azure-pipelines.yml

@@ -111,36 +111,37 @@ stages:
           - script: |
               node run-tests.js -g 1/1 --timings --azure --type unit
             displayName: 'Run tests'
-
-      - job: test_chrome_integration
-        pool:
-          vmImage: 'windows-2019'
-        strategy:
-          matrix:
-            nodejs-1:
-              group: 1/4
-            nodejs-2:
-              group: 2/4
-            nodejs-3:
-              group: 3/4
-            nodejs-4:
-              group: 4/4
-        steps:
-          - checkout: none
-          - script: |
-              wmic datafile where name="C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe" get Version /value
-            displayName: 'List Chrome version'
-          - task: NodeTool@0
-            inputs:
-              versionSpec: $(node_version)
-            displayName: 'Install Node.js'
-          - task: Cache@2
-            inputs:
-              # use deterministic cache key that is specific
-              # to this test run
-              key: $(Build.SourceVersion)
-              path: $(System.DefaultWorkingDirectory)
-            displayName: Cache Build
-          - script: |
-              node run-tests.js -g $(group) --timings --azure
-            displayName: 'Run tests'
+      # TODO: investigate re-enabling when stability matches running in
+      # tests in ubuntu environment
+      # - job: test_chrome_integration
+      #   pool:
+      #     vmImage: 'windows-2019'
+      #   strategy:
+      #     matrix:
+      #       nodejs-1:
+      #         group: 1/4
+      #       nodejs-2:
+      #         group: 2/4
+      #       nodejs-3:
+      #         group: 3/4
+      #       nodejs-4:
+      #         group: 4/4
+      #   steps:
+      #     - checkout: none
+      #     - script: |
+      #         wmic datafile where name="C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe" get Version /value
+      #       displayName: 'List Chrome version'
+      #     - task: NodeTool@0
+      #       inputs:
+      #         versionSpec: $(node_version)
+      #       displayName: 'Install Node.js'
+      #     - task: Cache@2
+      #       inputs:
+      #         # use deterministic cache key that is specific
+      #         # to this test run
+      #         key: $(Build.SourceVersion)
+      #         path: $(System.DefaultWorkingDirectory)
+      #       displayName: Cache Build
+      #     - script: |
+      #         node run-tests.js -g $(group) --timings --azure
+      #       displayName: 'Run tests'

contributing.md

@@ -14,6 +14,20 @@ Read about our [Commitment to Open Source](https://vercel.com/oss).
 
 To contribute to [our examples](examples), take a look at the [“Adding examples” section](#adding-examples).
 
+## Adding warning/error descriptions
+
+In Next.js we have a system to add helpful links to warnings and errors.
+
+This allows for the logged message to be short while giving a broader description and instructions on how to solve the warning/error.
+
+In general all warnings and errors added should have these links attached.
+
+Below are the steps to add a new link:
+
+- Create a new markdown file under the `errors` directory based on `errors/template.md`: `cp errors/template.md errors/<error-file-name>.md`
+- Add the newly added file to `errors/manifest.json`
+- Add the following url to your warning/error: `https://nextjs.org/docs/messages/<file-path-without-dotmd>`. For example to link to `errors/api-routes-static-export.md` you use the url: `https://nextjs.org/docs/messages/api-routes-static-export`
+
 ## To run tests
 
 Make sure you have `chromedriver` installed for your Chrome version. You can install it with
@@ -79,6 +93,14 @@ EXAMPLE=./test/integration/basic
 
 ## Running your own app with locally compiled version of Next.js
 
+1. Move your app inside of the Next.js monorepo.
+
+2. Run with `yarn next-with-deps ./app-path-in-monorepo`
+
+This will use the version of `next` built inside of the Next.js monorepo and the main `yarn dev` monorepo command can be running to make changes to the local Next.js version at the same time (some changes might require re-running `yarn next-with-deps` to take affect).
+
+or
+
 1. In your app's `package.json`, replace:
 
    ```json
@@ -155,3 +177,7 @@ yarn create next-app --example DIRECTORY_NAME DIRECTORY_NAME-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)).
 ````
+
+## Publishing
+
+Repository maintainers can use `yarn publish-canary` to publish a new version of all packages to npm.

docs/advanced-features/codemods.md

@@ -169,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

@@ -55,7 +55,7 @@ Create a file named `.vscode/launch.json` at the root of your project with this
     {
       "type": "node",
       "request": "attach",
-      "name": "Launch Program",
+      "name": "Attach to application",
       "skipFiles": ["<node_internals>/**"],
       "port": 9229
     }
@@ -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
 

docs/advanced-features/multi-zones.md

@@ -18,7 +18,7 @@ With multi zones support, you can merge both these apps into a single one allowi
 
 ## How to define a zone
 
-There are no special zones related APIs. You only need to do following:
+There are no zone related APIs. You only need to do the following:
 
 - Make sure to keep only the pages you need in your app, meaning that an app can't have pages from another app, if app `A` has `/blog` then app `B` shouldn't have it too.
 - Make sure to configure a [basePath](/docs/api-reference/next.config.js/basepath.md) to avoid conflicts with pages and static files.

docs/advanced-features/security-headers.md

@@ -48,7 +48,7 @@ If you're deploying to [Vercel](https://vercel.com/docs/edge-network/headers#str
 ```jsx
 {
   key: 'Strict-Transport-Security',
-  value: 'max-age=31536000; includeSubDomains; preload'
+  value: 'max-age=63072000; includeSubDomains; preload'
 }
 ```
 

docs/advanced-features/static-html-export.md

@@ -17,7 +17,7 @@ The exported app supports almost every feature of Next.js, including dynamic rou
 
 `next export` works by prerendering all pages to HTML. For [dynamic routes](/docs/routing/dynamic-routes.md), your page can export a [`getStaticPaths`](/docs/basic-features/data-fetching.md#getstaticpaths-static-generation) function to let the exporter know which HTML pages to generate for that route.
 
-> `next export` is intended for scenarios where **none** of your pages have server-side or incremental data requirements (though statically-rendered pages can still [fetch data on the client side](/docs/basic-features/data-fetching.md#fetching-data-on-the-client-side) just fine).
+> `next export` is intended for scenarios where **none** of your pages have server-side or incremental data requirements (though statically-rendered pages can still [fetch data on the client side](/docs/basic-features/data-fetching.md#fetching-data-on-the-client-side)).
 >
 > If you're looking to make a hybrid site where only _some_ pages are prerendered to static HTML, Next.js already does that automatically for you! Read up on [Automatic Static Optimization](/docs/advanced-features/automatic-static-optimization.md) for details.
 >

docs/api-reference/cli.md

@@ -46,7 +46,7 @@ NODE_OPTIONS='--inspect' next
 - **Size** – The number of assets downloaded when navigating to the page client-side. The size for each route only includes its dependencies.
 - **First Load JS** – The number of assets downloaded when visiting the page from the server. The amount of JS shared by all is shown as a separate metric.
 
-The first load is colored green, yellow, or red. Aim for green for performant applications.
+The first load is indicated by green, yellow, or red. Aim for green for performant applications.
 
 You can enable production profiling for React with the `--profile` flag in `next build`. This requires [Next.js 9.5](https://nextjs.org/blog/next-9-5):
 

docs/api-reference/create-next-app.md

@@ -4,7 +4,7 @@ description: Create Next.js apps in one command with create-next-app.
 
 # Create Next App
 
-The easiest way to get started with Next.js is by using `create-next-app`. This simple CLI tool enables you to quickly start building a new Next.js application, with everything set up for you. You can create a new app using the default Next.js template, or by using one of the [official Next.js examples](https://github.com/vercel/next.js/tree/canary/examples). To get started, use the following command:
+The easiest way to get started with Next.js is by using `create-next-app`. This CLI tool enables you to quickly start building a new Next.js application, with everything set up for you. You can create a new app using the default Next.js template, or by using one of the [official Next.js examples](https://github.com/vercel/next.js/tree/canary/examples). To get started, use the following command:
 
 ```bash
 npx create-next-app