diff --git a/bench/nested-deps/next.config.js b/bench/nested-deps/next.config.js
index d06b18cf4e29c54..004e6c18198b624 100644
--- a/bench/nested-deps/next.config.js
+++ b/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,
}
diff --git a/bench/nested-deps/package.json b/bench/nested-deps/package.json
index d025ab2b2ad3cae..ad48206bed2d183 100644
--- a/bench/nested-deps/package.json
+++ b/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"
}
}
diff --git a/docs/advanced-features/i18n-routing.md b/docs/advanced-features/i18n-routing.md
index cf9a6fdbaf95b2b..8272276b47418b7 100644
--- a/docs/advanced-features/i18n-routing.md
+++ b/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`
diff --git a/docs/api-reference/next.config.js/url-imports.md b/docs/api-reference/next.config.js/url-imports.md
index a134fd972781d96..bb50c6ffe6b101c 100644
--- a/docs/api-reference/next.config.js/url-imports.md
+++ b/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,7 +72,7 @@ export default () => (
)
```
-#### URLs in CSS
+### URLs in CSS
```css
.className {
@@ -80,7 +80,7 @@ export default () => (
}
```
-#### Asset Imports
+### Asset Imports
```js
import Image from 'next/image'
diff --git a/docs/api-reference/next/image.md b/docs/api-reference/next/image.md
index 958a3e116e320df..957e53c43917d14 100644
--- a/docs/api-reference/next/image.md
+++ b/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).
diff --git a/docs/api-reference/next/script.md b/docs/api-reference/next/script.md
new file mode 100644
index 000000000000000..49fe558c6b16392
--- /dev/null
+++ b/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
+
+
+ Examples
+
+
+
+
+ Version History
+
+| Version | Changes |
+| --------- | ------------------------- |
+| `v11.0.0` | `next/script` introduced. |
+
+
+
+> **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 (
+ <>
+
```
+Or by using the `dangerouslySetInnerHTML` property:
+
+```jsx
+
+```
+
+There are two limitations to be aware of when using the Script component for inline scripts:
+
+- Only the `afterInteractive` and `lazyOnload` strategies can be used. The `beforeInteractive` loading strategy injects the contents of an external script into the initial HTML response. Inline scripts already do this, which is why **the `beforeInteractive` strategy cannot be used with inline scripts.**
+- An `id` attribute must be defined in order for Next.js to track and optimize the script
+
### Executing Code After Loading (`onLoad`)
-```js
+Some third-party scripts require users to run JavaScript code after the script has finished loading in order to instantiate content or call a function. If you are loading a script with either `beforeInteractive` or `afterInteractive` as a loading strategy, you can execute code after it has loaded using the `onLoad` property:
+
+```jsx
import { useState } from 'react'
import Script from 'next/script'
@@ -129,28 +173,11 @@ export default function Home() {
}
```
-### Inline Scripts
-
-```js
-import Script from 'next/script'
-
-
-
-// or
-
-
-```
+### Additional Attributes
-### Forwarding Attributes
+There are many DOM attributes that can be assigned to a `