Merge branch 'canary' into respect-cache-headers

.github/actions/next-stats-action/package.json

@@ -13,6 +13,7 @@
     "node-fetch": "^2.6.0",
     "prettier": "^1.18.2",
     "pretty-bytes": "^5.3.0",
-    "pretty-ms": "^5.0.0"
+    "pretty-ms": "^5.0.0",
+    "semver": "7.3.4"
   }
 }

.github/actions/next-stats-action/src/index.js

@@ -74,6 +74,7 @@ if (!allowedActions.has(actionInfo.actionName) && !actionInfo.isRelease) {
         logger('Release detected, resetting mainRepo to last stable tag')
         const lastStableTag = await getLastStable(mainRepoDir, actionInfo.prRef)
         if (!lastStableTag) throw new Error('failed to get last stable tag')
+        console.log('using latestStable', lastStableTag)
         await checkoutRef(lastStableTag, mainRepoDir)
 
         /* eslint-disable-next-line */

.github/actions/next-stats-action/src/prepare/repo-setup.js

@@ -3,6 +3,7 @@ const fs = require('fs-extra')
 const exec = require('../util/exec')
 const { remove } = require('fs-extra')
 const logger = require('../util/logger')
+const semver = require('semver')
 
 module.exports = (actionInfo) => {
   return {
@@ -22,8 +23,9 @@ module.exports = (actionInfo) => {
         const curTag = tags[i]
         // stable doesn't include `-canary` or `-beta`
         if (!curTag.includes('-') && !ref.includes(curTag)) {
-          lastStableTag = curTag
-          break
+          if (!lastStableTag || semver.gt(curTag, lastStableTag)) {
+            lastStableTag = curTag
+          }
         }
       }
       return lastStableTag

.github/workflows/build_test_deploy.yml

@@ -15,11 +15,14 @@ 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
       - name: Check docs only change
-        run: echo ::set-output name=DOCS_CHANGE::$(node skip-docs-change.js echo 'docs-only')
+        run: echo ::set-output name=DOCS_CHANGE::$(node skip-docs-change.js echo 'not-docs-only-change')
         id: docs-change
       - run: echo ${{steps.docs-change.outputs.DOCS_CHANGE}}
       - uses: actions/cache@v2
@@ -47,13 +50,13 @@ jobs:
       NEXT_TELEMETRY_DISABLED: 1
     steps:
       - uses: actions/cache@v2
-        if: ${{needs.build.outputs.docsChange != 'docs-only'}}
+        if: ${{needs.build.outputs.docsChange != 'docs only change'}}
         id: restore-build
         with:
           path: ./*
           key: ${{ github.sha }}
       - run: ./check-pre-compiled.sh
-        if: ${{needs.build.outputs.docsChange != 'docs-only'}}
+        if: ${{needs.build.outputs.docsChange != 'docs only change'}}
 
   testUnit:
     name: Test Unit
@@ -65,14 +68,14 @@ jobs:
       HEADLESS: true
     steps:
       - uses: actions/cache@v2
-        if: ${{needs.build.outputs.docsChange != 'docs-only'}}
+        if: ${{needs.build.outputs.docsChange != 'docs only change'}}
         id: restore-build
         with:
           path: ./*
           key: ${{ github.sha }}
 
       - run: node run-tests.js --timings --type unit -g 1/1
-        if: ${{needs.build.outputs.docsChange != 'docs-only'}}
+        if: ${{needs.build.outputs.docsChange != 'docs only change'}}
 
   testIntegration:
     name: Test Integration
@@ -89,18 +92,18 @@ jobs:
     steps:
       - run: echo ${{needs.build.outputs.docsChange}}
       - uses: actions/cache@v2
-        if: ${{needs.build.outputs.docsChange != 'docs-only'}}
+        if: ${{needs.build.outputs.docsChange != 'docs only change'}}
         id: restore-build
         with:
           path: ./*
           key: ${{ github.sha }}
 
       # TODO: remove after we fix watchpack watching too much
       - run: echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p
-        if: ${{needs.build.outputs.docsChange != 'docs-only'}}
+        if: ${{needs.build.outputs.docsChange != 'docs only change'}}
 
       - run: xvfb-run node run-tests.js --timings -g ${{ matrix.group }}/6 -c 3
-        if: ${{needs.build.outputs.docsChange != 'docs-only'}}
+        if: ${{needs.build.outputs.docsChange != 'docs only change'}}
 
   testElectron:
     name: Test Electron
@@ -113,21 +116,21 @@ jobs:
       TEST_ELECTRON: 1
     steps:
       - uses: actions/cache@v2
-        if: ${{needs.build.outputs.docsChange != 'docs-only'}}
+        if: ${{needs.build.outputs.docsChange != 'docs only change'}}
         id: restore-build
         with:
           path: ./*
           key: ${{ github.sha }}
 
       # TODO: remove after we fix watchpack watching too much
       - run: echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p
-        if: ${{needs.build.outputs.docsChange != 'docs-only'}}
+        if: ${{needs.build.outputs.docsChange != 'docs only change'}}
 
       - run: yarn add -W --dev [email protected] [email protected]
-        if: ${{needs.build.outputs.docsChange != 'docs-only'}}
+        if: ${{needs.build.outputs.docsChange != 'docs only change'}}
 
       - run: xvfb-run node run-tests.js test/integration/with-electron/test/index.test.js
-        if: ${{needs.build.outputs.docsChange != 'docs-only'}}
+        if: ${{needs.build.outputs.docsChange != 'docs only change'}}
 
   testYarnPnP:
     runs-on: ubuntu-latest
@@ -136,15 +139,17 @@ 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 'docs-only')
+      - run: echo ::set-output name=DOCS_CHANGE::$(node skip-docs-change.js echo 'not-docs-only-change')
         id: docs-change
 
       - run: yarn install --frozen-lockfile --check-files
-        if: ${{steps.docs-change.outputs.DOCS_CHANGE != 'docs-only'}}
+        if: ${{steps.docs-change.outputs.DOCS_CHANGE != 'docs only change'}}
 
       - run: bash ./test-pnp.sh
-        if: ${{steps.docs-change.outputs.DOCS_CHANGE != 'docs-only'}}
+        if: ${{steps.docs-change.outputs.DOCS_CHANGE != 'docs only change'}}
 
   testsPass:
     name: thank you, next
@@ -160,22 +165,24 @@ jobs:
       NEXT_TELEMETRY_DISABLED: 1
       NEXT_TEST_JOB: 1
       HEADLESS: true
-      NEXT_WEBPACK5: 1
+      NEXT_PRIVATE_TEST_WEBPACK5_MODE: 1
 
     steps:
       - uses: actions/checkout@v2
+        with:
+          fetch-depth: 25
 
-      - run: echo ::set-output name=DOCS_CHANGE::$(node skip-docs-change.js echo 'docs-only')
+      - run: echo ::set-output name=DOCS_CHANGE::$(node skip-docs-change.js echo 'not-docs-only-change')
         id: docs-change
 
       - run: git fetch --depth=1 origin +refs/tags/*:refs/tags/*
-        if: ${{ steps.docs-change.outputs.DOCS_CHANGE != 'docs-only' }}
+        if: ${{ steps.docs-change.outputs.DOCS_CHANGE != 'docs only change' }}
 
       - run: yarn install --check-files
-        if: ${{ steps.docs-change.outputs.DOCS_CHANGE != 'docs-only' }}
+        if: ${{ steps.docs-change.outputs.DOCS_CHANGE != 'docs only change' }}
 
-      - run: xvfb-run node run-tests.js test/integration/{link-ref,production,basic,async-modules,font-optimization,ssr-ctx,worker-loader}/test/index.test.js test/acceptance/*.test.js
-        if: ${{ steps.docs-change.outputs.DOCS_CHANGE != 'docs-only' }}
+      - run: xvfb-run node run-tests.js test/integration/{link-ref,production,basic,async-modules,font-optimization,ssr-ctx}/test/index.test.js test/acceptance/*.test.js
+        if: ${{ steps.docs-change.outputs.DOCS_CHANGE != 'docs only change' }}
 
   testLegacyReact:
     name: React 16 + Webpack 4 (Basic, Production, Acceptance)
@@ -187,27 +194,29 @@ jobs:
 
     steps:
       - uses: actions/checkout@v2
+        with:
+          fetch-depth: 25
 
-      - run: echo ::set-output name=DOCS_CHANGE::$(node skip-docs-change.js echo 'docs-only')
+      - run: echo ::set-output name=DOCS_CHANGE::$(node skip-docs-change.js echo 'not-docs-only-change')
         id: docs-change
 
       - run: git fetch --depth=1 origin +refs/tags/*:refs/tags/*
-        if: ${{ steps.docs-change.outputs.DOCS_CHANGE != 'docs-only' }}
+        if: ${{ steps.docs-change.outputs.DOCS_CHANGE != 'docs only change' }}
 
       - run: cat package.json | jq '.resolutions.react = "^16.14.0"' > package.json.tmp && mv package.json.tmp package.json
-        if: ${{ steps.docs-change.outputs.DOCS_CHANGE != 'docs-only' }}
+        if: ${{ steps.docs-change.outputs.DOCS_CHANGE != 'docs only change' }}
 
       - run: cat package.json | jq '.resolutions."react-dom" = "^16.14.0"' > package.json.tmp && mv package.json.tmp package.json
-        if: ${{ steps.docs-change.outputs.DOCS_CHANGE != 'docs-only' }}
+        if: ${{ steps.docs-change.outputs.DOCS_CHANGE != 'docs only change' }}
 
       - run: yarn install --check-files
-        if: ${{ steps.docs-change.outputs.DOCS_CHANGE != 'docs-only' }}
+        if: ${{ steps.docs-change.outputs.DOCS_CHANGE != 'docs only change' }}
 
       - run: yarn list react react-dom
-        if: ${{ steps.docs-change.outputs.DOCS_CHANGE != 'docs-only' }}
+        if: ${{ steps.docs-change.outputs.DOCS_CHANGE != 'docs only change' }}
 
       - run: xvfb-run node run-tests.js test/integration/{link-ref,production,basic,async-modules,font-optimization,ssr-ctx,worker-loader}/test/index.test.js test/acceptance/*.test.js
-        if: ${{ steps.docs-change.outputs.DOCS_CHANGE != 'docs-only' }}
+        if: ${{ steps.docs-change.outputs.DOCS_CHANGE != 'docs only change' }}
 
   testFirefox:
     name: Test Firefox (production)
@@ -219,13 +228,13 @@ jobs:
       NEXT_TELEMETRY_DISABLED: 1
     steps:
       - uses: actions/cache@v2
-        if: ${{needs.build.outputs.docsChange != 'docs-only'}}
+        if: ${{needs.build.outputs.docsChange != 'docs only change'}}
         id: restore-build
         with:
           path: ./*
           key: ${{ github.sha }}
       - run: node run-tests.js test/integration/production/test/index.test.js
-        if: ${{needs.build.outputs.docsChange != 'docs-only'}}
+        if: ${{needs.build.outputs.docsChange != 'docs only change'}}
 
   testSafari:
     name: Test Safari (production)
@@ -240,13 +249,13 @@ jobs:
       BROWSERSTACK_ACCESS_KEY: ${{ secrets.BROWSERSTACK_ACCESS_KEY }}
     steps:
       - uses: actions/cache@v2
-        if: ${{needs.build.outputs.docsChange != 'docs-only'}}
+        if: ${{needs.build.outputs.docsChange != 'docs only change'}}
         id: restore-build
         with:
           path: ./*
           key: ${{ github.sha }}
       - run: '[[ -z "$BROWSERSTACK_ACCESS_KEY" ]] && echo "Skipping for PR" || node run-tests.js test/integration/production/test/index.test.js'
-        if: ${{needs.build.outputs.docsChange != 'docs-only'}}
+        if: ${{needs.build.outputs.docsChange != 'docs only change'}}
 
   testSafariOld:
     name: Test Safari 10.1 (nav)
@@ -262,18 +271,18 @@ jobs:
       BROWSERSTACK_ACCESS_KEY: ${{ secrets.BROWSERSTACK_ACCESS_KEY }}
     steps:
       - uses: actions/cache@v2
-        if: ${{needs.build.outputs.docsChange != 'docs-only'}}
+        if: ${{needs.build.outputs.docsChange != 'docs only change'}}
         id: restore-build
         with:
           path: ./*
           key: ${{ github.sha }}
       - run: '[[ -z "$BROWSERSTACK_ACCESS_KEY" ]] && echo "Skipping for PR" || node run-tests.js test/integration/production-nav/test/index.test.js'
-        if: ${{needs.build.outputs.docsChange != 'docs-only'}}
+        if: ${{needs.build.outputs.docsChange != 'docs only change'}}
 
   publishRelease:
     name: Potentially publish release
     runs-on: ubuntu-latest
-    needs: [testsPass]
+    needs: build
     env:
       NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
     steps:

.github/workflows/pull_request_stats.yml

@@ -10,7 +10,10 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
-      - run: echo ::set-output name=DOCS_CHANGE::$(node skip-docs-change.js echo 'docs-only')
+        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
-        if: ${{ steps.docs-change.outputs.DOCS_CHANGE != 'docs-only' }}
+        if: ${{ steps.docs-change.outputs.DOCS_CHANGE != 'docs only change' }}

.vscode/launch.json

@@ -42,6 +42,16 @@
       "port": 9229,
       "skipFiles": ["<node_internals>/**"],
       "outFiles": ["${workspaceFolder}/packages/next/dist/**/*"]
+    },
+    {
+      "name": "Launch this example",
+      "type": "node",
+      "request": "launch",
+      "cwd": "${workspaceFolder}",
+      "runtimeExecutable": "yarn",
+      "runtimeArgs": ["run", "debug", "dev", "${fileDirname}"],
+      "skipFiles": ["<node_internals>/**"],
+      "port": 9229
     }
   ]
 }

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/automatic-static-optimization.md

@@ -25,13 +25,13 @@ During prerendering, the router's `query` object will be empty since we do not h
 `next build` will emit `.html` files for statically optimized pages. For example, the result for the page `pages/about.js` would be:
 
 ```bash
-.next/server/static/${BUILD_ID}/about.html
+.next/server/pages/about.html
 ```
 
 And if you add `getServerSideProps` to the page, it will then be JavaScript, like so:
 
 ```bash
-.next/server/static/${BUILD_ID}/about.js
+.next/server/pages/about.js
 ```
 
 ## Caveats

docs/advanced-features/measuring-performance.md

@@ -1,14 +1,19 @@
 ---
-description: Measure and track page performance using Next.js's build-in performance relayer
+description: Measure and track page performance using Next.js Analytics
 ---
 
 # Measuring performance
 
-Next.js has a built-in relayer that allows you to analyze and measure the performance of
+[Next.js Analytics](https://nextjs.org/analytics) allows you to analyze and measure the performance of
 pages using different metrics.
 
-To measure any of the supported metrics, you will need to create a [custom
-App](/docs/advanced-features/custom-app.md) component and define a `reportWebVitals` function:
+You can start collecting your [Real Experience Score](https://vercel.com/docs/analytics#metrics) with zero-configuration on [Vercel deployments](https://vercel.com/docs/analytics). There's also support for Analytics if you're [self-hosting](https://vercel.com/docs/analytics#self-hosted).
+
+The rest of this documentation describes the built-in relayer Next.js Analytics uses.
+
+## Build Your Own
+
+First, you will need to create a [custom App](/docs/advanced-features/custom-app.md) component and define a `reportWebVitals` function:
 
 ```js
 // pages/_app.js

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-reference/next.config.js/headers.md

@@ -6,6 +6,13 @@ description: Add custom HTTP headers to your Next.js app.
 
 > 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.
 
+<details open>
+  <summary><b>Examples</b></summary>
+  <ul>
+    <li><a href="https://github.com/vercel/next.js/tree/canary/examples/headers">Headers</a></li>
+  </ul>
+</details>
+
 Headers allow you to set custom HTTP headers for an incoming request path.
 
 To set custom HTTP headers you can use the `headers` key in `next.config.js`:
@@ -224,3 +231,7 @@ module.exports = {
   },
 }
 ```
+
+### Cache-Control
+
+Cache-Control headers set in next.config.js will be overwritten in production to ensure that static assets can be cached effectively. If you need to revalidate the cache of a page that has been [statically generated](https://nextjs.org/docs/basic-features/pages#static-generation-recommended), you can do so by setting `revalidate` in the page's [`getStaticProps`](https://nextjs.org/docs/basic-features/data-fetching#getstaticprops-static-generation) function.