Merge branch 'canary' into patch-1

.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

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

docs/getting-started.md

@@ -29,7 +29,7 @@ yarn create next-app
 
 After the installation is complete, follow the instructions to start the development server. Try editing `pages/index.js` and see the result on your browser.
 
-For more information on how to use `create-next-app`, you can review the [`create-next-app` documentation](/docs/create-next-app.md)
+For more information on how to use `create-next-app`, you can review the [`create-next-app` documentation](/docs/api-reference/create-next-app.md)
 
 ## Manual Setup
 

docs/manifest.json

@@ -176,6 +176,10 @@
             {
               "title": "Debugging",
               "path": "/docs/advanced-features/debugging.md"
+            },
+            {
+              "title": "Codemods",
+              "path": "/docs/advanced-features/codemods.md"
             }
           ]
         },
@@ -191,6 +195,10 @@
       "heading": true,
       "routes": [
         { "title": "CLI", "path": "/docs/api-reference/cli.md" },
+        {
+          "title": "Create Next App",
+          "path": "/docs/api-reference/create-next-app.md"
+        },
         {
           "title": "next/router",
           "path": "/docs/api-reference/next/router.md"

errors/invalid-page-config.md

@@ -6,14 +6,27 @@ In one of your pages you did `export const config` with an invalid value.
 
 #### Possible Ways to Fix It
 
-The page's config must be an object initialized directly when being exported.
+The page's config must be an object initialized directly when being exported and not modified dynamically.
 
 This is not allowed
 
 ```js
 export const config = 'hello world'
 ```
 
+This is not allowed
+
+```js
+const config = {}
+config.amp = true
+```
+
+This is not allowed
+
+```js
+export { config } from '../config'
+```
+
 This is allowed
 
 ```js

examples/blog-starter-typescript/components/cover-image.tsx

@@ -18,7 +18,7 @@ const CoverImage = ({ title, src, slug }: Props) => {
     />
   )
   return (
-    <div className="-mx-5 sm:mx-0">
+    <div className="sm:mx-0">
       {slug ? (
         <Link as={`/posts/${slug}`} href="/posts/[slug]">
           <a aria-label={title}>{image}</a>

examples/blog-starter-typescript/components/post-header.tsx

@@ -18,7 +18,7 @@ const PostHeader = ({ title, coverImage, date, author }: Props) => {
       <div className="hidden md:block md:mb-12">
         <Avatar name={author.name} picture={author.picture} />
       </div>
-      <div className="mb-8 md:mb-16 -mx-5 sm:mx-0">
+      <div className="mb-8 md:mb-16 sm:mx-0">
         <CoverImage title={title} src={coverImage} />
       </div>
       <div className="max-w-2xl mx-auto">