Merge branch 'canary' into patch-1

.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/**"
     ]
   }
 }

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

@@ -26,7 +26,7 @@ description: 'Next.js has 2 pre-rendering modes: Static Generation and Server-si
   </ul>
 </details>
 
-In the [Pages documentation](/docs/basic-features/pages.md), we’ve explained that Next.js has two forms of pre-rendering: **Static Generation** and **Server-side Rendering**. In this page, we’ll talk in depths about data fetching strategies for each case. We recommend you to [read through the Pages documentation](/docs/basic-features/pages.md) first if you haven’t done so.
+In the [Pages documentation](/docs/basic-features/pages.md), we’ve explained that Next.js has two forms of pre-rendering: **Static Generation** and **Server-side Rendering**. In this page, we’ll talk in depth about data fetching strategies for each case. We recommend you to [read through the Pages documentation](/docs/basic-features/pages.md) first if you haven’t done so.
 
 We’ll talk about the three unique Next.js functions you can use to fetch data for pre-rendering:
 
@@ -104,7 +104,7 @@ export default Blog
 You should use `getStaticProps` if:
 
 - The data required to render the page is available at build time ahead of a user’s request.
-- The data comes from headless CMS.
+- The data comes from a headless CMS.
 - The data can be publicly cached (not user-specific).
 - The page must be pre-rendered (for SEO) and be very fast — `getStaticProps` generates HTML and JSON files, both of which can be cached by a CDN for performance.
 
@@ -159,7 +159,7 @@ export default Blog
   </ul>
 </details>
 
-With [`getStaticProps`](#getstaticprops-static-generation) you don't have to stop relying in dynamic content, as **static content can also be dynamic**. Incremental Static Regeneration allows you to update _existing_ pages by re-rendering them in the background as traffic comes in.
+With [`getStaticProps`](#getstaticprops-static-generation) you don't have to stop relying on dynamic content, as **static content can also be dynamic**. Incremental Static Regeneration allows you to update _existing_ pages by re-rendering them in the background as traffic comes in.
 
 Inspired by [stale-while-revalidate](https://tools.ietf.org/html/rfc5861), background regeneration ensures traffic is served uninterruptedly, always from static storage, and the newly built page is pushed only after it's done generating.
 
@@ -341,7 +341,7 @@ Note that the value for each `params` must match the parameters used in the page
 
 - If the page name is `pages/posts/[postId]/[commentId]`, then `params` should contain `postId` and `commentId`.
 - If the page name uses catch-all routes, for example `pages/[...slug]`, then `params` should contain `slug` which is an array. For example, if this array is `['foo', 'bar']`, then Next.js will statically generate the page at `/foo/bar`.
-- If the page uses an optional catch-all route, supply `null`, `[]`, `undefined` or `false` to render the rootmost route. For example, if you supply `slug: false` for `pages/[[...slug]]`, Next.js will statically generate the page `/`.
+- If the page uses an optional catch-all route, supply `null`, `[]`, `undefined` or `false` to render the root-most route. For example, if you supply `slug: false` for `pages/[[...slug]]`, Next.js will statically generate the page `/`.
 
 #### The `fallback` key (required)
 
@@ -605,7 +605,7 @@ export default Page
 
 #### Only runs on server-side
 
-`getServerSideProps` only runs on server-side and never runs on the browser. If a page uses `getServerSideProps` , then:
+`getServerSideProps` only runs on server-side and never runs on the browser. If a page uses `getServerSideProps`, then:
 
 - When you request this page directly, `getServerSideProps` runs at the request time, and this page will be pre-rendered with the returned props.
 - When you request this page on client-side page transitions through `next/link` ([documentation](/docs/api-reference/next/link.md)) or `next/router` ([documentation](/docs/api-reference/next/router.md)), Next.js sends an API request to the server, which runs `getServerSideProps`. It’ll return JSON that contains the result of running `getServerSideProps`, and the JSON will be used to render the page. All this work will be handled automatically by Next.js, so you don’t need to do anything extra as long as you have `getServerSideProps` defined.

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"

examples/custom-server-hapi/next-wrapper.js

@@ -10,7 +10,7 @@ const pathWrapper = (app, pathName, opts) => async (
   { raw, query, params },
   h
 ) => {
-  const html = await app.renderToHTML(
+  const html = await app.render(
     raw.req,
     raw.res,
     pathName,

examples/data-fetch/README.md

@@ -3,7 +3,7 @@
 Next.js was conceived to make it easy to create universal apps. That's why fetching data
 on the server and the client when necessary is so easy with Next.
 
-Using `getStaticProps` fetches data at built time from a page, Next.js will pre-render this page at build time.
+Using `getStaticProps` fetches data at build time from a page, Next.js will pre-render this page at build time.
 
 ## Deploy your own
 

examples/ssr-caching/server.js

@@ -11,7 +11,7 @@ const handle = app.getRequestHandler()
 const ssrCache = cacheableResponse({
   ttl: 1000 * 60 * 60, // 1hour
   get: async ({ req, res }) => {
-    const data = await app.renderToHTML(req, res, req.path, {
+    const data = await app.render(req, res, req.path, {
       ...req.query,
       ...req.params,
     })

examples/with-filbert/.babelrc

@@ -0,0 +1,4 @@
+{
+    "presets": ["next/babel"],
+    "plugins": ["macros"]
+  }

examples/with-filbert/package.json

@@ -12,8 +12,9 @@
   "author": "Kuldeep Keshwar",
   "license": "ISC",
   "dependencies": {
-    "@filbert-js/core": "^0.0.4",
-    "@filbert-js/server-stylesheet": "^0.0.4",
+    "@filbert-js/core": "latest",
+    "@filbert-js/macro": "latest",
+    "@filbert-js/server-stylesheet": "latest",
     "next": "latest",
     "react": "^16.7.0",
     "react-dom": "^16.7.0"