Merge branch 'canary' into prevent-edge-case-in-redirect

.github/workflows/build_test_deploy.yml

@@ -148,17 +148,12 @@ jobs:
     steps:
       - uses: actions/checkout@v2
       - run: git fetch --depth=1 origin +refs/tags/*:refs/tags/*
-      - run: cat package.json | jq '.resolutions.webpack = "^5.0.0-beta.30"' > package.json.tmp && mv package.json.tmp package.json
+      - run: cat package.json | jq '.resolutions.webpack = "^5.11.1"' > package.json.tmp && mv package.json.tmp package.json
       - run: cat package.json | jq '.resolutions.react = "^17.0.1"' > package.json.tmp && mv package.json.tmp package.json
       - run: cat package.json | jq '.resolutions."react-dom" = "^17.0.1"' > package.json.tmp && mv package.json.tmp package.json
       - run: yarn install --check-files
       - run: yarn list webpack react react-dom
-      - run: node run-tests.js test/integration/link-ref/test/index.test.js
-      - run: node run-tests.js test/integration/production/test/index.test.js
-      - run: node run-tests.js test/integration/basic/test/index.test.js
-      - run: node run-tests.js test/integration/async-modules/test/index.test.js
-      - run: node run-tests.js test/integration/font-optimization/test/index.test.js
-      - run: node run-tests.js test/acceptance/*
+      - 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
 
   testFirefox:
     name: Test Firefox (production)

.gitignore

@@ -25,6 +25,7 @@ test/**/next-env.d.ts
 
 # Editors
 **/.idea
+**/.#*
 
 # examples
 examples/**/out

.vscode/launch.json

@@ -22,7 +22,8 @@
       "runtimeExecutable": "yarn",
       "runtimeArgs": ["run", "debug", "build", "test/integration/basic"],
       "skipFiles": ["<node_internals>/**"],
-      "port": 9229
+      "port": 9229,
+      "outFiles": ["${workspaceFolder}/packages/next/dist/**/*"]
     },
     {
       "name": "Launch app production",

.vscode/settings.json

@@ -4,5 +4,6 @@
     "javascriptreact",
     { "language": "typescript", "autoFix": true },
     { "language": "typescriptreact", "autoFix": true }
-  ]
+  ],
+  "debug.javascript.unmapMissingSources": true
 }

azure-pipelines.yml

@@ -1,3 +1,25 @@
+trigger:
+  # Only run latest commit for branches:
+  batch: true
+  # Do not run Azure CI for docs-only/example-only changes:
+  paths:
+    include:
+      - '*'
+    exclude:
+      - bench/*
+      - docs/*
+      - errors/*
+      - examples/*
+  # Do not run Azure on `canary`, `master`, or release tags. This unnecessarily
+  # increases the backlog, and the change was already tested on the PR.
+  branches:
+    include:
+      - '*'
+    exclude:
+      - canary
+      - master
+      - refs/tags/*
+
 variables:
   YARN_CACHE_FOLDER: $(Pipeline.Workspace)/.yarn
   NEXT_TELEMETRY_DISABLED: '1'

docs/api-reference/next.config.js/rewrites.md

@@ -154,9 +154,10 @@ module.exports = {
         destination: '/another', // automatically becomes /docs/another
       },
       {
-        // does not add /docs since basePath: false is set
+        // does not add /docs to /without-basePath since basePath: false is set
+        // Note: this can not be used for internal rewrites e.g. `destination: '/another'`
         source: '/without-basePath',
-        destination: '/another',
+        destination: 'https://example.com',
         basePath: false,
       },
     ]

docs/api-reference/next/image.md

@@ -11,9 +11,21 @@ description: Enable Image Optimization with the built-in Image component.
   </ul>
 </details>
 
-> Before moving forward, we recommend you to read [Image Optimization](/docs/basic-features/image-optimization.md) first.
+<details>
+  <summary><b>Version History</b></summary>
+
+| Version   | Changes                  |
+| --------- | ------------------------ |
+| `v10.0.1` | `layout` prop added.     |
+| `v10.0.0` | `next/image` introduced. |
+
+</details>
+
+> Before moving forward, we recommend you to read
+> [Image Optimization](/docs/basic-features/image-optimization.md) first.
 
-Image Optimization can be enabled via the `Image` component exported by `next/image`.
+Image Optimization can be enabled via the `<Image />` component exported by
+`next/image`.
 
 ## Usage
 
@@ -47,41 +59,49 @@ export default Home
 
 ## Required Props
 
-The `Image` component requires the following properties.
+The `<Image />` component requires the following properties.
 
 ### src
 
 The path or URL to the source image. This is required.
 
-When using an external URL, you must add it to [domains](/docs/basic-features/image-optimization.md#domains) in `next.config.js`.
+When using an external URL, you must add it to
+[domains](/docs/basic-features/image-optimization.md#domains) in
+`next.config.js`.
 
 ### width
 
 The width of the image, in pixels. Must be an integer without a unit.
 
-Required unless [layout="fill"`](#layout).
+Required unless [`layout="fill"`](#layout).
 
 ### height
 
 The height of the image, in pixels. Must be an integer without a unit.
 
-Required unless [layout="fill"`](#layout).
+Required unless [`layout="fill"`](#layout).
 
 ## Optional Props
 
-The `Image` component optionally accepts the following properties.
+The `<Image />` component optionally accepts the following properties.
 
 ### layout
 
-The layout behavior of the image as the viewport changes size. Defaults to `intrinsic`.
+The layout behavior of the image as the viewport changes size. Defaults to
+`intrinsic`.
 
-When `fixed`, the image dimensions will not change as the viewport changes (no responsiveness) similar to the native `img` element.
+When `fixed`, the image dimensions will not change as the viewport changes (no
+responsiveness) similar to the native `img` element.
 
-When `intrinsic`, the image will scale the dimensions down for smaller viewports but maintain the original dimensions for larger viewports.
+When `intrinsic`, the image will scale the dimensions down for smaller viewports
+but maintain the original dimensions for larger viewports.
 
-When `responsive`, the image will scale the dimensions down for smaller viewports and scale up for larger viewports.
+When `responsive`, the image will scale the dimensions down for smaller
+viewports and scale up for larger viewports.
 
-When `fill`, the image will stretch both width and height to the dimensions of the parent element, usually paired with [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit).
+When `fill`, the image will stretch both width and height to the dimensions of
+the parent element, usually paired with
+[object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit).
 
 Try it out:
 
@@ -95,23 +115,27 @@ Try it out:
 
 A string mapping media queries to device sizes. Defaults to `100vw`.
 
-We recommend setting `sizes` when `layout="responsive"` and your image will not be the same width as the viewport.
+We recommend setting `sizes` when using `layout="responsive"` or `layout="fill"` and your image will **not** be the same width as the viewport.
 
 [Learn more](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-sizes).
 
 ### quality
 
-The quality of the optimized image, an integer between 1 and 100 where 100 is the best quality. Defaults to 75.
+The quality of the optimized image, an integer between `1` and `100` where `100`
+is the best quality. Defaults to `75`.
 
 ### priority
 
-When true, the image will be considered high priority and [preload](https://web.dev/preload-responsive-images/).
+When true, the image will be considered high priority and
+[preload](https://web.dev/preload-responsive-images/).
 
-Should only be used when the image is visible above the fold. Defaults to false.
+Should only be used when the image is visible above the fold. Defaults to
+`false`.
 
 ## Advanced Props
 
-In some cases, you may need more advanced usage. The `Image` component optionally accepts the following advanced properties.
+In some cases, you may need more advanced usage. The `<Image />` component
+optionally accepts the following advanced properties.
 
 ### objectFit
 
@@ -127,24 +151,35 @@ The image position when using `layout="fill"`.
 
 ### loading
 
+> **Attention**: This property is only meant for advanced usage. Switching an
+> image to load with `eager` will normally **hurt performance**.
+>
+> We recommend using the [`priority`](#priority) property instead, which
+> properly loads the image eagerly for nearly all use cases.
+
 The loading behavior of the image. Defaults to `lazy`.
 
-When `lazy`, defer loading the image until it reaches a calculated distance from the viewport.
+When `lazy`, defer loading the image until it reaches a calculated distance from
+the viewport.
 
 When `eager`, load the image immediately.
 
 [Learn more](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-loading)
 
 ### unoptimized
 
-When true, the source image will be served as-is instead of changing quality, size, or format. Defaults to false.
+When true, the source image will be served as-is instead of changing quality,
+size, or format. Defaults to `false`.
 
 ## Other Props
 
-Other properties on the `Image` component will be passed to the underlying `img` element with the exception of the following:
+Other properties on the `<Image />` component will be passed to the underlying
+`img` element with the exception of the following:
 
 - `style`. Use `className` instead.
-- `srcSet`. Use [Device Sizes](/docs/basic-features/image-optimization.md#device-sizes) instead.
+- `srcSet`. Use
+  [Device Sizes](/docs/basic-features/image-optimization.md#device-sizes)
+  instead.
 - `decoding`. It is always `"async"`.
 
 ## Related

docs/api-reference/next/router.md

@@ -49,6 +49,7 @@ The following is the definition of the `router` object returned by both [`useRou
 - `locale`: `String` - The active locale (if enabled).
 - `locales`: `String[]` - All supported locales (if enabled).
 - `defaultLocale`: `String` - The current default locale (if enabled).
+- `isReady`: `boolean` - Whether the router fields are updated client-side and ready for use. Should only be used inside of `useEffect` methods and not for conditionally rendering on the server.
 
 Additionally, the following methods are also included inside `router`:
 
@@ -100,7 +101,7 @@ export default function Page() {
 }
 ```
 
-Redirecting the user to `pages/login.js`, useful for pages behind authentication:
+Redirecting the user to `pages/login.js`, useful for pages behind [authentication](/docs/authentication):
 
 ```jsx
 import { useEffect } from 'react'