Merge branch 'canary' into chore/upgrade-jest

.github/actions/validate-docs-links/src/index.ts

@@ -189,7 +189,7 @@ async function prepareDocumentMapEntry(
 // Checks if the links point to existing documents
 function validateInternalLink(errors: Errors, href: string): void {
   // /docs/api/example#heading -> ["api/example", "heading""]
-  const [link, hash] = href.replace(DOCS_PATH, '').split('#')
+  const [link, hash] = href.replace(DOCS_PATH, '').split('#', 2)
 
   let foundPage
 

docs/02-app/01-building-your-application/06-optimizing/04-metadata.mdx

@@ -248,10 +248,10 @@ The `ImageResponse` constructor allows you to generate dynamic images using JSX
 
 `ImageResponse` uses the [Edge Runtime](/docs/app/building-your-application/rendering/edge-and-nodejs-runtimes#edge-runtime), and Next.js automatically adds the correct headers to cached images at the edge, helping improve performance and reducing recomputation.
 
-To use it, you can import `ImageResponse` from `next/server`:
+To use it, you can import `ImageResponse` from `next/og`:
 
 ```jsx filename="app/about/route.js"
-import { ImageResponse } from 'next/server'
+import { ImageResponse } from 'next/og'
 
 export const runtime = 'edge'
 

docs/02-app/02-api-reference/01-components/image.mdx

@@ -40,24 +40,24 @@ export default function Page() {
 Here's a summary of the props available for the Image Component:
 
 <div style={{ overflowX: 'auto', width: '100%' }}>
-| Prop                                      | Example                              | Type            | Status     |
-| ----------------------------------------- | ------------------------------------ | --------------- | ---------- |
-| [`src`](#src)                             | `src="/profile.png"`                 | String          | Required   |
-| [`width`](#width)                         | `width={500}`                        | Integer (px)    | Required   |
-| [`height`](#height)                       | `height={500}`                       | Integer (px)    | Required   |
-| [`alt`](#alt)                             | `alt="Picture of the author"`        | String          | Required   |
-| [`loader`](#loader)                       | `loader={imageLoader}`               | Function        | -          |
-| [`fill`](#fill)                           | `fill={true}`                        | Boolean         | -          |
-| [`sizes`](#sizes)                         | `sizes="(max-width: 768px) 100vw"`   | String          | -          |
-| [`quality`](#quality)                     | `quality={80}`                       | Integer (1-100) | -          |
-| [`priority`](#priority)                   | `priority={true}`                    | Boolean         | -          |
-| [`placeholder`](#placeholder)             | `placeholder="blur"`                 | String          | -          |
-| [`style`](#style)                         | `style={{objectFit: "contain"}}`     | Object          | -          |
-| [`onLoadingComplete`](#onloadingcomplete) | `onLoadingComplete={img => done())}` | Function        | Deprecated |
-| [`onLoad`](#onload)                       | `onLoad={event => done())}`          | Function        | -          |
-| [`onError`](#onerror)                     | `onError(event => fail()}`           | Function        | -          |
-| [`loading`](#loading)                     | `loading="lazy"`                     | String          | -          |
-| [`blurDataURL`](#blurdataurl)             | `blurDataURL="data:image/jpeg..."`   | String          | -          |
+| Prop                                      | Example                                  | Type            | Status     |
+| ----------------------------------------- | ---------------------------------------- | --------------- | ---------- |
+| [`src`](#src)                             | `src="/profile.png"`                     | String          | Required   |
+| [`width`](#width)                         | `width={500}`                            | Integer (px)    | Required   |
+| [`height`](#height)                       | `height={500}`                           | Integer (px)    | Required   |
+| [`alt`](#alt)                             | `alt="Picture of the author"`            | String          | Required   |
+| [`loader`](#loader)                       | `loader={imageLoader}`                   | Function        | -          |
+| [`fill`](#fill)                           | `fill={true}`                            | Boolean         | -          |
+| [`sizes`](#sizes)                         | `sizes="(max-width: 768px) 100vw, 33vw"` | String          | -          |
+| [`quality`](#quality)                     | `quality={80}`                           | Integer (1-100) | -          |
+| [`priority`](#priority)                   | `priority={true}`                        | Boolean         | -          |
+| [`placeholder`](#placeholder)             | `placeholder="blur"`                     | String          | -          |
+| [`style`](#style)                         | `style={{objectFit: "contain"}}`         | Object          | -          |
+| [`onLoadingComplete`](#onloadingcomplete) | `onLoadingComplete={img => done())}`     | Function        | Deprecated |
+| [`onLoad`](#onload)                       | `onLoad={event => done())}`              | Function        | -          |
+| [`onError`](#onerror)                     | `onError(event => fail()}`               | Function        | -          |
+| [`loading`](#loading)                     | `loading="lazy"`                         | String          | -          |
+| [`blurDataURL`](#blurdataurl)             | `blurDataURL="data:image/jpeg..."`       | String          | -          |
 </div>
 
 ## Required Props

docs/02-app/02-api-reference/02-file-conventions/01-metadata/app-icons.mdx

@@ -78,10 +78,10 @@ Generate an app icon by creating an `icon` or `apple-icon` route that default ex
 | `icon`          | `.js`, `.ts`, `.tsx` |
 | `apple-icon`    | `.js`, `.ts`, `.tsx` |
 
-The easiest way to generate an icon is to use the [`ImageResponse`](/docs/app/api-reference/functions/image-response) API from `next/server`.
+The easiest way to generate an icon is to use the [`ImageResponse`](/docs/app/api-reference/functions/image-response) API from `next/og`.
 
 ```tsx filename="app/icon.tsx" switcher
-import { ImageResponse } from 'next/server'
+import { ImageResponse } from 'next/og'
 
 // Route segment config
 export const runtime = 'edge'

docs/02-app/02-api-reference/02-file-conventions/01-metadata/opengraph-image.mdx

@@ -90,7 +90,7 @@ Generate a route segment's shared image by creating an `opengraph-image` or `twi
 The easiest way to generate an image is to use the [ImageResponse](/docs/app/api-reference/functions/image-response) API from `next/server`.
 
 ```tsx filename="app/about/opengraph-image.tsx" switcher
-import { ImageResponse } from 'next/server'
+import { ImageResponse } from 'next/og'
 
 // Route segment config
 export const runtime = 'edge'
@@ -342,7 +342,7 @@ This example uses the `params` object and external data to generate the image.
 > By default, this generated image will be [statically optimized](/docs/app/building-your-application/rendering/server-components#static-rendering-default). You can configure the individual `fetch` [`options`](/docs/app/api-reference/functions/fetch) or route segments [options](/docs/app/api-reference/file-conventions/route-segment-config#revalidate) to change this behavior.
 
 ```tsx filename="app/posts/[slug]/opengraph-image.tsx" switcher
-import { ImageResponse } from 'next/server'
+import { ImageResponse } from 'next/og'
 
 export const runtime = 'edge'
 
@@ -382,7 +382,7 @@ export default async function Image({ params }: { params: { slug: string } }) {
 ```
 
 ```jsx filename="app/posts/[slug]/opengraph-image.js" switcher
-import { ImageResponse } from 'next/server'
+import { ImageResponse } from 'next/og'
 
 export const runtime = 'edge'
 

docs/02-app/02-api-reference/04-functions/generate-image-metadata.mdx

@@ -54,7 +54,7 @@ The `generateImageMetadata` function should return an `array` of objects contain
 | `contentType`         | `string`                            |
 
 ```tsx filename="icon.tsx" switcher
-import { ImageResponse } from 'next/server'
+import { ImageResponse } from 'next/og'
 
 export function generateImageMetadata() {
   return [
@@ -94,7 +94,7 @@ export default function Icon({ id }: { id: string }) {
 ```
 
 ```jsx filename="icon.js" switcher
-import { ImageResponse } from 'next/server'
+import { ImageResponse } from 'next/og'
 
 export function generateImageMetadata() {
   return [
@@ -140,7 +140,7 @@ export default function Icon({ id }) {
 This example uses the `params` object and external data to generate multiple [Open Graph images](/docs/app/api-reference/file-conventions/metadata/opengraph-image) for a route segment.
 
 ```tsx filename="app/products/[id]/opengraph-image.tsx" switcher
-import { ImageResponse } from 'next/server'
+import { ImageResponse } from 'next/og'
 import { getCaptionForImage, getOGImages } from '@/app/utils/images'
 
 export async function generateImageMetadata({
@@ -186,7 +186,7 @@ export default async function Image({
 ```
 
 ```jsx filename="app/products/[id]/opengraph-image.js" switcher
-import { ImageResponse } from 'next/server'
+import { ImageResponse } from 'next/og'
 import { getCaptionForImage, getOGImages } from '@/app/utils/images'
 
 export async function generateImageMetadata({ params }) {

docs/02-app/02-api-reference/04-functions/image-response.mdx

@@ -8,7 +8,7 @@ The `ImageResponse` constructor allows you to generate dynamic images using JSX
 The following options are available for `ImageResponse`:
 
 ```jsx
-import { ImageResponse } from 'next/server'
+import { ImageResponse } from 'next/og'
 
 new ImageResponse(
   element: ReactElement,
@@ -38,7 +38,8 @@ Please refer to [Satori’s documentation](https://github.com/vercel/satori#css)
 
 ## Version History
 
-| Version   | Changes                                              |
-| --------- | ---------------------------------------------------- |
-| `v13.3.0` | `ImageResponse` can be imported from `next/server`.  |
-| `v13.0.0` | `ImageResponse` introduced via `@vercel/og` package. |
+| Version   | Changes                                               |
+| --------- | ----------------------------------------------------- |
+| `v14.0.0` | `ImageResponse` moved from `next/server` to `next/og` |
+| `v13.3.0` | `ImageResponse` can be imported from `next/server`.   |
+| `v13.0.0` | `ImageResponse` introduced via `@vercel/og` package.  |

errors/duplicate-sass.mdx

@@ -5,9 +5,9 @@ title: Duplicate Sass Dependencies
 ## Why This Error Occurred
 
 Your project has a direct dependency on both `sass` and `node-sass`, two
-different package that both compile Sass files!
+different packages that both compile Sass files!
 
-Next.js will only use one of these, so it is suggested you remove one or the
+Next.js will only use one of these, so it is suggested that you remove one or the
 other.
 
 ## Possible Ways to Fix It

examples/active-class-name/.gitignore

@@ -4,6 +4,7 @@
 /node_modules
 /.pnp
 .pnp.js
+.yarn/install-state.gz
 
 # testing
 /coverage

examples/amp-first/.gitignore

@@ -4,6 +4,7 @@
 /node_modules
 /.pnp
 .pnp.js
+.yarn/install-state.gz
 
 # testing
 /coverage

examples/amp-story/.gitignore

@@ -4,6 +4,7 @@
 /node_modules
 /.pnp
 .pnp.js
+.yarn/install-state.gz
 
 # testing
 /coverage

examples/amp/.gitignore

@@ -4,6 +4,7 @@
 /node_modules
 /.pnp
 .pnp.js
+.yarn/install-state.gz
 
 # testing
 /coverage

examples/analyze-bundles/.gitignore

@@ -4,6 +4,7 @@
 /node_modules
 /.pnp
 .pnp.js
+.yarn/install-state.gz
 
 # testing
 /coverage

examples/api-routes-apollo-server-and-client-auth/.gitignore

@@ -4,6 +4,7 @@
 /node_modules
 /.pnp
 .pnp.js
+.yarn/install-state.gz
 
 # testing
 /coverage

examples/api-routes-apollo-server-and-client/.gitignore

@@ -4,6 +4,7 @@
 /node_modules
 /.pnp
 .pnp.js
+.yarn/install-state.gz
 
 # testing
 /coverage

examples/api-routes-apollo-server/.gitignore

@@ -4,6 +4,7 @@
 /node_modules
 /.pnp
 .pnp.js
+.yarn/install-state.gz
 
 # testing
 /coverage

examples/api-routes-cors/.gitignore

@@ -4,6 +4,7 @@
 /node_modules
 /.pnp
 .pnp.js
+.yarn/install-state.gz
 
 # testing
 /coverage

examples/api-routes-graphql/.gitignore

@@ -4,6 +4,7 @@
 /node_modules
 /.pnp
 .pnp.js
+.yarn/install-state.gz
 
 # testing
 /coverage

examples/api-routes-middleware/.gitignore

@@ -4,6 +4,7 @@
 /node_modules
 /.pnp
 .pnp.js
+.yarn/install-state.gz
 
 # testing
 /coverage

examples/api-routes-rate-limit/.gitignore

@@ -4,6 +4,7 @@
 /node_modules
 /.pnp
 .pnp.js
+.yarn/install-state.gz
 
 # testing
 /coverage

examples/api-routes-rest/.gitignore

@@ -4,6 +4,7 @@
 /node_modules
 /.pnp
 .pnp.js
+.yarn/install-state.gz
 
 # testing
 /coverage

examples/api-routes/.gitignore

@@ -4,6 +4,7 @@
 /node_modules
 /.pnp
 .pnp.js
+.yarn/install-state.gz
 
 # testing
 /coverage

examples/app-dir-i18n-routing/.gitignore

@@ -4,6 +4,7 @@
 /node_modules
 /.pnp
 .pnp.js
+.yarn/install-state.gz
 
 # testing
 /coverage

examples/app-dir-mdx/.gitignore

@@ -4,6 +4,7 @@
 /node_modules
 /.pnp
 .pnp.js
+.yarn/install-state.gz
 
 # testing
 /coverage

examples/auth-with-stytch/.gitignore

@@ -4,6 +4,7 @@
 /node_modules
 /.pnp
 .pnp.js
+.yarn/install-state.gz
 
 # testing
 /coverage

examples/auth0/.gitignore

@@ -4,6 +4,7 @@
 /node_modules
 /.pnp
 .pnp.js
+.yarn/install-state.gz
 
 # testing
 /coverage

examples/authsignal/.gitignore

@@ -4,6 +4,7 @@
 /node_modules
 /.pnp
 .pnp.js
+.yarn/install-state.gz
 
 # testing
 /coverage

examples/authsignal/passwordless-login/.gitignore

@@ -4,6 +4,7 @@
 /node_modules
 /.pnp
 .pnp.js
+.yarn/install-state.gz
 
 # testing
 /coverage

examples/basic-css/.gitignore

@@ -4,6 +4,7 @@
 /node_modules
 /.pnp
 .pnp.js
+.yarn/install-state.gz
 
 # testing
 /coverage

examples/basic-export/.gitignore

@@ -4,6 +4,7 @@
 /node_modules
 /.pnp
 .pnp.js
+.yarn/install-state.gz
 
 # testing
 /coverage

examples/blog-starter-typescript/.gitignore

@@ -4,6 +4,7 @@
 /node_modules
 /.pnp
 .pnp.js
+.yarn/install-state.gz
 
 # testing
 /coverage

examples/blog-starter/.gitignore

@@ -4,6 +4,7 @@
 /node_modules
 /.pnp
 .pnp.js
+.yarn/install-state.gz
 
 # testing
 /coverage

examples/blog-with-comment/.gitignore

@@ -4,6 +4,7 @@
 /node_modules
 /.pnp
 .pnp.js
+.yarn/install-state.gz
 
 # testing
 /coverage

examples/blog/.gitignore

@@ -4,6 +4,7 @@
 /node_modules
 /.pnp
 .pnp.js
+.yarn/install-state.gz
 
 # testing
 /coverage

examples/catch-all-routes/.gitignore

@@ -4,6 +4,7 @@
 /node_modules
 /.pnp
 .pnp.js
+.yarn/install-state.gz
 
 # testing
 /coverage

examples/cloudflare-turnstile/.gitignore

@@ -4,6 +4,7 @@
 /node_modules
 /.pnp
 .pnp.js
+.yarn/install-state.gz
 
 # testing
 /coverage