Merge branch 'canary' into fix-tsconfig-extends

.eslintignore

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

.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

@@ -96,8 +96,8 @@ jobs:
     steps:
       - run: exit 0
 
-  testWebpack5:
-    name: webpack 5 (Basic, Production, Acceptance)
+  testFutureDependencies:
+    name: React 17 + webpack 5 (Basic, Production, Acceptance)
     runs-on: ubuntu-latest
     env:
       NEXT_TELEMETRY_DISABLED: 1
@@ -107,7 +107,9 @@ 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.22"' > package.json.tmp && mv package.json.tmp package.json
+      - 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: 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
@@ -182,3 +184,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

check-examples.sh

@@ -0,0 +1,16 @@
+#!/bin/bash
+
+cd `dirname $0`
+
+for folder in examples/* ; do
+  cp -n packages/create-next-app/templates/default/gitignore $folder/.gitignore;
+  if [ -f "$folder/package.json" ]; then
+    cat $folder/package.json | jq '.license = "MIT"' | sponge $folder/package.json
+  fi
+done;
+
+if [[ ! -z $(git status -s) ]];then
+  echo "Detected changes"
+  git status
+  exit 1
+fi

contributing.md

@@ -138,8 +138,6 @@ Deploy the example using [Vercel](https://vercel.com/now):
 
 ## How to use
 
-### Using `create-next-app`
-
 Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example:
 
 ```bash
@@ -148,24 +146,5 @@ npx create-next-app --example DIRECTORY_NAME DIRECTORY_NAME-app
 yarn create next-app --example DIRECTORY_NAME DIRECTORY_NAME-app
 ```
 
-### Download manually
-
-Download the example:
-
-```bash
-curl https://codeload.github.com/vercel/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/DIRECTORY_NAME
-cd DIRECTORY_NAME
-```
-
-Install it and run:
-
-```bash
-npm install
-npm run dev
-# or
-yarn
-yarn dev
-```
-
 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)).
 ````

docs/advanced-features/amp-support/amp-in-static-html-export.md

@@ -27,7 +27,7 @@ And the AMP version of your page will include a link to the HTML page:
 <link rel="canonical" href="/about" />
 ```
 
-When [`exportTrailingSlash`](/docs/api-reference/next.config.js/exportPathMap.md#0cf7d6666b394c5d8d08a16a933e86ea) is enabled the exported pages for `pages/about.js` would be:
+When [`trailingSlash`](/docs/api-reference/next.config.js/trailing-slash.md) is enabled the exported pages for `pages/about.js` would be:
 
 - `out/about/index.html` - HTML page
 - `out/about.amp/index.html` - AMP page

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/customizing-babel-config.md

@@ -26,7 +26,16 @@ Here's an example `.babelrc` file:
 
 You can [take a look at this file](https://github.com/vercel/next.js/blob/canary/packages/next/build/babel/preset.ts) to learn about the presets included by `next/babel`.
 
-To configure these presets/plugins, **do not** add them to `presets` or `plugins` in your custom `.babelrc`. Instead, configure them on the `next/babel` preset, like so:
+To add presets/plugins **without configuring them**, you can do it this way:
+
+```json
+{
+  "presets": ["next/babel"],
+  "plugins": ["@babel/plugin-proposal-do-expressions"]
+}
+```
+
+To add presets/plugins **with custom configuration**, do it on the `next/babel` preset like so:
 
 ```json
 {

docs/advanced-features/customizing-postcss-config.md

@@ -26,13 +26,48 @@ Out of the box, with no configuration, Next.js compiles CSS with the following t
    - [Gap Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/gap)
    - [Media Query Ranges](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#Syntax_improvements_in_Level_4)
 
-By default, [Custom Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/var) (CSS variables) are **not compiled** for IE11 support.
+By default, [CSS Grid](https://www.w3.org/TR/css-grid-1/) and [Custom Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/var) (CSS variables) are **not compiled** for IE11 support.
+
+To compile [CSS Grid Layout](https://developer.mozilla.org/en-US/docs/Web/CSS/grid) for IE11, you can place the following comment at the top of your CSS file:
+
+```css
+/* autoprefixer grid: autoplace */
+```
+
+You can also enable IE11 support for [CSS Grid Layout](https://developer.mozilla.org/en-US/docs/Web/CSS/grid)
+in your entire project by configuring autoprefixer with the configuration shown below (collapsed).
+See ["Customizing Plugins"](#customizing-plugins) below for more information.
+
+<details>
+<summary><strong>Click to view the configuration to enable CSS Grid Layout</strong></summary>
+
+```json
+{
+  "plugins": [
+    "postcss-flexbugs-fixes",
+    [
+      "postcss-preset-env",
+      {
+        "autoprefixer": {
+          "flexbox": "no-2009",
+          "grid": "autoplace"
+        },
+        "stage": 3,
+        "features": {
+          "custom-properties": false
+        }
+      }
+    ]
+  ]
+}
+```
+
+</details>
+<br/>
 
 CSS variables are not compiled because it is [not possible to safely do so](https://github.com/MadLittleMods/postcss-css-variables#caveats).
 If you must use variables, consider using something like [Sass variables](https://sass-lang.com/documentation/variables) which are compiled away by [Sass](https://sass-lang.com/).
 
-> **Note**: To support [Grid Layout](https://developer.mozilla.org/en-US/docs/Web/CSS/grid), you need to enable `grid: "autoplace"` for Autoprefixer. See ["Customizing Plugins"](#customizing-plugins) below.
-
 ## Customizing Target Browsers
 
 Next.js allows you to configure the target browsers (for [Autoprefixer](https://github.com/postcss/autoprefixer) and compiled css features) through [Browserslist](https://github.com/browserslist/browserslist).

docs/advanced-features/dynamic-import.md

@@ -4,17 +4,49 @@ description: Dynamically import JavaScript modules and React Components and spli
 
 # Dynamic Import
 
-<details>
+<details open>
   <summary><b>Examples</b></summary>
   <ul>
     <li><a href="https://github.com/vercel/next.js/tree/canary/examples/with-dynamic-import">Dynamic Import</a></li>
   </ul>
 </details>
 
-Next.js supports ES2020 [dynamic `import()`](https://github.com/tc39/proposal-dynamic-import) for JavaScript. With it you can import JavaScript modules (inc. React Components) dynamically and work with them. They also work with SSR.
+Next.js supports ES2020 [dynamic `import()`](https://github.com/tc39/proposal-dynamic-import) for JavaScript. With it you can import JavaScript modules dynamically and work with them. They also work with SSR.
+
+In the following example, we implement fuzzy search using `fuse.js` and only load the module dynamically in the browser after the user types in the search input:
+
+```jsx
+import { useState } from 'react'
+
+const names = ['Tim', 'Joe', 'Bel', 'Max', 'Lee']
+
+export default function Page() {
+  const [results, setResults] = useState()
+
+  return (
+    <div>
+      <input
+        type="text"
+        placeholder="Search"
+        onChange={async (e) => {
+          const { value } = e.currentTarget
+          // Dynamically load fuse.js
+          const Fuse = (await import('fuse.js')).default
+          const fuse = new Fuse(names)
+
+          setResults(fuse.search(value))
+        }}
+      />
+      <pre>Results: {JSON.stringify(results, null, 2)}</pre>
+    </div>
+  )
+}
+```
 
 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.
+
 ## Basic usage
 
 In the following example, the module `../components/hello` will be dynamically loaded by the page:

docs/advanced-features/measuring-performance.md

@@ -158,13 +158,14 @@ export function reportWebVitals(metric) {
 >
 > ```js
 > export function reportWebVitals({ id, name, label, value }) {
->   ga('send', 'event', {
->     eventCategory:
+>   // Use `window.gtag` if you initialized Google Analytics as this example:
+>   // https://github.com/vercel/next.js/blob/canary/examples/with-google-analytics/pages/_document.js
+>   window.gtag('event', name, {
+>     event_category:
 >       label === 'web-vital' ? 'Web Vitals' : 'Next.js custom metric',
->     eventAction: name,
->     eventValue: Math.round(name === 'CLS' ? value * 1000 : value), // values must be integers
->     eventLabel: id, // id unique to current page load
->     nonInteraction: true, // avoids affecting bounce rate.
+>     value: Math.round(name === 'CLS' ? value * 1000 : value), // values must be integers
+>     event_label: id, // id unique to current page load
+>     non_interaction: true, // avoids affecting bounce rate.
 >   })
 > }
 > ```

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()
@@ -203,6 +203,18 @@ You can pass an object to `setPreviewData` and have it be available in `getStati
 
 The preview mode works on `getServerSideProps` as well. It will also be available on the `context` object containing `preview` and `previewData`.
 
+### Works with API Routes
+
+API Routes will have access to `preview` and `previewData` under the request object. For example:
+
+```js
+export default function myApiRoute(req, res) {
+  const isPreview = req.preview
+  const previewData = req.previewData
+  // ...
+}
+```
+
 ### Unique per `next build`
 
 Both the bypass cookie value and the private key for encrypting the `previewData` change when `next build` is completed.

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

@@ -6,11 +6,9 @@ description: Learn more about setting a base path in Next.js
 
 > This feature was introduced in [Next.js 9.5](https://nextjs.org/blog/next-9-5) and up. If you’re using older versions of Next.js, please upgrade before trying it out.
 
-To deploy a Next.js application under a sub-path of a domain you can use the `basePath` option.
+To deploy a Next.js application under a sub-path of a domain you can use the `basePath` config option.
 
-`basePath` allows you to set a path prefix for the application. For example `/docs` instead of `/` (the default).
-
-For example, to set the base path to `/docs`, set the following configuration in `next.config.js`:
+`basePath` allows you to set a path prefix for the application. For example, to use `/docs` instead of `/` (the default), open `next.config.js` and add the `basePath` config:
 
 ```js
 module.exports = {