Merge branch 'canary' into fix-path-splitting

.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/test/index.test.js test/integration/production/test/index.test.js test/integration/basic/test/index.test.js test/integration/async-modules/test/index.test.js test/integration/font-optimization/test/index.test.js test/acceptance/*.test.js
 
   testFirefox:
     name: Test Firefox (production)

.github/workflows/cancel.yml

@@ -0,0 +1,17 @@
+name: Cancel
+on:
+  pull_request_target:
+    types:
+      - edited
+      - synchronize
+
+jobs:
+  cancel:
+    name: 'Cancel Previous Runs'
+    runs-on: ubuntu-latest
+    timeout-minutes: 2
+    steps:
+      - uses: styfle/cancel-workflow-action@0.5.0
+        with:
+          workflow_id: 444921, 444987
+          access_token: ${{ github.token }}

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

bench/instrument.js

@@ -0,0 +1,15 @@
+const { NodeTracerProvider } = require('@opentelemetry/node')
+const { BatchSpanProcessor } = require('@opentelemetry/tracing')
+const { ZipkinExporter } = require('@opentelemetry/exporter-zipkin')
+
+const tracerProvider = new NodeTracerProvider()
+
+tracerProvider.addSpanProcessor(
+  new BatchSpanProcessor(
+    new ZipkinExporter({
+      serviceName: 'next-js',
+    })
+  )
+)
+
+tracerProvider.register()

docs/advanced-features/dynamic-import.md

@@ -71,6 +71,8 @@ export default Home
 
 `DynamicComponent` will be the default component returned by `../components/hello`. It works like a regular React Component, and you can pass props to it as you normally would.
 
+> **Note**: `import()` needs to be explicitly written without template strings. Furthermore the `import()` has to be inside the `dynamic()` call for Next.js to be able to match webpack bundles / module ids to the specific `dynamic()` call and preload them before rendering. `dynamic()` can't be used inside of React rendering as it needs to be marked in the top level of the module for preloading to work, similar to `React.lazy`.
+
 ## With named exports
 
 If the dynamic component is not the default export, you can use a named export too. Consider the module `../components/hello.js` which has a named export `Hello`:

docs/advanced-features/i18n-routing.md

@@ -214,6 +214,12 @@ export default function IndexPage(props) {
 }
 ```
 
+## Leveraging the NEXT_LOCALE cookie
+
+Next.js supports overriding the accept-language header with a `NEXT_LOCALE=the-locale` cookie. This cookie can be set using a language switcher and then when a user comes back to the site it will leverage the locale specified in the cookie.
+
+For example, if a user prefers the locale `fr` but a `NEXT_LOCALE=en` cookie is set the `en` locale will be used instead until the cookie is removed or expired.
+
 ## Search Engine Optimization
 
 Since Next.js knows what language the user is visiting it will automatically add the `lang` attribute to the `<html>` tag.

docs/advanced-features/source-maps.md

@@ -0,0 +1,23 @@
+---
+description: Enables browser source map generation during the production build.
+---
+
+# Source Maps
+
+Source Maps are enabled by default during development. During production builds they are disabled as generation source maps can significantly increase build times and memory usage while being generated.
+
+Next.js provides a configuration flag you can use to enable browser source map generation during the production build:
+
+```js
+// next.config.js
+module.exports = {
+  productionBrowserSourceMaps: true,
+}
+```
+
+When the `productionBrowserSourceMaps` option is enabled the source maps will be output in the same directory as the JavaScript files, Next.js will automatically serve these files when requested.
+
+## Caveats
+
+- Can increase `next build` time
+- Increases memory usage during `next build`

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

@@ -46,6 +46,6 @@ module.exports = (phase, { defaultConfig }) => {
 
 The commented lines are the place where you can put the configs allowed by `next.config.js`, which are defined [here](https://github.com/vercel/next.js/blob/canary/packages/next/next-server/server/config.ts#L12-L63).
 
-However, none of the configs are required, and it's not necessary to understand what each config does, instead, search for the features you need to enable or modify in this section and they will show you what to do.
+However, none of the configs are required, and it's not necessary to understand what each config does. Instead, search for the features you need to enable or modify in this section and they will show you what to do.
 
 > Avoid using new JavaScript features not available in your target Node.js version. `next.config.js` will not be parsed by Webpack, Babel or TypeScript.

docs/api-reference/next/image.md

@@ -11,6 +11,16 @@ description: Enable Image Optimization with the built-in Image component.
   </ul>
 </details>
 
+<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`.
@@ -93,19 +103,21 @@ Try it out:
 
 ### sizes
 
-A string mapping media queries to device sizes. Defaults to [Device Sizes](/docs/basic-features/image-optimization.md#device-sizes).
+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.
 
 [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.
 
-### priority
+<!-- ### priority
 
 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
 

docs/api-reference/next/link.md

@@ -113,7 +113,8 @@ function NavLink({ href, name }) {
 export default NavLink
 ```
 
-> **Note**: If you’re using [emotion](https://emotion.sh/)’s JSX pragma feature (`@jsx jsx`), you must use `passHref` even if you use an `<a>` tag directly.
+- If you’re using [emotion](https://emotion.sh/)’s JSX pragma feature (`@jsx jsx`), you must use `passHref` even if you use an `<a>` tag directly.
+- The component should support `onClick` property to trigger navigation correctly
 
 ## If the child is a function component
 

docs/api-reference/next/router.md

@@ -310,13 +310,13 @@ export default function Page() {
 
 You can listen to different events happening inside the Next.js Router. Here's a list of supported events:
 
-- `routeChangeStart(url)` - Fires when a route starts to change
-- `routeChangeComplete(url)` - Fires when a route changed completely
-- `routeChangeError(err, url)` - Fires when there's an error when changing routes, or a route load is cancelled
+- `routeChangeStart(url, { shallow })` - Fires when a route starts to change
+- `routeChangeComplete(url, { shallow })` - Fires when a route changed completely
+- `routeChangeError(err, url, { shallow })` - Fires when there's an error when changing routes, or a route load is cancelled
   - `err.cancelled` - Indicates if the navigation was cancelled
-- `beforeHistoryChange(url)` - Fires just before changing the browser's history
-- `hashChangeStart(url)` - Fires when the hash will change but not the page
-- `hashChangeComplete(url)` - Fires when the hash has changed but not the page
+- `beforeHistoryChange(url, { shallow })` - Fires just before changing the browser's history
+- `hashChangeStart(url, { shallow })` - Fires when the hash will change but not the page
+- `hashChangeComplete(url, { shallow })` - Fires when the hash has changed but not the page
 
 > **Note:** Here `url` is the URL shown in the browser, including the [`basePath`](/docs/api-reference/next.config.js/basepath.md).
 
@@ -332,8 +332,12 @@ export default function MyApp({ Component, pageProps }) {
   const router = useRouter()
 
   useEffect(() => {
-    const handleRouteChange = (url) => {
-      console.log('App is changing to: ', url)
+    const handleRouteChange = (url, { shallow }) => {
+      console.log(
+        `App is changing to ${url} ${
+          shallow ? 'with' : 'without'
+        } shallow routing`
+      )
     }
 
     router.events.on('routeChangeStart', handleRouteChange)

docs/basic-features/data-fetching.md

@@ -39,6 +39,17 @@ In addition, we’ll talk briefly about how to fetch data on the client side.
 
 ## `getStaticProps` (Static Generation)
 
+<details>
+  <summary><b>Version History</b></summary>
+
+| Version   | Changes                                                                                                           |
+| --------- | ----------------------------------------------------------------------------------------------------------------- |
+| `v10.0.0` | `locale`, `locales`, `defaultLocale`, and `notFound` options added.                                               |
+| `v9.5.0`  | Stable [Incremental Static Regeneration](https://nextjs.org/blog/next-9-5#stable-incremental-static-regeneration) |
+| `v9.3.0`  | `getStaticProps` introduced.                                                                                      |
+
+</details>
+
 If you export an `async` function called `getStaticProps` from a page, Next.js will pre-render this page at build time using the props returned by `getStaticProps`.
 
 ```jsx
@@ -364,6 +375,16 @@ This use case is supported by Next.js by the feature called **Preview Mode**. Le
 
 ## `getStaticPaths` (Static Generation)
 
+<details>
+  <summary><b>Version History</b></summary>
+
+| Version  | Changes                                                                                                           |
+| -------- | ----------------------------------------------------------------------------------------------------------------- |
+| `v9.5.0` | Stable [Incremental Static Regeneration](https://nextjs.org/blog/next-9-5#stable-incremental-static-regeneration) |
+| `v9.3.0` | `getStaticPaths` introduced.                                                                                      |
+
+</details>
+
 If a page has dynamic routes ([documentation](/docs/routing/dynamic-routes.md)) and uses `getStaticProps` it needs to define a list of paths that have to be rendered to HTML at build time.
 
 If you export an `async` function called `getStaticPaths` from a page that uses dynamic routes, Next.js will statically pre-render all the paths specified by `getStaticPaths`.
@@ -453,7 +474,7 @@ export default Post
 <details>
   <summary><b>Examples</b></summary>
   <ul>
-    <li><a href="https://static-tweet.now.sh">Static generation of a large number of pages</a></li>
+    <li><a href="https://static-tweet.vercel.app">Static generation of a large number of pages</a></li>
   </ul>
 </details>
 
@@ -587,6 +608,16 @@ In development (`next dev`), `getStaticPaths` will be called on every request.
 
 ## `getServerSideProps` (Server-side Rendering)
 
+<details>
+  <summary><b>Version History</b></summary>
+
+| Version   | Changes                                                             |
+| --------- | ------------------------------------------------------------------- |
+| `v10.0.0` | `locale`, `locales`, `defaultLocale`, and `notFound` options added. |
+| `v9.3.0`  | `getServerSideProps` introduced.                                    |
+
+</details>
+
 If you export an `async` function called `getServerSideProps` from a page, Next.js will pre-render this page on each request using the data returned by `getServerSideProps`.
 
 ```js

docs/basic-features/environment-variables.md

@@ -81,7 +81,7 @@ In order to expose a variable to the browser you have to prefix the variable wit
 NEXT_PUBLIC_ANALYTICS_ID=abcdefghijk
 ```
 
-This loads `process.env.NEXT_PUBLIC_ANALYTICS_ID` into the Node.js environment automatically. Allowing you to use it anywhere in your code. The value will be inlined into JavaScript sent to the browser because of the `NEXT_PUBLIC_` prefix.
+This loads `process.env.NEXT_PUBLIC_ANALYTICS_ID` into the Node.js environment automatically, allowing you to use it anywhere in your code. The value will be inlined into JavaScript sent to the browser because of the `NEXT_PUBLIC_` prefix.
 
 ```js
 // pages/index.js

docs/basic-features/image-optimization.md

@@ -59,7 +59,7 @@ In addition to [using properties](/docs/api-reference/next/image.md) available t
 ### Domains
 
 To enable Image Optimization for images hosted on an external website, use an absolute url for the Image `src` and specify which
-`domains` are allowed to be optimized. This is needed to ensure that external urls can't be abused.
+`domains` are allowed to be optimized. This is needed to ensure that external urls can't be abused. When `loader` is set to an external image service, this option is ignored.
 
 ```js
 module.exports = {

docs/deployment.md

@@ -10,7 +10,7 @@ The easiest way to deploy Next.js to production is to use the **[Vercel platform
 
 ### Getting started
 
-If you haven’t already done so, push your Next.js app to a Git provider of your choice: [GitHub](http://github.com/), [GitLab](https://gitlab.com/), or [BitBucket](https://bitbucket.org/). Your repository can be private or public.
+If you haven’t already done so, push your Next.js app to a Git provider of your choice: [GitHub](https://github.com/), [GitLab](https://gitlab.com/), or [BitBucket](https://bitbucket.org/). Your repository can be private or public.
 
 Then, follow these steps:
 
@@ -29,7 +29,7 @@ Let’s talk about the workflow we recommend using. [Vercel](https://vercel.com)
 
 - **Develop:** Write code in Next.js. Keep the development server running and take advantage of [React Fast Refresh](https://nextjs.org/blog/next-9-4#fast-refresh).
 - **Preview:** Every time you push changes to a branch on GitHub / GitLab / BitBucket, Vercel automatically creates a new deployment with a unique URL. You can view them on GitHub when you open a pull request, or under “Preview Deployments” on your project page on Vercel. [Learn more about it here](https://vercel.com/features/deployment-previews).
-- **Ship:** When you’re ready to ship, merge the pull request to your default branch (e.g. `master`). Vercel will automatically create a production deployment.
+- **Ship:** When you’re ready to ship, merge the pull request to your default branch (e.g. `main`). Vercel will automatically create a production deployment.
 
 By using the DPS workflow, in addition to doing _code reviews_, you can do _deployment previews_. Each deployment creates a unique URL that can be shared or used for integration tests.
 
@@ -50,6 +50,14 @@ For example, the [hybrid pages](/docs/basic-features/pages.md) approach is fully
 - **Automatic HTTPS:** HTTPS is enabled by default (including custom domains) and doesn't require extra configuration. We auto-renew SSL certificates.
 - **More:** [Read our documentation](https://vercel.com/docs) to learn more about the Vercel platform.
 
+## Automatic Updates
+
+When you deploy your Next.js application, you want to see the latest version without needing to reload.
+
+Next.js will automatically load the latest version of your application in the background when routing. For client-side navigation, `next/link` will temporarily function as a normal `<a>` tag.
+
+If a new page (with an old version) has already been prefetched by `next/link`, Next.js will use the old version. Then, after either a full page refresh or multiple client-side transitions, Next.js will show the latest version.
+
 ## Other hosting options
 
 ### Node.js Server

docs/manifest.json

@@ -181,6 +181,10 @@
               "title": "Debugging",
               "path": "/docs/advanced-features/debugging.md"
             },
+            {
+              "title": "Source Maps",
+              "path": "/docs/advanced-features/source-maps.md"
+            },
             {
               "title": "Codemods",
               "path": "/docs/advanced-features/codemods.md"

docs/routing/introduction.md

@@ -36,7 +36,7 @@ To match a dynamic segment you can use the bracket syntax. This allows you to ma
 
 ## Linking between pages
 
-The Next.js router allows you to do client-side route transitions between pages, similarly to a single-page application.
+The Next.js router allows you to do client-side route transitions between pages, similar to a single-page application.
 
 A React component called `Link` is provided to do this client-side route transition.
 

errors/invalid-webpack-5-version.md

@@ -0,0 +1,13 @@
+# Invalid webpack 5 version
+
+#### Why This Error Occurred
+
+While leveraging webpack 5 support in Next.js the minimum required version of `v5.11.1` was not met. This version is needed while leveraging webpack 5 support with Next.js as early versions are missing patches that cause unexpected behavior.
+
+#### Possible Ways to Fix It
+
+Upgrade the version of webpack 5 being used with Next.js to at least `v5.11.1` by updating your resolutions field for `webpack` in your `package.json`.
+
+### Useful Links
+
+- [Yarn Selective Dependency Resolutions Documentation](https://classic.yarnpkg.com/en/docs/selective-version-resolutions/)