Merge branch 'canary' into with-storybook-styled-jsx-scss

.eslintignore

@@ -15,3 +15,4 @@ packages/next-codemod/**/*.js
 packages/next-codemod/**/*.d.ts
 packages/next-env/**/*.d.ts
 test/integration/async-modules/**
+test-timings.json

.github/workflows/build_test_deploy.yml

@@ -15,6 +15,7 @@ jobs:
       - uses: actions/checkout@v2
       - 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
       - uses: actions/cache@v2
         id: cache-build
         with:
@@ -46,8 +47,25 @@ jobs:
           key: ${{ github.sha }}
       - run: ./check-pre-compiled.sh
 
-  testAll:
-    name: Test All
+  testUnit:
+    name: Test Unit
+    runs-on: ubuntu-latest
+    needs: build
+    env:
+      NEXT_TELEMETRY_DISABLED: 1
+      NEXT_TEST_JOB: 1
+      HEADLESS: true
+    steps:
+      - uses: actions/cache@v2
+        id: restore-build
+        with:
+          path: ./*
+          key: ${{ github.sha }}
+
+      - run: node run-tests.js --timings --type unit -g 1/1
+
+  testIntegration:
+    name: Test Integration
     runs-on: ubuntu-latest
     needs: build
     env:
@@ -115,7 +133,7 @@ jobs:
   testsPass:
     name: thank you, next
     runs-on: ubuntu-latest
-    needs: [lint, checkPrecompiled, testAll, testYarnPnP]
+    needs: [lint, checkPrecompiled, testIntegration, testUnit, testYarnPnP]
     steps:
       - run: exit 0
 

.gitignore

@@ -31,6 +31,7 @@ examples/**/out
 examples/**/.env*.local
 
 pr-stats.md
+test-timings.json
 
 # Vercel
 .vercel

.prettierignore

@@ -13,4 +13,5 @@ packages/next-codemod/transforms/__testfixtures__/**/*
 packages/next-codemod/transforms/__tests__/**/*
 packages/next-codemod/**/*.js
 packages/next-codemod/**/*.d.ts
-packages/next-env/**/*.d.ts
+packages/next-env/**/*.d.ts
+test-timings.json

azure-pipelines.yml

@@ -3,64 +3,111 @@ variables:
   NEXT_TELEMETRY_DISABLED: '1'
   node_version: ^10.10.0
 
-jobs:
-  - job: test_ie11
-    pool:
-      vmImage: 'windows-2019'
-    steps:
-      - task: NodeTool@0
-        inputs:
-          versionSpec: $(node_version)
-        displayName: 'Install Node.js'
+stages:
+  - stage: Build
+    jobs:
+      - job: build
+        pool:
+          vmImage: 'windows-2019'
+        steps:
+          - script: echo $(Agent.BuildDirectory)
+          - script: dir
+          - script: dir $(System.DefaultWorkingDirectory)
+          - script: echo $(Build.SourceVersion)
+          - powershell: Get-MpComputerStatus
+          - task: NodeTool@0
+            inputs:
+              versionSpec: $(node_version)
+            displayName: 'Install Node.js'
+          - task: Cache@2
+            inputs:
+              # use deterministic cache key that is specific
+              # to this test run
+              key: $(Build.SourceVersion)
+              path: $(System.DefaultWorkingDirectory)
+            displayName: Cache Build
+          - script: |
+              yarn install --frozen-lockfile --check-files
+            displayName: 'Install dependencies'
+          - script: |
+              node run-tests.js --timings --write-timings --azure -g 1/1
+            displayName: 'Fetch test timing data'
 
-      - task: CacheBeta@0
-        inputs:
-          key: yarn | $(Agent.OS) | yarn.lock
-          path: $(YARN_CACHE_FOLDER)
-        displayName: Cache Yarn packages
+  - stage: Test
+    dependsOn: Build
+    jobs:
+      - job: test_ie11_production
+        pool:
+          vmImage: 'windows-2019'
+        steps:
+          - checkout: none
+          - task: NodeTool@0
+            inputs:
+              versionSpec: $(node_version)
+            displayName: 'Install Node.js'
+          - task: Cache@2
+            inputs:
+              # use deterministic cache key that is specific
+              # to this test run
+              key: $(Build.SourceVersion)
+              path: $(System.DefaultWorkingDirectory)
+            displayName: Cache Build
+          - script: |
+              yarn testie --forceExit test/integration/production/
+            displayName: 'Run tests'
 
-      - script: |
-          yarn install --frozen-lockfile --check-files
-        displayName: 'Install dependencies'
+      - job: test_unit
+        pool:
+          vmImage: 'windows-2019'
+        steps:
+          - checkout: none
+          - script: |
+              wmic datafile where name="C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe" get Version /value
+            displayName: 'List Chrome version'
+          - task: NodeTool@0
+            inputs:
+              versionSpec: $(node_version)
+            displayName: 'Install Node.js'
+          - task: Cache@2
+            inputs:
+              # use deterministic cache key that is specific
+              # to this test run
+              key: $(Build.SourceVersion)
+              path: $(System.DefaultWorkingDirectory)
+            displayName: Cache Build
+          - script: |
+              node run-tests.js -g 1/1 --timings --azure --type unit
+            displayName: 'Run tests'
 
-      - script: |
-          yarn testie --forceExit test/integration/production/
-        displayName: 'Run tests'
-
-  - job: test_chrome
-    pool:
-      vmImage: 'windows-2019'
-    strategy:
-      maxParallel: 10
-      matrix:
-        node-10-1:
-          group: 1/4
-        node-10-2:
-          group: 2/4
-        node-10-3:
-          group: 3/4
-        node-10-4:
-          group: 4/4
-    steps:
-      - script: |
-          wmic datafile where name="C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe" get Version /value
-        displayName: 'List Chrome version'
-
-      - task: NodeTool@0
-        inputs:
-          versionSpec: $(node_version)
-        displayName: 'Install Node.js'
-
-      - task: CacheBeta@0
-        inputs:
-          key: yarn | $(Agent.OS) | yarn.lock
-          path: $(YARN_CACHE_FOLDER)
-        displayName: Cache Yarn packages
-
-      - script: |
-          yarn install --frozen-lockfile --check-files
-        displayName: 'Install dependencies'
-
-      - script: |
-          node run-tests.js -g $(group) --timings --azure
-        displayName: 'Run tests'
+      - job: test_chrome_integration
+        pool:
+          vmImage: 'windows-2019'
+        strategy:
+          matrix:
+            node-10-1:
+              group: 1/4
+            node-10-2:
+              group: 2/4
+            node-10-3:
+              group: 3/4
+            node-10-4:
+              group: 4/4
+        steps:
+          - checkout: none
+          - script: |
+              wmic datafile where name="C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe" get Version /value
+            displayName: 'List Chrome version'
+          - task: NodeTool@0
+            inputs:
+              versionSpec: $(node_version)
+            displayName: 'Install Node.js'
+          - task: Cache@2
+            inputs:
+              # use deterministic cache key that is specific
+              # to this test run
+              key: $(Build.SourceVersion)
+              path: $(System.DefaultWorkingDirectory)
+            displayName: Cache Build
+          - script: |
+              node run-tests.js -g $(group) --timings --azure
+            displayName: 'Run tests'

docs/advanced-features/static-html-export.md

@@ -71,3 +71,4 @@ By default, `next export` will generate an `out` directory, which can be served
 - The [`fallback: true`](/docs/basic-features/data-fetching.md#fallback-true) mode of `getStaticPaths` is not supported when using `next export`.
 - [API Routes](/docs/api-routes/introduction.md) are not supported by this method because they can't be prerendered to HTML.
 - [`getServerSideProps`](/docs/basic-features/data-fetching.md#getserversideprops-server-side-rendering) cannot be used within pages because the method requires a server. Consider using [`getStaticProps`](/docs/basic-features/data-fetching.md#getstaticprops-static-generation) instead.
+- The [`next/image`](/docs/api-reference/next/image) component's default loader is not supported when using `next export`. However, other [loader](https://nextjs.org/docs/basic-features/image-optimization#loader) options will work.

docs/basic-features/data-fetching.md

@@ -459,7 +459,7 @@ export default Post
 
 If `fallback` is `true`, then the behavior of `getStaticProps` changes:
 
-- The paths returned from `getStaticPaths` will be rendered to HTML at build time.
+- The paths returned from `getStaticPaths` will be rendered to HTML at build time by `getStaticProps`.
 - The paths that have not been generated at build time will **not** result in a 404 page. Instead, Next.js will serve a “fallback” version of the page on the first request to such a path (see [“Fallback pages”](#fallback-pages) below for details).
 - In the background, Next.js will statically generate the requested path HTML and JSON. This includes running `getStaticProps`.
 - When that’s done, the browser receives the JSON for the generated path. This will be used to automatically render the page with the required props. From the user’s perspective, the page will be swapped from the fallback page to the full page.
@@ -532,6 +532,21 @@ This ensures that users always have a fast experience while preserving fast buil
 
 `fallback: true` will not _update_ generated pages, for that take a look at [Incremental Static Regeneration](#incremental-static-regeneration).
 
+#### `fallback: 'blocking'`
+
+If `fallback` is `'blocking'`, new paths not returned by `getStaticPaths` will wait for the HTML to be generated, identical to SSR (hence why _blocking_), and then be cached for future requests so it only happens once per path.
+
+`getStaticProps` will behave as follows:
+
+- The paths returned from `getStaticPaths` will be rendered to HTML at build time by `getStaticProps`.
+- The paths that have not been generated at build time will **not** result in a 404 page. Instead, Next.js will SSR on the first request and return the generated HTML.
+- When that’s done, the browser receives the HTML for the generated path. From the user’s perspective, it will transition from "the browser is requesting the page" to "the full page is loaded". There is no flash of loading/fallback state.
+- At the same time, Next.js adds this path to the list of pre-rendered pages. Subsequent requests to the same path will serve the generated page, just like other pages pre-rendered at build time.
+
+`fallback: 'blocking'` will not _update_ generated pages by default. To update generated pages, use [Incremental Static Regeneration](#incremental-static-regeneration) in conjunction with `fallback: 'blocking'`.
+
+> `fallback: 'blocking'` is not supported when using [`next export`](/docs/advanced-features/static-html-export.md).
+
 ### When should I use `getStaticPaths`?
 
 You should use `getStaticPaths` if you’re statically pre-rendering pages that use dynamic routes.

docs/basic-features/typescript.md

@@ -74,7 +74,7 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
 The following is an example of how to use the built-in types for API routes:
 
 ```ts
-import { NextApiRequest, NextApiResponse } from 'next'
+import type { NextApiRequest, NextApiResponse } from 'next'
 
 export default (req: NextApiRequest, res: NextApiResponse) => {
   res.status(200).json({ name: 'John Doe' })
@@ -84,7 +84,7 @@ export default (req: NextApiRequest, res: NextApiResponse) => {
 You can also type the response data:
 
 ```ts
-import { NextApiRequest, NextApiResponse } from 'next'
+import type { NextApiRequest, NextApiResponse } from 'next'
 
 type Data = {
   name: string

errors/export-image-api.md

@@ -0,0 +1,23 @@
+# `next export` with Image API
+
+#### Why This Error Occurred
+
+You are attempting to run `next export` while importing the `next/image` component configured using the default `loader`.
+
+However, the default `loader` relies on the Image Optimization API which is not available for exported applications.
+
+This is because Next.js optimizes images on-demand, as users request them (not at build time).
+
+#### Possible Ways to Fix It
+
+- Use `next start` to run a server, which includes the Image Optimization API.
+- Use Vercel to deploy, which supports [Image Optimization](https://vercel.com/docs/next.js/image-optimization).
+- Configure a third-party [loader](https://nextjs.org/docs/basic-features/image-optimization#loader) in `next.config.js`.
+
+### Useful Links
+
+- [Deployment Documentation](https://nextjs.org/docs/deployment#vercel-recommended)
+- [Image Optimization Documentation](https://nextjs.org/docs/basic-features/image-optimization)
+- [`next export` Documentation](https://nextjs.org/docs/advanced-features/static-html-export)
+- [`next/image` Documentation](https://nextjs.org/docs/api-reference/next/image)
+- [Vercel Documentation](https://vercel.com/docs/next.js/image-optimization)

errors/gssp-mixed-not-found-redirect.md

@@ -0,0 +1,16 @@
+# Mixed `notFound` and `redirect`
+
+#### Why This Error Occurred
+
+In one of your page's `getStaticProps` or `getServerSideProps` `notFound` and `redirect` values were both returned.
+
+These values can not both be returned at the same time and one or the other needs to be returned at a time.
+
+#### Possible Ways to Fix It
+
+Make sure only `notFound` **or** `redirect` is being returned on your page's `getStaticProps` or `getServerSideProps`
+
+### Useful Links
+
+- [`getStaticProps` Documentation](https://nextjs.org/docs/basic-features/data-fetching#getstaticprops-static-generation)
+- [`getServerSideProps` Documentation](https://nextjs.org/docs/basic-features/data-fetching#getserversideprops-server-side-rendering)

errors/next-head-count-missing.md

@@ -6,8 +6,6 @@ You have a custom `pages/_document.js` that doesn't have the components required
 
 #### Possible Ways to Fix It
 
-Upgrade Next.js to 9.5.4 or later, which does not require `next-head-count`.
-
-If you can't upgrade right now, ensure that your `_document.js` is importing and rendering all of the [required components](https://nextjs.org/docs/advanced-features/custom-document).
+Ensure that your `_document.js` is importing and rendering all of the [required components](https://nextjs.org/docs/advanced-features/custom-document).
 
 In this case you are most likely not rendering the `<Head>` component imported from `next/document`.

examples/blog-starter-typescript/package.json

@@ -16,7 +16,7 @@
     "react-dom": "^16.13.0",
     "remark": "11.0.2",
     "remark-html": "10.0.0",
-    "typescript": "^3.9.2"
+    "typescript": "^4.0.3"
   },
   "devDependencies": {
     "@types/classnames": "^2.2.10",

examples/cms-contentful/pages/index.js

@@ -36,7 +36,7 @@ export default function Index({ preview, allPosts }) {
 }
 
 export async function getStaticProps({ preview = false }) {
-  const allPosts = await getAllPostsForHome(preview)
+  const allPosts = (await getAllPostsForHome(preview)) ?? []
   return {
     props: { preview, allPosts },
   }

examples/image-component/components/view-source.js

@@ -1,26 +1,26 @@
 import { svg, arm } from './view-source.module.css'
 
 const ViewSource = ({ pathname }) => (
-  <a
-    title="View Source"
-    href={`https://github.com/vercel/next.js/tree/canary/examples/image-component/${pathname}`}
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="80"
+    height="80"
+    viewBox="0 0 250 250"
+    fill="#151513"
+    className={svg}
   >
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="80"
-      height="80"
-      viewBox="0 0 250 250"
-      fill="#151513"
-      className={svg}
+    <a
+      title="View Source"
+      href={`https://github.com/vercel/next.js/tree/canary/examples/image-component/${pathname}`}
     >
       <path d="M0 0l115 115h15l12 27 108 108V0z" fill="#fff" />
       <path
         className={arm}
         d="M128 109c-15-9-9-19-9-19 3-7 2-11 2-11-1-7 3-2 3-2 4 5 2 11 2 11-3 10 5 15 9 16"
       />
       <path d="M115 115s4 2 5 0l14-14c3-2 6-3 8-3-8-11-15-24 2-41 5-5 10-7 16-7 1-2 3-7 12-11 0 0 5 3 7 16 4 2 8 5 12 9s7 8 9 12c14 3 17 7 17 7-4 8-9 11-11 11 0 6-2 11-7 16-16 16-30 10-41 2 0 3-1 7-5 11l-12 11c-1 1 1 5 1 5z" />
-    </svg>
-  </a>
+    </a>
+  </svg>
 )
 
 export default ViewSource