merge conflicts

bench/nested-deps/next.config.js

@@ -1,9 +1,9 @@
+const idx = process.execArgv.indexOf('--cpu-prof')
+if (idx >= 0) process.execArgv.splice(idx, 1)
+
 module.exports = {
   eslint: {
     ignoreDuringBuilds: true,
   },
-  experimental: {
-    swcLoader: true,
-    swcMinify: true,
-  },
+  swcMinify: true,
 }

bench/nested-deps/package.json

@@ -1,11 +1,11 @@
 {
   "scripts": {
-    "prepare": "rm -rf components && mkdir components && node ./fuzzponent.js -d 2 -s 206 -o components",
-    "dev": "cross-env NEXT_PRIVATE_LOCAL_WEBPACK5=1 ../../node_modules/.bin/next dev",
-    "build": "cross-env NEXT_PRIVATE_LOCAL_WEBPACK5=1 ../../node_modules/.bin/next build",
-    "start": "cross-env NEXT_PRIVATE_LOCAL_WEBPACK5=1 ../../node_modules/.bin/next start",
-    "dev-nocache": "rm -rf .next && yarn dev",
-    "dev-cpuprofile-nocache": "rm -rf .next && cross-env NEXT_PRIVATE_LOCAL_WEBPACK5=1 node --cpu-prof ../../node_modules/.bin/next",
-    "build-nocache": "rm -rf .next && yarn build"
+    "prepare": "rimraf components && mkdir components && node ./fuzzponent.js -d 2 -s 206 -o components",
+    "dev": "cross-env NEXT_PRIVATE_LOCAL_WEBPACK5=1 node ../../node_modules/next/dist/bin/next dev",
+    "build": "cross-env NEXT_PRIVATE_LOCAL_WEBPACK5=1 node ../../node_modules/next/dist/bin/next build",
+    "start": "cross-env NEXT_PRIVATE_LOCAL_WEBPACK5=1 node ../../node_modules/next/dist/bin/next start",
+    "dev-nocache": "rimraf .next && yarn dev",
+    "dev-cpuprofile-nocache": "rimraf .next && cross-env NEXT_PRIVATE_LOCAL_WEBPACK5=1 node --cpu-prof ../../node_modules/next/dist/bin/next",
+    "build-nocache": "rimraf .next && yarn build"
   }
 }

docs/advanced-features/i18n-routing.md

@@ -100,6 +100,8 @@ module.exports = {
 
     domains: [
       {
+        // Note: subdomains must be included in the domain value to be matched
+        // e.g. www.example.com should be used if that is the expected hostname
         domain: 'example.com',
         defaultLocale: 'en-US',
       },
@@ -122,6 +124,7 @@ module.exports = {
 For example if you have `pages/blog.js` the following urls will be available:
 
 - `example.com/blog`
+- `www.example.com/blog`
 - `example.fr/blog`
 - `example.nl/blog`
 - `example.nl/nl-BE/blog`

docs/api-reference/next.config.js/url-imports.md

@@ -45,7 +45,7 @@ These resources will have a `no-cache` entry in the lockfile and will always be
 
 ## Examples
 
-#### Skypack
+### Skypack
 
 ```js
 import confetti from 'https://cdn.skypack.dev/canvas-confetti'
@@ -59,7 +59,7 @@ export default () => {
 }
 ```
 
-#### Static Image Imports
+### Static Image Imports
 
 ```js
 import Image from 'next/image'
@@ -72,15 +72,15 @@ export default () => (
 )
 ```
 
-#### URLs in CSS
+### URLs in CSS
 
 ```css
 .className {
   background: url('https://github.com/vercel/next.js/raw/canary/test/integration/production/public/vercel.png');
 }
 ```
 
-#### Asset Imports
+### Asset Imports
 
 ```js
 import Image from 'next/image'

docs/api-reference/next/image.md

@@ -119,9 +119,11 @@ const MyImage = (props) => {
 
 A string that provides information about how wide the image will be at different breakpoints. Defaults to `100vw` (the full width of the screen) when using `layout="responsive"` or `layout="fill"`.
 
-`sizes` is important for performance when using `layout="responsive"` or `layout="fill"` with images that take up less than the full viewport width.
+If you are using `layout="fill"` or `layout="responsive"`, it's important to assign `sizes` for any image that takes up less than the full viewport width.
 
-If you are using `layout="fill"` or `layout="responsive"` and the image will always be less than half the viewport width, include `sizes="50vw"`. Without `sizes`, the image will be sent at twice the necessary resolution, decreasing performance.
+For example, when the parent element will constrain the image to always be less than half the viewport width, use `sizes="50vw"`. Without `sizes`, the image will be sent at twice the necessary resolution, decreasing performance.
+
+If you are using `layout="intrinsic"` or `layout="fixed"`, then `sizes` is not needed because the upperbound width is constrained already.
 
 [Learn more](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-sizes).
 

docs/api-reference/next/script.md

@@ -0,0 +1,70 @@
+---
+description: Optimize loading of third-party scripts with the built-in Script component.
+---
+
+# next/script
+
+<details>
+  <summary><b>Examples</b></summary>
+  <ul>
+    <li><a href="https://github.com/vercel/next.js/tree/canary/examples/with-google-tag-manager">Google Tag Manager</a></li>
+    <li><a href="https://github.com/vercel/next.js/tree/canary/examples/with-google-analytics">Google Analytics</a></li>
+    <li><a href="https://github.com/vercel/next.js/tree/canary/examples/with-facebook-pixel">Facebook Pixel</a></li>
+    <li><a href="https://github.com/vercel/next.js/tree/canary/examples/with-clerk">Clerk</a></li>
+    <li><a href="https://github.com/vercel/next.js/tree/canary/examples/with-segment-analytics">Segment Analytics</a></li>
+  </ul>
+</details>
+
+<details>
+  <summary><b>Version History</b></summary>
+
+| Version   | Changes                   |
+| --------- | ------------------------- |
+| `v11.0.0` | `next/script` introduced. |
+
+</details>
+
+> **Note: This is API documentation for the Script Component. For a feature overview and usage information for scripts in Next.js, please see [Script Optimization](/docs/basic-features/script.md).**
+
+## Optional Props
+
+### src
+
+A path string specifying the URL of an external script. This can be either an absolute external URL or an internal path.
+
+### strategy
+
+The loading strategy of the script.
+
+| `strategy`          | **Description**                                            |
+| ------------------- | ---------------------------------------------------------- |
+| `beforeInteractive` | Load script before the page becomes interactive            |
+| `afterInteractive`  | Load script immediately after the page becomes interactive |
+| `lazyOnload`        | Load script during browser idle time                       |
+
+### onLoad
+
+A method that returns additional JavaScript that should be executed after the script has finished loading.
+
+The following is an example of how to use the `onLoad` property:
+
+```jsx
+import { useState } from 'react'
+import Script from 'next/script'
+
+export default function Home() {
+  const [stripe, setStripe] = useState(null)
+
+  return (
+    <>
+      <Script
+        id="stripe-js"
+        src="https://js.stripe.com/v3/"
+        onLoad={() => {
+          setStripe({ stripe: window.Stripe('pk_test_12345') })
+        }}
+      />
+    </>
+  )
+}
+```