Merge branch 'canary' into kontent-example-isolated

.eslintignore

@@ -8,4 +8,8 @@ packages/next/compiled/**/*
 packages/react-refresh-utils/**/*.js
 packages/react-dev-overlay/lib/**
 **/__tmp__/**
-.github/actions/next-stats-action/.work
+.github/actions/next-stats-action/.work
+packages/next-codemod/transforms/__testfixtures__/**/*
+packages/next-codemod/transforms/__tests__/**/*
+packages/next-codemod/**/*.js
+packages/next-codemod/**/*.d.ts

.github/labeler.json

@@ -6,7 +6,8 @@
     "type: next": [
       "packages/next/**",
       "packages/react-dev-overlay/**",
-      "packages/react-refresh-utils/**"
+      "packages/react-refresh-utils/**",
+      "packages/next-codemod/**"
     ]
   }
 }

.github/workflows/build_test_deploy.yml

@@ -70,10 +70,29 @@ jobs:
 
       - run: node run-tests.js --timings -g ${{ matrix.group }}/6 -c 3
 
+  testYarnPnP:
+    runs-on: ubuntu-latest
+    env:
+      NODE_OPTIONS: '--unhandled-rejections=strict'
+    steps:
+      - uses: actions/checkout@v2
+
+      - run: yarn install --frozen-lockfile --check-files
+
+      - run: |
+          mkdir -p ./e2e-tests/next-pnp
+          cp -r ./examples/with-typescript/. ./e2e-tests/next-pnp
+          cd ./e2e-tests/next-pnp
+          touch yarn.lock
+          yarn set version berry
+          yarn config set pnpFallbackMode none
+          yarn link --all --private ../..
+          yarn build
+
   testsPass:
     name: thank you, next
     runs-on: ubuntu-latest
-    needs: [lint, checkPrecompiled, testAll]
+    needs: [lint, checkPrecompiled, testAll, testYarnPnP]
     steps:
       - run: exit 0
 

.gitignore

@@ -21,6 +21,7 @@ coverage
 test/**/out*
 test/**/next-env.d.ts
 .DS_Store
+/e2e-tests
 
 # Editors
 **/.idea

.prettierignore

@@ -8,4 +8,8 @@ packages/react-refresh-utils/**/*.d.ts
 packages/react-dev-overlay/lib/**
 **/__tmp__/**
 lerna.json
-.github/actions/next-stats-action/.work
+.github/actions/next-stats-action/.work
+packages/next-codemod/transforms/__testfixtures__/**/*
+packages/next-codemod/transforms/__tests__/**/*
+packages/next-codemod/**/*.js
+packages/next-codemod/**/*.d.ts

.prettierignore_staged

@@ -3,3 +3,5 @@
 **/dist/**
 packages/next/compiled/**/*
 lerna.json
+packages/next-codemod/transforms/__testfixtures__/**/*
+packages/next-codemod/transforms/__tests__/**/*

docs/advanced-features/codemods.md

@@ -0,0 +1,149 @@
+---
+description: Use codemods to update your codebase when upgrading Next.js to the latest version
+---
+
+# Next.js Codemods
+
+Next.js provides Codemod transformations to help upgrade your Next.js codebase when a feature is deprecated.
+
+Codemods are transformations that run on your codebase programmatically. This allows for a large amount of changes to be applied without having to manually go through every file.
+
+## Usage
+
+`npx @next/codemod <transform> <path>`
+
+- `transform` - name of transform, see available transforms below.
+- `path` - files or directory to transform
+- `--dry` Do a dry-run, no code will be edited
+- `--print` Prints the changed output for comparison
+
+## 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
+
+```jsx
+// my-component.js
+export default function () {
+  return <div>Hello World</div>
+}
+```
+
+Transforms into:
+
+```jsx
+// my-component.js
+export default function MyComponent() {
+  return <div>Hello World</div>
+}
+```
+
+The component will have a camel cased name based on the name of the file, and it also works with arrow functions.
+
+#### Usage
+
+Go to your project
+
+```
+cd path-to-your-project/
+```
+
+Run the codemod:
+
+```
+npx @next/codemod name-default-component
+```
+
+### `withamp-to-config`
+
+Transforms the `withAmp` HOC into Next.js 9 page configuration.
+
+For example:
+
+```js
+// Before
+import { withAmp } from 'next/amp'
+
+function Home() {
+  return <h1>My AMP Page</h1>
+}
+
+export default withAmp(Home)
+```
+
+```js
+// After
+export default function Home() {
+  return <h1>My AMP Page</h1>
+}
+
+export const config = {
+  amp: true,
+}
+```
+
+#### Usage
+
+Go to your project
+
+```
+cd path-to-your-project/
+```
+
+Run the codemod:
+
+```
+npx @next/codemod withamp-to-config
+```
+
+## Next.js 6
+
+### `url-to-withrouter`
+
+Transforms the deprecated automatically injected `url` property on top level pages to using `withRouter` and the `router` property it injects. Read more here: [err.sh/next.js/url-deprecated](https://err.sh/next.js/url-deprecated)
+
+For example:
+
+```js
+// From
+import React from 'react'
+export default class extends React.Component {
+  render() {
+    const { pathname } = this.props.url
+    return <div>Current pathname: {pathname}</div>
+  }
+}
+```
+
+```js
+// To
+import React from 'react'
+import { withRouter } from 'next/router'
+export default withRouter(
+  class extends React.Component {
+    render() {
+      const { pathname } = this.props.router
+      return <div>Current pathname: {pathname}</div>
+    }
+  }
+)
+```
+
+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).
+
+#### Usage
+
+Go to your project
+
+```
+cd path-to-your-project/
+```
+
+Run the codemod:
+
+```
+npx @next/codemod url-to-withrouter
+```

docs/advanced-features/module-path-aliases.md

@@ -4,7 +4,7 @@ description: Configure module path aliases that allow you to remap certain impor
 
 # Absolute Imports and Module path aliases
 
-Next.js automatically supports the `tsconfig.json` and `jsconfig.json` `"paths"` and `"baseUrl"` options.
+Next.js automatically supports the `tsconfig.json` and `jsconfig.json` `"paths"` and `"baseUrl"` options since [Next.js 9.4](https://nextjs.org/blog/next-9-4).
 
 > Note: `jsconfig.json` can be used when you don't use TypeScript
 

docs/advanced-features/preview-mode.md

@@ -28,7 +28,7 @@ In the [Pages documentation](/docs/basic-features/pages.md) and the [Data Fetchi
 
 Static Generation is useful when your pages fetch data from a headless CMS. However, it’s not ideal when you’re writing a draft on your headless CMS and want to **preview** the draft immediately on your page. You’d want Next.js to render these pages at **request time** instead of build time and fetch the draft content instead of the published content. You’d want Next.js to bypass Static Generation only for this specific case.
 
-Next.js has the feature called **Preview Mode** which solves this problem. Here’s an instruction on how to use it.
+Next.js has a feature called **Preview Mode** which solves this problem. Here are instructions on how to use it.
 
 ## Step 1. Create and access a preview API route
 

docs/api-reference/cli.md

@@ -56,6 +56,14 @@ next build --profile
 
 After that, you can use the profiler in the same way as you would in development.
 
+You can enable more verbose build output with the `--debug` flag in `next build`. This requires Next.js 9.5.3:
+
+```bash
+next build --debug
+```
+
+With this flag enabled additional build output like rewrites, redirects, and headers will be shown.
+
 ## Development
 
 `next dev` starts the application in development mode with hot-code reloading, error reporting, and more:

docs/api-reference/data-fetching/getInitialProps.md

@@ -71,8 +71,8 @@ For the initial page load, `getInitialProps` will run on the server only. `getIn
 - `pathname` - Current route. That is the path of the page in `/pages`
 - `query` - Query string section of URL parsed as an object
 - `asPath` - `String` of the actual path (including the query) shown in the browser
-- `req` - HTTP request object (server only)
-- `res` - HTTP response object (server only)
+- `req` - [HTTP request object](https://nodejs.org/api/http.html#http_class_http_incomingmessage 'Class: http.IncomingMessage HTTP | Node.js v14.8.0 Documentation') (server only)
+- `res` - [HTTP response object](https://nodejs.org/api/http.html#http_class_http_serverresponse 'Class: http.ServerResponse HTTP | Node.js v14.8.0 Documentation') (server only)
 - `err` - Error object if any error is encountered during the rendering
 
 ## Caveats

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

@@ -27,7 +27,6 @@ module.exports = {
           },
         ],
       },
-      ,
     ]
   },
 }
@@ -38,6 +37,37 @@ module.exports = {
 - `source` is the incoming request path pattern.
 - `headers` is an array of header objects with the `key` and `value` properties.
 
+## Header Overriding Behavior
+
+If two headers match the same path and set the same header key, the last header key will override the first. Using the below headers, the path `/hello` will result in the header `x-hello` being `world` due to the last header value set being `world`.
+
+```js
+module.exports = {
+  async headers() {
+    return [
+      {
+        source: '/:path*',
+        headers: [
+          {
+            key: 'x-hello',
+            value: 'there',
+          },
+        ],
+      },
+      {
+        source: '/hello',
+        headers: [
+          {
+            key: 'x-hello',
+            value: 'world',
+          },
+        ],
+      },
+    ],
+  },
+}
+```
+
 ## Path Matching
 
 Path matches are allowed, for example `/blog/:slug` will match `/blog/hello-world` (no nested paths):
@@ -59,8 +89,7 @@ module.exports = {
           },
         ],
       },
-      ,
-    ]
+    ],
   },
 }
 ```
@@ -86,8 +115,7 @@ module.exports = {
           },
         ],
       },
-      ,
-    ]
+    ],
   },
 }
 ```
@@ -109,7 +137,7 @@ module.exports = {
           },
         ],
       },
-    ]
+    ],
   },
 }
 ```

docs/basic-features/data-fetching.md

@@ -60,7 +60,17 @@ The `context` parameter is an object containing the following keys:
 - `revalidate` - An **optional** amount in seconds after which a page re-generation can occur. More on [Incremental Static Regeneration](#incremental-static-regeneration)
 
 > **Note**: You can import modules in top-level scope for use in `getStaticProps`.
-> Imports used in `getStaticProps` will not be bundled for the client-side, as [explained below](#write-server-side-code-directly).
+> Imports used in `getStaticProps` will [not be bundled for the client-side](#write-server-side-code-directly).
+>
+> This means you can write **server-side code directly in `getStaticProps`**.
+> This includes reading from the filesystem or a database.
+
+> **Note**: You should not use [`fetch()`](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) to
+> call an API route in your application.
+> Instead, directly import the API route and call its function yourself.
+> You may need to slightly refactor your code for this approach.
+>
+> Fetching from an external API is fine!
 
 ### Simple Example
 
@@ -534,7 +544,17 @@ The `context` parameter is an object containing the following keys:
 - `previewData`: The preview data set by `setPreviewData`. See the [Preview Mode documentation](/docs/advanced-features/preview-mode.md).
 
 > **Note**: You can import modules in top-level scope for use in `getServerSideProps`.
-> Imports used in `getServerSideProps` will not be bundled for the client-side, as [explained below](#only-runs-on-server-side).
+> Imports used in `getServerSideProps` will not be bundled for the client-side.
+>
+> This means you can write **server-side code directly in `getServerSideProps`**.
+> This includes reading from the filesystem or a database.
+
+> **Note**: You should not use [`fetch()`](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) to
+> call an API route in your application.
+> Instead, directly import the API route and call its function yourself.
+> You may need to slightly refactor your code for this approach.
+>
+> Fetching from an external API is fine!
 
 ### Simple example
 

docs/basic-features/fast-refresh.md

@@ -107,6 +107,6 @@ Sometimes, this can lead to unexpected results. For example, even a `useEffect`
 with an empty array of dependencies would still re-run once during Fast Refresh.
 
 However, writing code resilient to occasional re-running of `useEffect` is a good practice even
-without Fash Refresh. It will make it easier for you to introduce new dependencies to it later on
+without Fast Refresh. It will make it easier for you to introduce new dependencies to it later on
 and it's enforced by [React Strict Mode](/docs/api-reference/next.config.js/react-strict-mode),
 which we highly recommend enabling.