Merge branch 'canary' into webpack-tracing

.github/workflows/build_test_deploy.yml

@@ -15,6 +15,9 @@ jobs:
       docsChange: ${{ steps.docs-change.outputs.DOCS_CHANGE }}
     steps:
       - uses: actions/checkout@v2
+        with:
+          fetch-depth: 25
+
       - run: git fetch --depth=1 origin +refs/tags/*:refs/tags/*
       - run: yarn install --frozen-lockfile --check-files
       - run: node run-tests.js --timings --write-timings -g 1/1
@@ -136,6 +139,8 @@ jobs:
       YARN_COMPRESSION_LEVEL: '0'
     steps:
       - uses: actions/checkout@v2
+        with:
+          fetch-depth: 25
 
       - run: echo ::set-output name=DOCS_CHANGE::$(node skip-docs-change.js echo 'not-docs-only-change')
         id: docs-change
@@ -164,6 +169,8 @@ jobs:
 
     steps:
       - uses: actions/checkout@v2
+        with:
+          fetch-depth: 25
 
       - run: echo ::set-output name=DOCS_CHANGE::$(node skip-docs-change.js echo 'not-docs-only-change')
         id: docs-change
@@ -187,6 +194,8 @@ jobs:
 
     steps:
       - uses: actions/checkout@v2
+        with:
+          fetch-depth: 25
 
       - run: echo ::set-output name=DOCS_CHANGE::$(node skip-docs-change.js echo 'not-docs-only-change')
         id: docs-change

.github/workflows/cancel.yml

@@ -1,10 +1,6 @@
 name: Cancel
 on:
   pull_request_target:
-    branches-ignore:
-      # don't run cancel job for branches named canary until
-      # it no longer cancels the main canary branches jobs
-      - canary
     types:
       - edited
       - synchronize

.github/workflows/pull_request_stats.yml

@@ -10,6 +10,9 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
+        with:
+          fetch-depth: 25
+
       - run: echo ::set-output name=DOCS_CHANGE::$(node skip-docs-change.js echo 'not-docs-only-change')
         id: docs-change
       - uses: ./.github/actions/next-stats-action

contributing.md

@@ -132,7 +132,7 @@ Description
 
 ## Deploy your own
 
-Deploy the example using [Vercel](https://vercel.com/now):
+Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
 
 [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/DIRECTORY_NAME&project-name=DIRECTORY_NAME&repository-name=DIRECTORY_NAME)
 

docs/advanced-features/preview-mode.md

@@ -21,6 +21,7 @@ description: Next.js has the preview mode for statically generated pages. You ca
     <li><a href="https://github.com/vercel/next.js/tree/canary/examples/cms-buttercms">ButterCMS Example</a> (<a href="https://next-blog-buttercms.now.sh/">Demo</a>)</li>
     <li><a href="https://github.com/vercel/next.js/tree/canary/examples/cms-storyblok">Storyblok Example</a> (<a href="https://next-blog-storyblok.now.sh/">Demo</a>)</li>
     <li><a href="https://github.com/vercel/next.js/tree/canary/examples/cms-graphcms">GraphCMS Example</a> (<a href="https://next-blog-graphcms.now.sh/">Demo</a>)</li>
+    <li><a href="https://github.com/vercel/next.js/tree/canary/examples/cms-kontent">Kontent Example</a> (<a href="https://next-blog-kontent.vercel.app//">Demo</a>)</li>
   </ul>
 </details>
 

docs/api-reference/next.config.js/custom-page-extensions.md

@@ -14,6 +14,8 @@ module.exports = {
 }
 ```
 
+> **Note**: configuring `pageExtensions` also affects `_document.js`, `_app.js` as well as files under `pages/api/`. For example, setting `pageExtensions: ['page.tsx', 'page.ts']` means the following files: `_document.tsx`, `_app.tsx`, `pages/users.tsx` and `pages/api/users.ts` will have to be renamed to `_document.page.tsx`, `_app.page.tsx`, `pages/users.page.tsx` and `pages/api/users.page.ts` respectively.
+
 ## Related
 
 <div class="card">

docs/api-routes/introduction.md

@@ -19,13 +19,11 @@ API routes provide a straightforward solution to build your **API** with Next.js
 
 Any file inside the folder `pages/api` is mapped to `/api/*` and will be treated as an API endpoint instead of a `page`. They are server-side only bundles and won't increase your client-side bundle size.
 
-For example, the following API route `pages/api/user.js` handles a `json` response:
+For example, the following API route `pages/api/user.js` returns a `json` response with a status code of `200`:
 
 ```js
 export default function handler(req, res) {
-  res.statusCode = 200
-  res.setHeader('Content-Type', 'application/json')
-  res.end(JSON.stringify({ name: 'John Doe' }))
+  res.status(200).json({ name: 'John Doe' }))
 }
 ```
 

errors/no-router-instance.md

@@ -2,8 +2,12 @@
 
 #### Why This Error Occurred
 
-During SSR you might have tried to access a router method `push`, `replace`, `back`, which is not supported.
+During Pre-rendering (SSR or SSG) you tried to access a router method `push`, `replace`, `back`, which is not supported.
 
 #### Possible Ways to Fix It
 
-Move any calls to router methods to `componentDidMount` or add a check such as `typeof window !== 'undefined'` before calling the methods
+In a function Component you can move the code into the `useEffect` hook.
+
+In a class Component, move any calls to router methods to the `componentDidMount` lifecycle method.
+
+This way the calls to the router methods are only executed in the browser.

examples/custom-server-express/README.md

@@ -1,10 +1,10 @@
 # Custom Express Server example
 
-Most of the times the default Next server will be enough but sometimes you want to run your own server to customize routes or other kind of the app behavior. Next provides a [Custom server and routing](https://github.com/vercel/next.js#custom-server-and-routing) so you can customize as much as you want.
+Most of the time the default Next.js server will be enough but there are times you'll want to run your own server to customize routes or other kinds of app behavior. Next.js provides [Custom server and routing](https://github.com/vercel/next.js#custom-server-and-routing) options, so you can customize as much as you want.
 
-Because the Next.js server is just a node.js module you can combine it with any other part of the node.js ecosystem. in this case we are using express to build a custom router on top of Next.
+Because the Next.js server is just a node.js module you can combine it with any other part of the node.js ecosystem. In this case we are using express to build a custom router on top of Next.
 
-The example shows a server that serves the component living in `pages/a.js` when the route `/b` is requested and `pages/b.js` when the route `/a` is accessed. This is obviously a non-standard routing strategy. You can see how this custom routing is being made inside `server.js`.
+This example demonstrates a server that serves the component living in `pages/a.js` when the route `/b` is requested and `pages/b.js` when the route `/a` is accessed. This is obviously a non-standard routing strategy. You can see how this custom routing is being made inside `server.js`.
 
 ## How to use
 

examples/progressive-web-app/pages/api/hello.js

@@ -1,8 +1,7 @@
 // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
 
 const hello = (req, res) => {
-  res.statusCode = 200
-  res.json({ name: 'John Doe' })
+  res.status(200).json({ name: 'John Doe' })
 }
 
 export default hello

examples/with-goober/README.md

@@ -10,7 +10,7 @@ Goober initially started with a slogan as "a less than 1KB css-in-js library at
 
 ## Deploy your own
 
-Deploy the example using [Vercel](https://vercel.com/now):
+Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
 
 [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-goober&project-name=with-goober&repository-name=with-goober)
 

examples/with-gsap/pages/api/hello.js

@@ -1,6 +1,5 @@
 // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
 
 export default function handler(req, res) {
-  res.statusCode = 200
-  res.json({ name: 'John Doe' })
+  res.status(200).json({ name: 'John Doe' })
 }

examples/with-hls-js/README.md

@@ -4,7 +4,7 @@ This example shows how to use Next.js along with [HLS.js](https://github.com/vid
 
 ## Deploy your own
 
-Deploy the example using [Vercel](https://vercel.com/now):
+Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
 
 [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-hls-js&project-name=with-hls-js&repository-name=with-hls-js)
 

examples/with-mux-video/pages/api/asset/[id].js

@@ -17,9 +17,8 @@ export default async function assetHandler(req, res) {
           },
         })
       } catch (e) {
-        res.statusCode = 500
         console.error('Request error', e)
-        res.json({ error: 'Error getting upload/asset' })
+        res.status(500).json({ error: 'Error getting upload/asset' })
       }
       break
     default:

examples/with-mux-video/pages/api/upload.js

@@ -16,9 +16,8 @@ export default async function uploadHandler(req, res) {
           url: upload.url,
         })
       } catch (e) {
-        res.statusCode = 500
         console.error('Request error', e)
-        res.json({ error: 'Error creating upload' })
+        res.status(500).json({ error: 'Error creating upload' })
       }
       break
     default:

examples/with-mux-video/pages/api/upload/[id].js

@@ -16,9 +16,8 @@ export default async function uploadHandler(req, res) {
           },
         })
       } catch (e) {
-        res.statusCode = 500
         console.error('Request error', e)
-        res.json({ error: 'Error getting upload/asset' })
+        res.status(500).json({ error: 'Error getting upload/asset' })
       }
       break
     default:

examples/with-react-md-typescript/README.md

@@ -19,7 +19,7 @@ for a more complex example of using ReactMD + Next.js.
 
 ## Deploy your own
 
-Deploy the example using [Vercel](https://vercel.com/now):
+Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
 
 [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-react-md-typescript&project-name=with-react-md-typescript&repository-name=with-react-md-typescript)
 

examples/with-react-md/README.md

@@ -20,7 +20,7 @@ example for Typescript support.
 
 ## Deploy your own
 
-Deploy the example using [Vercel](https://vercel.com/now):
+Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
 
 [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-react-md&project-name=with-react-md&repository-name=with-react-md)
 

examples/with-sentry/pages/api/test1.js

@@ -6,6 +6,5 @@ const doAsyncWork = () => Promise.reject(new Error('API Test 1'))
 doAsyncWork()
 
 export default async function handler(req, res) {
-  res.statusCode = 200
-  res.json({ name: 'John Doe' })
+  res.status(200).json({ name: 'John Doe' })
 }

examples/with-sentry/pages/api/test2.js

@@ -9,6 +9,5 @@ function work() {
 work()
 
 export default async function handler(req, res) {
-  res.statusCode = 200
-  res.json({ name: 'John Doe' })
+  res.status(200).json({ name: 'John Doe' })
 }

examples/with-sentry/pages/api/test3.js

@@ -9,6 +9,5 @@ function work() {
 export default async function handler(req, res) {
   work()
 
-  res.statusCode = 200
-  res.json({ name: 'John Doe' })
+  res.status(200).json({ name: 'John Doe' })
 }

examples/with-sentry/pages/api/test4.js

@@ -14,6 +14,5 @@ export default async function handler(req, res) {
   // Flushing before returning is necessary if deploying to Vercel, see
   // https://vercel.com/docs/platform/limits#streaming-responses
   await Sentry.flush(2000)
-  res.statusCode = 200
-  res.json({ name: 'John Doe' })
+  res.status(200).json({ name: 'John Doe' })
 }

examples/with-service-worker/README.md

@@ -6,7 +6,7 @@ The example is based on the following blog post: [Adding a service worker into y
 
 ## Deploy your own
 
-Deploy the example using [Vercel](https://vercel.com/now):
+Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
 
 [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-service-worker&project-name=with-service-worker&repository-name=with-service-worker)
 

examples/with-tailwindcss/pages/api/hello.js

@@ -1,6 +1,5 @@
 // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
 
 export default function helloAPI(req, res) {
-  res.statusCode = 200
-  res.json({ name: 'John Doe' })
+  res.status(200).json({ name: 'John Doe' })
 }

examples/with-typescript-eslint-jest/.eslintrc.json

@@ -16,6 +16,11 @@
     "jest": true,
     "node": true
   },
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  },
   "rules": {
     "react/react-in-jsx-scope": 0,
     "react/display-name": 0,

examples/with-typescript-eslint-jest/pages/api/hello.ts

@@ -3,8 +3,7 @@
 import { NextApiRequest, NextApiResponse } from 'next'
 
 const handler = (req: NextApiRequest, res: NextApiResponse) => {
-  res.statusCode = 200
-  res.json({ name: 'John Doe' })
+  res.status(200).json({ name: 'John Doe' })
 }
 
 export default handler

examples/with-unsplash/pages/api/collection/[id].tsx

@@ -16,15 +16,12 @@ export default function getCollection(
       .getCollection(parseInt(id.toString()))
       .then(toJson)
       .then((json) => {
-        res.statusCode = 200
-        res.setHeader('Content-Type', 'application/json')
         res.setHeader('Cache-Control', 'max-age=180000')
-        res.end(JSON.stringify([json]))
+        res.status(200).json([json])
         resolve()
       })
       .catch((error) => {
-        res.json(error)
-        res.status(405).end()
+        res.status(405).json(error)
         resolve()
       })
   })

examples/with-unsplash/pages/api/collection/index.tsx

@@ -15,15 +15,12 @@ export default function getCollections(
       .then((json) => {
         json.map((c) => (c.slug = slug(c.title)))
 
-        res.statusCode = 200
-        res.setHeader('Content-Type', 'application/json')
         res.setHeader('Cache-Control', 'max-age=180000')
-        res.end(JSON.stringify(json))
+        res.status(200).json(json)
         resolve()
       })
       .catch((error) => {
-        res.json(error)
-        res.status(405).end()
+        res.status(405).json(error)
         resolve()
       })
   })

examples/with-unsplash/pages/api/photo/[id].tsx

@@ -16,15 +16,12 @@ export default function getCollectionPhotos(
       .getCollectionPhotos(parseInt(id.toString()))
       .then(toJson)
       .then((json) => {
-        res.statusCode = 200
-        res.setHeader('Content-Type', 'application/json')
         res.setHeader('Cache-Control', 'max-age=180000')
-        res.end(JSON.stringify(json))
+        res.status(200).json(json)
         resolve()
       })
       .catch((error) => {
-        res.json(error)
-        res.status(405).end()
+        res.status(405).json(error)
         resolve()
       })
   })

examples/with-unsplash/pages/api/photo/index.tsx

@@ -9,15 +9,12 @@ export default function getPhotos(req: NextApiRequest, res: NextApiResponse) {
       .photos(process.env.UNSPLASH_USER, 1, 50, 'latest')
       .then(toJson)
       .then((json: string) => {
-        res.statusCode = 200
-        res.setHeader('Content-Type', 'application/json')
         res.setHeader('Cache-Control', 'max-age=180000')
-        res.end(JSON.stringify(json))
+        res.status(200).json(json)
         resolve()
       })
       .catch((error) => {
-        res.json(error)
-        res.status(405).end()
+        res.status(405).json(error)
         resolve()
       })
   })

examples/with-unsplash/pages/api/stats/index.tsx

@@ -9,15 +9,12 @@ export default function getStats(req: NextApiRequest, res: NextApiResponse) {
       .statistics(process.env.UNSPLASH_USER, 'days', 30)
       .then(toJson)
       .then((json) => {
-        res.statusCode = 200
-        res.setHeader('Content-Type', 'application/json')
         res.setHeader('Cache-Control', 'max-age=180000')
-        res.end(JSON.stringify(json))
+        res.status(200).json(json)
         resolve()
       })
       .catch((error) => {
-        res.json(error)
-        res.status(405).end()
+        res.status(405).json(error)
         resolve()
       })
   })

examples/with-unsplash/pages/api/user/index.tsx

@@ -9,15 +9,12 @@ export default function getUser(req: NextApiRequest, res: NextApiResponse) {
       .profile(process.env.UNSPLASH_USER)
       .then(toJson)
       .then((json) => {
-        res.statusCode = 200
-        res.setHeader('Content-Type', 'application/json')
         res.setHeader('Cache-Control', 'max-age=180000')
-        res.end(JSON.stringify(json))
+        res.status(200).json([json])
         resolve()
       })
       .catch((error) => {
-        res.json(error)
-        res.status(405).end()
+        res.status(405).json(error)
         resolve()
       })
   })