Merge branch 'canary' into odr_contentful

.eslintrc.json

@@ -71,6 +71,7 @@
             "functions": false,
             "classes": false,
             "variables": false,
+            "enums": false,
             "typedefs": false
           }
         ],
@@ -106,6 +107,16 @@
     {
       "files": ["examples/**/*"],
       "rules": {
+        "@typescript-eslint/no-use-before-define": [
+          "error",
+          {
+            "functions": true,
+            "classes": true,
+            "variables": true,
+            "enums": true,
+            "typedefs": true
+          }
+        ],
         "import/no-anonymous-default-export": [
           "error",
           {

.github/workflows/build_test_deploy.yml

@@ -1463,7 +1463,7 @@ jobs:
           rm -rf test
       - name: Build
         id: build
-        uses: vmactions/freebsd-vm@v0.2.0
+        uses: vmactions/freebsd-vm@v0.2.3
         env:
           DEBUG: napi:*
           RUSTUP_HOME: /usr/local/rustup
@@ -1493,8 +1493,8 @@ jobs:
             whoami
             env
             freebsd-version
-            npm i -g "@napi-rs/cli@${NAPI_CLI_VERSION}" "turbo@${TURBO_VERSION}" && if [ ! -f $(dirname $(which yarn))/pnpm ]; then ln -s $(which yarn) $(dirname $(which yarn))/pnpm;fi
-            yarn --cwd=packages/next-swc build-native-no-plugin --release --target x86_64-unknown-freebsd
+            npm i -g "@napi-rs/cli@${NAPI_CLI_VERSION}"
+            cd packages/next-swc && napi build --platform -p next-swc-napi --cargo-name next_swc_napi native --release --target x86_64-unknown-freebsd
             rm -rf node_modules
             rm -rf packages/next-swc/target
       - name: Upload artifact

contributing.md

@@ -30,9 +30,9 @@ To develop locally:
    ```
    git checkout -b MY_BRANCH_NAME
    ```
-3. Install pnpm:
+3. Enable pnpm:
    ```
-   npm install -g pnpm
+   corepack enable pnpm
    ```
 4. Install the dependencies with:
    ```

docs/advanced-features/compiler.md

@@ -358,7 +358,7 @@ This transform uses [handlebars](https://docs.rs/handlebars) to template the rep
 
 1. `matches`: Has type `string[]`. All groups matched by the regular expression. `matches.[0]` is the full match.
 2. `member`: Has type `string`. The name of the member import.
-3. `lowerCase`, `upperCase`, `camelCase`: Helper functions to convert a string to lower, upper or camel cases.
+3. `lowerCase`, `upperCase`, `camelCase`, `kebabCase`: Helper functions to convert a string to lower, upper, camel or kebab cases.
 
 ### SWC Trace profiling
 

docs/api-reference/data-fetching/get-server-side-props.md

@@ -33,7 +33,7 @@ The `context` parameter is an object containing the following keys:
 - `params`: If this page uses a [dynamic route](/docs/routing/dynamic-routes.md), `params` contains the route parameters. If the page name is `[id].js` , then `params` will look like `{ id: ... }`.
 - `req`: [The `HTTP` IncomingMessage object](https://nodejs.org/api/http.html#http_class_http_incomingmessage), with an additional `cookies` prop, which is an object with string keys mapping to string values of cookies.
 - `res`: [The `HTTP` response object](https://nodejs.org/api/http.html#http_class_http_serverresponse).
-- `query`: An object representing the query string.
+- `query`: An object representing the query string, including dynamic route parameters.
 - `preview`: `preview` is `true` if the page is in the [Preview Mode](/docs/advanced-features/preview-mode.md) and `false` otherwise.
 - `previewData`: The [preview](/docs/advanced-features/preview-mode.md) data set by `setPreviewData`.
 - `resolvedUrl`: A normalized version of the request `URL` that strips the `_next/data` prefix for client transitions and includes original query values.

docs/api-reference/next/future/image.md

@@ -43,19 +43,9 @@ Compared to `next/image`, the new `next/future/image` component has the followin
 
 ## Migration
 
-Although `layout` is not available, you can migrate `next/image` to `next/future/image` using a few props. The following is a comparison of the two components:
+Although `layout` is not available, you can migrate `next/image` to `next/future/image` using a few props. The following code snippets compare the two components:
 
-<table>
-<thead>
-  <tr>
-    <th>next/image</th>
-    <th>next/future/image</th>
-  </tr>
-</thead>
-<tbody>
-
-<tr>
-<td>
+#### before: `next/image`
 
 ```jsx
 import Image from 'next/image'
@@ -66,8 +56,7 @@ function Page() {
 }
 ```
 
-</td>
-<td>
+#### after: `next/future/image`
 
 ```jsx
 import Image from 'next/future/image'
@@ -79,11 +68,7 @@ function Page() {
 }
 ```
 
-</td>
-</tr>
-
-<tr>
-<td>
+#### before: `next/image`
 
 ```jsx
 import Image from 'next/image'
@@ -94,8 +79,7 @@ function Page() {
 }
 ```
 
-</td>
-<td>
+#### after: `next/future/image`
 
 ```jsx
 import Image from 'next/future/image'
@@ -107,11 +91,7 @@ function Page() {
 }
 ```
 
-</td>
-</tr>
-
-<tr>
-<td>
+#### before: `next/image`
 
 ```jsx
 import Image from 'next/image'
@@ -122,8 +102,7 @@ function Page() {
 }
 ```
 
-</td>
-<td>
+#### after: `next/future/image`
 
 ```jsx
 import Image from 'next/future/image'
@@ -134,11 +113,7 @@ function Page() {
 }
 ```
 
-</td>
-</tr>
-
-<tr>
-<td>
+#### before: `next/image`
 
 ```jsx
 import Image from 'next/image'
@@ -149,8 +124,7 @@ function Page() {
 }
 ```
 
-</td>
-<td>
+#### after: `next/future/image`
 
 ```jsx
 import Image from 'next/future/image'
@@ -161,12 +135,6 @@ function Page() {
 }
 ```
 
-</td>
-</tr>
-
-</tbody>
-</table>
-
 You can also use `className` instead of `style`.
 
 ## Required Props
@@ -251,11 +219,37 @@ See also:
 
 ### sizes
 
-A string that provides information about how wide the image will be at different breakpoints.
+A string that provides information about how wide the image will be at different breakpoints. The value of `sizes` will greatly affect performance for images using [`fill`](#fill) or which are styled to have a responsive size.
+
+The `sizes` property serves two important purposes related to image performance:
+
+First, the value of `sizes` is used by the browser to determine which size of the image to download, from `next/future/image`'s automatically-generated source set. When the browser chooses, it does not yet know the size of the image on the page, so it selects an image that is the same size or larger than the viewport. The `sizes` property allows you to tell the browser that the image will actually be smaller than full screen. If you don't specify a `sizes` value in an image with the `fill` property, a default value of `100vw` (full screen width) is used.
+
+Second, the `sizes` property configures how `next/future/image` automatically generates an image source set. If no `sizes` value is present, a small source set is generated, suitable for a fixed-size image. If `sizes` is defined, a large source set is generated, suitable for a responsive image. If the `sizes` property includes sizes such as `50vw`, which represent a percentage of the viewport width, then the source set is trimmed to not include any values which are too small to ever be necessary.
+
+For example, if you know your styling will cause an image to be full-width on mobile devices, in a 2-column layout on tablets, and a 3-column layout on desktop displays, you should include a sizes property such as the following:
+
+```js
+import Image from 'next/image'
+const Example = () => (
+  <div className="grid-element">
+    <Image
+      src="/example.png"
+      layout="fill"
+      sizes="(min-width: 75em) 33vw,
+              (min-width: 48em) 50vw,
+              100vw"
+    />
+  </div>
+)
+```
+
+This example `sizes` could have a dramatic effect on performance metrics. Without the `33vw` sizes, the image selected from the server would be 3 times as wide as it needs to be. Because file size is proportional to the square of the width, without `sizes` the user would download an image that's 9 times larger than necessary.
 
-It's important to assign `sizes` for responsive images that takes up less than the full viewport width. 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.
+Learn more about `srcset` and `sizes`:
 
-[Learn more](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-sizes).
+- [web.dev](https://web.dev/learn/design/responsive-images/#sizes)
+- [mdn](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-sizes)
 
 ### quality
 

docs/api-reference/next/image.md

@@ -131,15 +131,37 @@ const MyImage = (props) => {
 
 ### sizes
 
-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"`.
+A string that provides information about how wide the image will be at different breakpoints. The value of `sizes` will greatly affect performance for images using `layout="responsive"` or `layout="fill"`. It will be ignored for images using `layout="intrinsic"` or `layout="fixed"`.
 
-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.
+The `sizes` property serves two important purposes related to image 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.
+First, the value of `sizes` is used by the browser to determine which size of the image to download, from `next/image`'s automatically-generated source set. When the browser chooses, it does not yet know the size of the image on the page, so it selects an image that is the same size or larger than the viewport. The `sizes` property allows you to tell the browser that the image will actually be smaller than full screen. If you don't specify a `sizes` value, a default value of `100vw` (full screen width) is used.
 
-If you are using `layout="intrinsic"` or `layout="fixed"`, then `sizes` is not needed because the upper bound width is constrained already.
+Second, the `sizes` value is parsed and used to trim the values in the automatically-created source set. If the `sizes` property includes sizes such as `50vw`, which represent a percentage of the viewport width, then the source set is trimmed to not include any values which are too small to ever be necessary.
 
-[Learn more](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-sizes).
+For example, if you know your styling will cause an image to be full-width on mobile devices, in a 2-column layout on tablets, and a 3-column layout on desktop displays, you should include a sizes property such as the following:
+
+```js
+import Image from 'next/image'
+const Example = () => (
+  <div className="grid-element">
+    <Image
+      src="/example.png"
+      layout="fill"
+      sizes="(min-width: 75em) 33vw,
+              (min-width: 48em) 50vw,
+              100vw"
+    />
+  </div>
+)
+```
+
+This example `sizes` could have a dramatic effect on performance metrics. Without the `33vw` sizes, the image selected from the server would be 3 times as wide as it needs to be. Because file size is proportional to the square of the width, without `sizes` the user would download an image that's 9 times larger than necessary.
+
+Learn more about `srcset` and `sizes`:
+
+- [web.dev](https://web.dev/learn/design/responsive-images/#sizes)
+- [mdn](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-sizes)
 
 ### quality
 

docs/api-reference/next/router.md

@@ -248,14 +248,16 @@ export default function Page() {
 
 Prefetch pages for faster client-side transitions. This method is only useful for navigations without [`next/link`](/docs/api-reference/next/link.md), as `next/link` takes care of prefetching pages automatically.
 
-> This is a production only feature. Next.js doesn't prefetch pages on development.
+> This is a production only feature. Next.js doesn't prefetch pages in development.
 
 ```jsx
-router.prefetch(url, as)
+router.prefetch(url, as, options)
 ```
 
 - `url` - The URL to prefetch, including explicit routes (e.g. `/dashboard`) and dynamic routes (e.g. `/product/[id]`)
 - `as` - Optional decorator for `url`. Before Next.js 9.5.3 this was used to prefetch dynamic routes, check our [previous docs](https://nextjs.org/docs/tag/v9.5.2/api-reference/next/link#dynamic-routes) to see how it worked
+- `options` - Optional object with the following allowed fields:
+  - `locale` - allows providing a different locale from the active one. If `false`, `url` has to include the locale as the active locale won't be used.
 
 #### Usage
 

errors/manifest.json

@@ -673,8 +673,14 @@
           "path": "/errors/import-next.md"
         },
         {
-          "title": "invalid-getserversideprops-return-value",
-          "path": "/errors/invalid-getserversideprops-return-value.md"
+          "path": "/errors/invalid-getserversideprops-return-value.md",
+          "redirect": {
+            "destination": "/docs/messages/invalid-getserversideprops-value"
+          }
+        },
+        {
+          "title": "invalid-getserversideprops-value",
+          "path": "/errors/invalid-getserversideprops-value.md"
         },
         {
           "title": "no-assign-module-variable",

examples/amp-first/components/amp/AmpCustomElement.tsx

@@ -319,6 +319,10 @@ export function AmpIncludeAmpLinkRewriter() {
   return <AmpIncludeCustomElement name="amp-link-rewriter" version="0.1" />
 }
 
+export function AmpIncludeAmpMustache() {
+  return <AmpIncludeCustomTemplate name="amp-mustache" version="0.2" />
+}
+
 export function AmpIncludeAmpList() {
   return (
     <>
@@ -350,10 +354,6 @@ export function AmpIncludeAmpMowplayer() {
   return <AmpIncludeCustomElement name="amp-mowplayer" version="0.1" />
 }
 
-export function AmpIncludeAmpMustache() {
-  return <AmpIncludeCustomTemplate name="amp-mustache" version="0.2" />
-}
-
 export function AmpIncludeAmpNextPage() {
   return <AmpIncludeCustomElement name="amp-next-page" version="0.1" />
 }

examples/amp-first/components/amp/AmpScript.tsx

@@ -10,6 +10,13 @@ type AmpScriptProps = {
   src?: string
 }
 
+const generateInlineScript = (script: Function | string) => {
+  if (typeof script === 'function') {
+    return `${script.toString()}()`
+  }
+  return String(script)
+}
+
 /**
  * Embeds an AMP Script by either linking to a TS `src` file or embedding inline
  * AMP Script via the `script` property. The inline script hash will automatically
@@ -42,10 +49,3 @@ const AmpScript: React.FC<AmpScriptProps> = ({
 }
 
 export default AmpScript
-
-const generateInlineScript = (script: Function | string) => {
-  if (typeof script === 'function') {
-    return `${script.toString()}()`
-  }
-  return String(script)
-}

examples/cms-agilitycms/lib/components/rich-text-area.tsx

@@ -1,3 +1,7 @@
+const setHTML = (textblob) => {
+  return { __html: textblob }
+}
+
 export default function RichTextArea({ fields }) {
   const { textblob } = fields
   return (
@@ -7,7 +11,3 @@ export default function RichTextArea({ fields }) {
     />
   )
 }
-
-const setHTML = (textblob) => {
-  return { __html: textblob }
-}