Merge branch 'canary' into patch-3

.eslintignore

@@ -13,3 +13,5 @@ packages/next-codemod/transforms/__testfixtures__/**/*
 packages/next-codemod/transforms/__tests__/**/*
 packages/next-codemod/**/*.js
 packages/next-codemod/**/*.d.ts
+packages/next-env/**/*.d.ts
+test/integration/async-modules/**

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

@@ -1,3 +1,5 @@
+const path = require('path')
+const fs = require('fs-extra')
 const exec = require('./util/exec')
 const logger = require('./util/logger')
 const runConfigs = require('./run')
@@ -25,6 +27,13 @@ if (!allowedActions.has(actionInfo.actionName) && !actionInfo.isRelease) {
 
 ;(async () => {
   try {
+    if (await fs.pathExists(path.join(__dirname, '../SKIP_NEXT_STATS.txt'))) {
+      console.log(
+        'SKIP_NEXT_STATS.txt file present, exiting stats generation..'
+      )
+      process.exit(0)
+    }
+
     const { stdout: gitName } = await exec(
       'git config user.name && git config user.email'
     )

.github/actions/next-stats-action/src/prepare/action-info.js

@@ -56,7 +56,9 @@ module.exports = function actionInfo() {
     isLocal: LOCAL_STATS,
     commitId: null,
     issueId: ISSUE_ID,
-    isRelease: releaseTypes.has(GITHUB_ACTION),
+    isRelease:
+      GITHUB_REPOSITORY === 'vercel/next.js' &&
+      (GITHUB_REF || '').includes('canary'),
   }
 
   // get comment

.github/workflows/build_test_deploy.yml

@@ -107,12 +107,14 @@ jobs:
     steps:
       - uses: actions/checkout@v2
       - run: git fetch --depth=1 origin +refs/tags/*:refs/tags/*
-      - run: cat package.json | jq '.resolutions.webpack = "^5.0.0-beta.30"' > package.json.tmp && mv package.json.tmp package.json
-      - run: cat package.json | jq '.resolutions.react = "^17.0.0-rc.1"' > package.json.tmp && mv package.json.tmp package.json
-      - run: cat package.json | jq '.resolutions."react-dom" = "^17.0.0-rc.1"' > package.json.tmp && mv package.json.tmp package.json
+      - run: cat packages/next/package.json | jq '.resolutions.webpack = "^5.0.0-beta.30"' > package.json.tmp && mv package.json.tmp packages/next/package.json
+      - run: cat packages/next/package.json | jq '.resolutions.react = "^17.0.0-rc.1"' > package.json.tmp && mv package.json.tmp packages/next/package.json
+      - run: cat packages/next/package.json | jq '.resolutions."react-dom" = "^17.0.0-rc.1"' > package.json.tmp && mv package.json.tmp packages/next/package.json
       - run: yarn install --check-files
       - run: node run-tests.js test/integration/production/test/index.test.js
       - run: node run-tests.js test/integration/basic/test/index.test.js
+      - run: node run-tests.js test/integration/async-modules/test/index.test.js
+      - run: node run-tests.js test/integration/font-optimization/test/index.test.js
       - run: node run-tests.js test/acceptance/*
 
   testFirefox:
@@ -184,3 +186,18 @@ jobs:
           key: ${{ github.sha }}
 
       - run: ./publish-release.sh
+
+  prStats:
+    name: Release Stats
+    runs-on: ubuntu-latest
+    needs: [publishRelease]
+    steps:
+      - uses: actions/cache@v2
+        id: restore-build
+        with:
+          path: ./*
+          key: ${{ github.sha }}
+      - run: ./release-stats.sh
+      - uses: ./.github/actions/next-stats-action
+        env:
+          PR_STATS_COMMENT_TOKEN: ${{ secrets.PR_STATS_COMMENT_TOKEN }}

.prettierignore

@@ -13,3 +13,4 @@ packages/next-codemod/transforms/__testfixtures__/**/*
 packages/next-codemod/transforms/__tests__/**/*
 packages/next-codemod/**/*.js
 packages/next-codemod/**/*.d.ts
+packages/next-env/**/*.d.ts

docs/advanced-features/codemods.md

@@ -132,7 +132,7 @@ export default withRouter(
 )
 ```
 
-This is just one case. All the cases that are transformed (and tested) can be found in the [`__testfixtures__` directory](./transforms/__testfixtures__/url-to-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).
 
 #### Usage
 

docs/advanced-features/custom-app.md

@@ -44,6 +44,7 @@ The `Component` prop is the active `page`, so whenever you navigate between rout
 
 - 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.
 - 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).
+- `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).
 
 ### TypeScript
 

docs/advanced-features/custom-document.md

@@ -51,9 +51,10 @@ The `ctx` object is equivalent to the one received in [`getInitialProps`](/docs/
 
 ## Caveats
 
-- `Document` is only rendered in the server, event handlers like `onClick` won't work
-- React components outside of `<Main />` will not be initialized by the browser. Do _not_ add application logic here or custom CSS (like `styled-jsx`). If you need shared components in all your pages (like a menu or a toolbar), take a look at the [`App`](/docs/advanced-features/custom-app.md) component instead
-- `Document`'s `getInitialProps` function is not called during client-side transitions, nor when a page is [statically optimized](/docs/advanced-features/automatic-static-optimization.md)
+- `Document` is only rendered in the server, event handlers like `onClick` won't work.
+- React components outside of `<Main />` will not be initialized by the browser. Do _not_ add application logic here or custom CSS (like `styled-jsx`). If you need shared components in all your pages (like a menu or a toolbar), take a look at the [`App`](/docs/advanced-features/custom-app.md) component instead.
+- `Document`'s `getInitialProps` function is not called during client-side transitions, nor when a page is [statically optimized](/docs/advanced-features/automatic-static-optimization.md).
+- `Document` 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).
 
 ## Customizing `renderPage`
 

docs/advanced-features/preview-mode.md

@@ -39,7 +39,7 @@ First, create a **preview API route**. It can have any name - e.g. `pages/api/pr
 In this API route, you need to call `setPreviewData` on the response object. The argument for `setPreviewData` should be an object, and this can be used by `getStaticProps` (more on this later). For now, we’ll use `{}`.
 
 ```js
-export default (req, res) => {
+export default function handler(req, res) {
   // ...
   res.setPreviewData({})
   // ...
@@ -54,7 +54,7 @@ You can test this manually by creating an API route like below and accessing it
 // A simple example for testing it manually from your browser.
 // If this is located at pages/api/preview.js, then
 // open /api/preview from your browser.
-export default (req, res) => {
+export default function handler(req, res) {
   res.setPreviewData({})
   res.end('Preview mode enabled')
 }
@@ -175,7 +175,7 @@ By default, no expiration date is set for the preview mode cookies, so the previ
 To clear the preview cookies manually, you can create an API route which calls `clearPreviewData` and then access this API route.
 
 ```js
-export default (req, res) => {
+export default function handler(req, res) {
   // Clears the preview mode cookies.
   // This function accepts no arguments.
   res.clearPreviewData()

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

@@ -18,6 +18,7 @@ yarn create next-app
 
 - **-e, --example [name]|[github-url]** - An example to bootstrap the app with. You can use an example name from the [Next.js repo](https://github.com/vercel/next.js/tree/master/examples) or a GitHub URL. The URL can use any branch and/or subdirectory.
 - **--example-path [path-to-example]** - In a rare case, your GitHub URL might contain a branch name with a slash (e.g. bug/fix-1) and the path to the example (e.g. foo/bar). In this case, you must specify the path to the example separately: `--example-path foo/bar`
+- **--use-npm** - Explicitly tell the CLI to bootstrap the app using npm. Yarn will be used by default if it's installed
 
 ### Why use Create Next App?
 

docs/api-reference/next.config.js/environment-variables.md

@@ -10,7 +10,6 @@ description: Learn to add and access environment variables in your Next.js appli
   <summary><b>Examples</b></summary>
   <ul>
     <li><a href="https://github.com/vercel/next.js/tree/canary/examples/with-env-from-next-config-js">With env</a></li>
-    <li><a href="https://github.com/vercel/next.js/tree/canary/examples/with-now-env">With Now env</a></li>
   </ul>
 </details>
 

docs/api-reference/next.config.js/exportPathMap.md

@@ -13,6 +13,8 @@ description: Customize the pages that will be exported as HTML files when using
   </ul>
 </details>
 
+`exportPathMap` allows you to specify a mapping of request paths to page destinations, to be used during export.
+
 Let's start with an example, to create a custom `exportPathMap` for an app with the following pages:
 
 - `pages/index.js`

docs/api-reference/next.config.js/rewrites.md

@@ -17,6 +17,8 @@ Rewrites allow you to map an incoming request path to a different destination pa
 
 Rewrites are only available on the Node.js environment and do not affect client-side routing.
 
+Rewrites are not able to override public files or routes in the pages directory as these have higher priority than rewrites. For example, if you have `pages/index.js` you are not able to rewrite `/` to another location unless you rename the `pages/index.js` file.
+
 To use rewrites you can use the `rewrites` key in `next.config.js`:
 
 ```js

docs/api-reference/next/link.md

@@ -145,7 +145,7 @@ export default Home
 
 ## With URL Object
 
-`Link` can also receive an URL object and it will automatically format it to create the URL string. Here's how to do it:
+`Link` can also receive a URL object and it will automatically format it to create the URL string. Here's how to do it:
 
 ```jsx
 import Link from 'next/link'

docs/api-reference/next/router.md

@@ -120,7 +120,7 @@ export default function Page() {
 
 #### With URL object
 
-You can use an URL object in the same way you can use it for [`next/link`](/docs/api-reference/next/link.md#with-url-object). Works for both the `url` and `as` parameters:
+You can use a URL object in the same way you can use it for [`next/link`](/docs/api-reference/next/link.md#with-url-object). Works for both the `url` and `as` parameters:
 
 ```jsx
 import { useRouter } from 'next/router'

docs/api-routes/dynamic-api-routes.md

@@ -16,7 +16,7 @@ API routes support [dynamic routes](/docs/routing/dynamic-routes.md), and follow
 For example, the API route `pages/api/post/[pid].js` has the following code:
 
 ```js
-export default (req, res) => {
+export default function handler(req, res) {
   const {
     query: { pid },
   } = req
@@ -68,7 +68,7 @@ And in the case of `/api/post/a/b`, and any other matching path, new parameters
 An API route for `pages/api/post/[...slug].js` could look like this:
 
 ```js
-export default (req, res) => {
+export default function handler(req, res) {
   const {
     query: { slug },
   } = req

docs/api-routes/introduction.md

@@ -22,7 +22,7 @@ Any file inside the folder `pages/api` is mapped to `/api/*` and will be treated
 For example, the following API route `pages/api/user.js` handles a `json` response:
 
 ```js
-export default (req, res) => {
+export default function handler(req, res) {
   res.statusCode = 200
   res.setHeader('Content-Type', 'application/json')
   res.end(JSON.stringify({ name: 'John Doe' }))
@@ -37,7 +37,7 @@ For an API route to work, you need to export as default a function (a.k.a **requ
 To handle different HTTP methods in an API route, you can use `req.method` in your request handler, like so:
 
 ```js
-export default (req, res) => {
+export default function handler(req, res) {
   if (req.method === 'POST') {
     // Process a POST request
   } else {

docs/api-routes/response-helpers.md

@@ -15,7 +15,7 @@ description: API Routes include a set of Express.js-like methods for the respons
 The response (`res`) includes a set of Express.js-like methods to improve the developer experience and increase the speed of creating new API endpoints, take a look at the following example:
 
 ```js
-export default (req, res) => {
+export default function handler(req, res) {
   res.status(200).json({ name: 'Next.js' })
 }
 ```

docs/basic-features/built-in-css-support.md

@@ -52,7 +52,7 @@ In production, all CSS files will be automatically concatenated into a single mi
 
 ### Import styles from `node_modules`
 
-Importing a CSS file from `node_modules` is permitted in anywhere your application.
+Since Next.js **9.5.4**, importing a CSS file from `node_modules` is permitted anywhere in your application.
 
 For global stylesheets, like `bootstrap` or `nprogress`, you should import the file inside `pages/_app.js`.
 For example:

docs/basic-features/fast-refresh.md

@@ -75,7 +75,7 @@ local state being reset on every edit to a file:
 - The file you're editing might have _other_ exports in addition to a React
   component.
 - Sometimes, a file would export the result of calling higher-order component
-  like `higherOrderComponent(WrappedComponent)`. If the returned component is a
+  like `HOC(WrappedComponent)`. If the returned component is a
   class, state will be reset.
 
 As more of your codebase moves to function components and Hooks, you can expect

docs/basic-features/static-file-serving.md

@@ -16,7 +16,7 @@ function MyImage() {
 export default MyImage
 ```
 
-This folder is also useful for `robots.txt`, Google Site Verification, and any other static files (including `.html`)!
+This folder is also useful for `robots.txt`, `favicon.ico`, Google Site Verification, and any other static files (including `.html`)!
 
 > **Note**: Don't name the `public` directory anything else. The name cannot be changed and is the only directory used to serve static assets.
 

docs/basic-features/typescript.md

@@ -41,7 +41,7 @@ You're now ready to start converting files from `.js` to `.tsx` and leveraging t
 
 > A file named `next-env.d.ts` will be created in the root of your project. This file ensures Next.js types are picked up by the TypeScript compiler. **You cannot remove it**, however, you can edit it (but you don't need to).
 
-> Next.js `strict` mode is turned off by default. When you feel comfortable with TypeScript, it's recommended to turn it on in your `tsconfig.json`.
+> TypeScript `strict` mode is turned off by default. When you feel comfortable with TypeScript, it's recommended to turn it on in your `tsconfig.json`.
 
 By default, Next.js will do type checking as part of `next build`. We recommend using code editor type checking during development.
 

docs/manifest.json

@@ -187,6 +187,15 @@
           "title": "Upgrade Guide",
           "path": "/docs/upgrading.md"
         },
+        {
+          "title": "Migrating to Next.js",
+          "routes": [
+            {
+              "title": "Migrating from Gatsby",
+              "path": "/docs/migrating/from-gatsby.md"
+            }
+          ]
+        },
         { "title": "FAQ", "path": "/docs/faq.md" }
       ]
     },