Merge branch 'docs-7gjo' of https://github.com/vercel/next.js into do…

…cs-7gjo

Cargo.toml

@@ -40,7 +40,7 @@ next-transform-strip-page-exports = { path = "packages/next-swc/crates/next-tran
 
 # SWC crates
 # Keep consistent with preset_env_base through swc_core
-swc_core = { version = "0.79.33" }
+swc_core = { version = "0.79.22" }
 testing = { version = "0.33.21" }
 
 # Turbo crates

docs/02-app/01-building-your-application/04-caching/index.mdx

@@ -43,7 +43,7 @@ React extends the [`fetch` API](#fetch) to automatically **memoize** requests th
   height="857"
 />
 
-For example, if you need to use the same data across a route (e.g in a Layout, Page, and multiple components), you do not have to fetch data at the top of the tree then forward props between components. Instead, you can fetch data in the components that need it without worrying about the performance implications of making multiple requests across the network for the same data.
+For example, if you need to use the same data across a route (e.g. in a Layout, Page, and multiple components), you do not have to fetch data at the top of the tree then forward props between components. Instead, you can fetch data in the components that need it without worrying about the performance implications of making multiple requests across the network for the same data.
 
 ```tsx filename="app/example.tsx" switcher
 async function getItem() {
@@ -127,7 +127,7 @@ By default, data requests that use `fetch` are **cached**. You can use the [`cac
 
 The first time a `fetch` request is called during rendering, Next.js checks the Data Cache for a cached response. If a cached response is found, it's returned immediately and [memoized](#request-memoization). If not, the request is made to the data source, the result is stored in the Data Cache, and memoized.
 
-For uncached data (e.g. `{ cache: no store }`), the result is always fetched from the data source, and memoized.
+For uncached data (e.g. `{ cache: 'no-store' }`), the result is always fetched from the data source, and memoized.
 
 Whether the data is cached or uncached, the requests are always memoized to avoid making duplicate requests for the same data during a React render pass.
 
@@ -307,7 +307,7 @@ There are two ways you can invalidate the Full Route Cache:
 You can opt out of the Full Route Cache, or in other words, dynamically render components for every incoming request, by:
 
 - **Using a [Dynamic Function](#dynamic-functions)**: This will opt the route out from the Full Route Cache and dynamically render it at request time. The Data Cache can still be used.
-- **Using the route segment config options `export const dynamic = force-dynamic` or `export const revalidate = 0`**: This will skip the Full Route Cache and the Data Cache. Meaning components will be rendered and data fetched on every incoming request to the server. The Router Cache will still apply as it's a client-side cache.
+- **Using the route segment config options `export const dynamic = 'force-dynamic'` or `export const revalidate = 0`**: This will skip the Full Route Cache and the Data Cache. Meaning components will be rendered and data fetched on every incoming request to the server. The Router Cache will still apply as it's a client-side cache.
 - **Opting out of the [Data Cache](#data-cache)**: If a route has a `fetch` request that is not cached, this will opt the route out of the Full Route Cache. The data for the specific `fetch` request will be fetched for every incoming request. Other `fetch` requests that do not opt out of caching will still be cached in the Data Cache. This allows for a hybrid of cached and uncached data.
 
 ## Router Cache
@@ -440,7 +440,7 @@ See the [`fetch` API Reference](/docs/app/api-reference/functions/fetch) for mor
 
 ### `fetch options.cache`
 
-You can opt individual `fetch` requests out of data caching by setting the `cache` option to `no-store`:
+You can opt out individual `fetch` requests of data caching by setting the `cache` option to `no-store`:
 
 ```jsx
 // Opt out of caching
@@ -525,7 +525,7 @@ The Route Segment Config options can be used override the route segment defaults
 
 The following Route Segment Config options will opt out of the Data Cache and Full Route Cache:
 
-- `const dynamic = force-dynamic`
+- `const dynamic = 'force-dynamic'`
 - `const revalidate = 0`
 
 See the [Route Segment Config](/docs/app/api-reference/file-conventions/route-segment-config) documentation for more options.

packages/next/src/build/webpack/loaders/next-metadata-image-loader.ts

@@ -163,9 +163,14 @@ async function nextMetadataImageLoader(this: any, content: Buffer) {
       ? imageSize
       : {
           sizes:
-            extension === 'ico' || extension === 'svg'
-              ? 'any'
-              : `${imageSize.width}x${imageSize.height}`,
+            // For SVGs, skip sizes and use "any" to let it scale automatically based on viewport,
+            // For the images doesn't provide the size properly, use "any" as well.
+            // If the size is presented, use the actual size for the image.
+            extension !== 'svg' &&
+            imageSize.width != null &&
+            imageSize.height != null
+              ? `${imageSize.width}x${imageSize.height}`
+              : 'any',
         }),
   }
   if (type === 'openGraph' || type === 'twitter') {

test/e2e/app-dir/metadata/metadata.test.ts

@@ -1,6 +1,6 @@
+import type { BrowserInterface } from 'test/lib/browsers/base'
 import { createNextDescribe } from 'e2e-utils'
 import { check } from 'next-test-utils'
-import { BrowserInterface } from 'test/lib/browsers/base'
 import fs from 'fs/promises'
 import path from 'path'
 import cheerio from 'cheerio'
@@ -669,7 +669,7 @@ createNextDescribe(
         const favIcon = $('link[rel="icon"]')
         expect(favIcon.attr('href')).toBe('/favicon.ico')
         expect(favIcon.attr('type')).toBe('image/x-icon')
-        expect(favIcon.attr('sizes')).toBe('any')
+        expect(favIcon.attr('sizes')).toBe('16x16')
 
         const iconSvg = $('link[rel="icon"][type="image/svg+xml"]')
         expect(iconSvg.attr('href')).toBe('/icon.svg?90699bff34adba1f')
@@ -678,7 +678,7 @@ createNextDescribe(
         $ = await next.render$('/basic')
         const icon = $('link[rel="icon"]')
         expect(icon.attr('href')).toBe('/favicon.ico')
-        expect(icon.attr('sizes')).toBe('any')
+        expect(icon.attr('sizes')).toBe('16x16')
 
         if (!isNextDeploy) {
           const faviconFileBuffer = await fs.readFile(