Skip to content

Commit

Permalink
docs lint fixes (#71813)
Browse files Browse the repository at this point in the history 
Follow-ups to #71812
  • Loading branch information
@ztanner
ztanner authored Oct 24, 2024
1 parent 9499cc1 commit a549889
Show file tree
Hide file tree
Showing 7 changed files with 115 additions and 110 deletions.
2 changes: 1 addition & 1 deletion docs/02-app/02-api-reference/01-directives/index.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,4 +3,4 @@ title: Directives
description: Directives are used to modify the behavior of your Next.js application.
---

The following directives are available:
The following directives are available:
129 changes: 65 additions & 64 deletions docs/02-app/02-api-reference/01-directives/use-cache.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,15 +18,15 @@ The `use cache` directive designates a component, function, or file to be cached
Enable support for the `use cache` directive with the `dynamicIO` flag in your `next.config.ts` file:

```ts filename="next.config.ts"
import type { NextConfig } from 'next';
import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
experimental: {
dynamicIO: true,
}
};
export default nextConfig;
},
}

export default nextConfig
```

> The `use cache` directive will be available separately from the`dynamicIO` flag in the future.
Expand All @@ -41,25 +41,25 @@ Additionally, `use cache` automatically manages complexities by tracking both in

## `use cache` directive

The Next.js `use cache` directive allows you to cache entire routes, components, and the return value of functions. When you have an asynchronous function, you can mark it as cacheable by adding `use cache` at the top of the file or inside the function scope. This informs Next.js that the return value can be cached and reused for subsequent renders.
The Next.js `use cache` directive allows you to cache entire routes, components, and the return value of functions. When you have an asynchronous function, you can mark it as cacheable by adding `use cache` at the top of the file or inside the function scope. This informs Next.js that the return value can be cached and reused for subsequent renders.

```tsx
// File level
"use cache"
'use cache'

export default async function Page() {
// ...
}

// Component level
export async function MyComponent() {
"use cache"
'use cache'
return <></>
}

// Function level
export async function getData() {
"use cache"
'use cache'
const data = await fetch('/api/data')
return data
}
Expand All @@ -83,14 +83,14 @@ Both of these APIs integrate across the client and server caching layers, meanin
The example below shows how to use the `cacheLife` function at the function level to set a revalidation period of one day on the functions output:

```tsx filename="app/components/my-component.tsx" highlight={1,5,6}
import { unstable_cacheLife as cacheLife} from 'next/cache'
import { unstable_cacheLife as cacheLife } from 'next/cache'

export async function MyComponent() {
async function getData() {
"use cache"
'use cache'
cacheLife('days')
const data = await fetch('/api/data');
return data;
const data = await fetch('/api/data')
return data
}

return // Use the data here
Expand All @@ -113,35 +113,35 @@ We recommend always adding a cache profile when using the `use cache` directive

Cache profiles are objects that contain the following properties:

| **Property** | **Value** | **Description** | **Requirement** |
| --- | --- | --- | --- |
| `stale` | `number` | Duration the client should cache a value without checking the server. | Optional |
| `revalidate` | `number` | Frequency at which the cache should refresh on the server; stale values may be served while revalidating. | Optional |
| `expire` | `number` | Maximum duration for which a value can remain stale before switching to dynamic fetching; must be longer than `revalidate`. | Optional - Must be longer than `revalidate` |
| **Property** | **Value** | **Description** | **Requirement** |
| ------------ | --------- | --------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------- |
| `stale` | `number` | Duration the client should cache a value without checking the server. | Optional |
| `revalidate` | `number` | Frequency at which the cache should refresh on the server; stale values may be served while revalidating. | Optional |
| `expire` | `number` | Maximum duration for which a value can remain stale before switching to dynamic fetching; must be longer than `revalidate`. | Optional - Must be longer than `revalidate` |

The "stale" property differs from the [`staleTimes`](/docs/app/api-reference/next-config-js/staleTimes) setting in that it specifically controls client-side router caching. While `staleTimes` is a global setting that affects all instances of both dynamic and static data, the `cacheLife` configuration allows you to define "stale" times on a per-function or per-route basis.
> **Good to know**: The “stale” property does not set the `Cache-control: max-age` header. It instead controls the client-side router cache.

> **Good to know**: The “stale” property does not set the `Cache-control: max-age` header. It instead controls the client-side router cache.
### Default cache profiles

Next.js provides a set of named cache profiles modeled on various timescales. If you don't specify a cache profile in the `cacheLife` function alongside the `use cache` directive, Next.js will automatically apply the “default” cache profile.

| **Profile** | **Stale** | **Revalidate** | **Expire** | **Description** |
| --- | --- | --- | --- | --- |
| `default` | undefined | 15 minutes | INFINITE_CACHE | Default profile, suitable for content that doesn't need frequent updates |
| `seconds` | undefined | 1 second | 1 minute | For rapidly changing content requiring near real-time updates |
| `minutes` | 5 minutes | 1 minute | 1 hour | For content that updates frequently within an hour |
| `hours` | 5 minutes | 1 hour | 1 day | For content that updates daily but can be slightly stale |
| `days` | 5 minutes | 1 day | 1 week | For content that updates weekly but can be a day old |
| `weeks` | 5 minutes | 1 week | 1 month | For content that updates monthly but can be a week old |
| `max` | 5 minutes | 1 month | INFINITE_CACHE | For very stable content that rarely needs updating |
| **Profile** | **Stale** | **Revalidate** | **Expire** | **Description** |
| ----------- | --------- | -------------- | -------------- | ------------------------------------------------------------------------ |
| `default` | undefined | 15 minutes | INFINITE_CACHE | Default profile, suitable for content that doesn't need frequent updates |
| `seconds` | undefined | 1 second | 1 minute | For rapidly changing content requiring near real-time updates |
| `minutes` | 5 minutes | 1 minute | 1 hour | For content that updates frequently within an hour |
| `hours` | 5 minutes | 1 hour | 1 day | For content that updates daily but can be slightly stale |
| `days` | 5 minutes | 1 day | 1 week | For content that updates weekly but can be a day old |
| `weeks` | 5 minutes | 1 week | 1 month | For content that updates monthly but can be a week old |
| `max` | 5 minutes | 1 month | INFINITE_CACHE | For very stable content that rarely needs updating |

**Basic example**:

```tsx filename="app/page.tsx" highlight={4}
"use cache"
import { unstable_cacheLife as cacheLife} from 'next/cache'
'use cache'
import { unstable_cacheLife as cacheLife } from 'next/cache'

cacheLife('minutes')
```
Expand All @@ -150,7 +150,7 @@ The string values used to reference cache profiles don't carry inherent meaning;

### Defining reusable cache profiles

To create a reusable cache profile, choose a name that suits your use case. You can create as many custom cache profiles as needed. Each profile can be referenced by its name as a string value passed to the `cacheLife` function.
To create a reusable cache profile, choose a name that suits your use case. You can create as many custom cache profiles as needed. Each profile can be referenced by its name as a string value passed to the `cacheLife` function.

```ts filename="next.config.ts"
const nextConfig = {
Expand All @@ -172,8 +172,8 @@ module.exports = nextConfig
The example above caches for 14 days, checks for updates daily, and expires the cache after 14 days. You can then reference this profile throughout your application by its name:

```tsx filename="app/page.tsx" highlight={4}
"use cache"
import { unstable_cacheLife as cacheLife} from 'next/cache'
'use cache'
import { unstable_cacheLife as cacheLife } from 'next/cache'

cacheLife('biweekly')

Expand All @@ -196,7 +196,7 @@ const nextConfig = {
days: {
stale: 3600, // 1 hour
revalidate: 900, // 15 minutes
expire: 86400 // 1 day
expire: 86400, // 1 day
},
},
},
Expand All @@ -210,13 +210,13 @@ module.exports = nextConfig
For specific use cases, you can set a custom cache profile by passing an object to the `cacheLife` function:

```tsx filename="app/page.tsx" highlight={5,6,7}
"use cache"
import { unstable_cacheLife as cacheLife} from 'next/cache'
'use cache'
import { unstable_cacheLife as cacheLife } from 'next/cache'

cacheLife({
stale: 3600, // 1 hour
revalidate: 900, // 15 minutes
expire: 86400 // 1 day
expire: 86400, // 1 day
})

// rest of code
Expand All @@ -238,10 +238,10 @@ For example, if you add the `use cache` directive to your page, without specifyi

```tsx filename="app/components/parent.tsx" highlight={5,6,19,20}
// Parent component
import { unstable_cacheLife as cacheLife} from 'next/cache'
import { unstable_cacheLife as cacheLife } from 'next/cache'

export async function ParentComponent() {
"use cache"
'use cache'
cacheLife('days')

return (
Expand All @@ -252,10 +252,10 @@ export async function ParentComponent() {
}

// Child component
import { unstable_cacheLife as cacheLife} from 'next/cache'
import { unstable_cacheLife as cacheLife } from 'next/cache'

export async function ChildComponent() {
"use cache"
'use cache'
cacheLife('hours')

// This component's cache will respect the shorter 'hours' profile
Expand All @@ -269,28 +269,28 @@ A `cacheTag` is used in combination with [`revalidateTag`](/docs/app/api-referen
In the below example the `getData` function uses the “weeks” cache profile, and defines a `cacheTag` on the functions cached output:

```tsx filename="app/actions.ts" highlight={4,5}
import {
import {
unstable_cacheTag as cacheTag,
unstable_cacheLife as cacheLife
unstable_cacheLife as cacheLife,
} from 'next/cache'

export async function getData() {
"use cache"
'use cache'
cacheLife('weeks')
cacheTag('my-data')
const data = await fetch('/api/data');
return data;

const data = await fetch('/api/data')
return data
}
```

You can then purge the cache on-demand using revalidateTag in another function, for examples, a [route handler](/docs/app/building-your-application/routing/route-handlers) or [Server Action](/docs/app/building-your-application/data-fetching/server-actions-and-mutations):

```tsx filename="app/submit.ts" highlight={4,5}
'use server'

import { revalidateTag } from 'next/cache'

export default async function submit() {
await addPost()
revalidateTag('my-data')
Expand Down Expand Up @@ -318,6 +318,7 @@ export default Layout({children}: {children: ReactNode}) {
return <div>{children}</div>
}
```

And in your `page.tsx` file you can add the `use cache` directive to the top of the file, and define a cache profile:

```tsx filename="app/page.tsx"
Expand All @@ -341,41 +342,41 @@ export default Page() {

### Caching component output with `use cache`

You can use `use cache` at the component level to cache any fetches or computations performed within that component. When you reuse the component throughout your application it can share the same cache entry as long as the props maintain the same structure.
You can use `use cache` at the component level to cache any fetches or computations performed within that component. When you reuse the component throughout your application it can share the same cache entry as long as the props maintain the same structure.

The props are serialized and form part of the cache key. If you use the same component in multiple places in your application, the cache entry will be reused as long as the serialized props produce the same value in each instance.

```tsx filename="app/components/bookings.tsx" highlight={4,5}
import { unstable_cacheLife as cacheLife} from 'next/cache'
import { unstable_cacheLife as cacheLife } from 'next/cache'

interface BookingsProps {
type: string
}

export async function Bookings({type = 'massage'}: BookingsProps) {
"use cache"
export async function Bookings({ type = 'massage' }: BookingsProps) {
'use cache'
cacheLife('minutes')

async function getBookingsData() {
const data = await fetch(`/api/bookings?type=${encodeURIComponent(type)}`);
return data;
const data = await fetch(`/api/bookings?type=${encodeURIComponent(type)}`)
return data
}
return //...
}
```

### Caching function output with `use cache`

Since you can add `use cache` to any asynchronous function you aren't limited to caching components or routes only. You might want to cache a network request or database query or compute something that is very slow. By adding `use cache` to a function containing this type of work it becomes cacheable, and when reused, will share the same cache entry.
Since you can add `use cache` to any asynchronous function you aren't limited to caching components or routes only. You might want to cache a network request or database query or compute something that is very slow. By adding `use cache` to a function containing this type of work it becomes cacheable, and when reused, will share the same cache entry.

```tsx filename="app/actions.ts" highlight={4,5}
import { unstable_cacheLife as cacheLife} from 'next/cache'
import { unstable_cacheLife as cacheLife } from 'next/cache'

export async function getData() {
"use cache"
'use cache'
cacheLife('minutes')
const data = await fetch('/api/data');
return data;

const data = await fetch('/api/data')
return data
}
```
12 changes: 5 additions & 7 deletions docs/02-app/02-api-reference/01-directives/use-client.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ title: use client
description: Learn how to use the use client directive to render a component on the client.
related:
description: React documentation for use client.
links:
links:
- https://react.dev/reference/rsc/use-client
---

Expand All @@ -13,7 +13,7 @@ The `use client` directive designates a component to be rendered on the **client

To designate a component as a Client Component, add the `use client` directive **at the top of the file**, before any imports:

````tsx filename="app/components/counter.tsx" highlight={1} switcher
```tsx filename="app/components/counter.tsx" highlight={1} switcher
'use client'

import { useState } from 'react'
Expand All @@ -28,9 +28,9 @@ export default function Counter() {
</div>
)
}
````
```

````jsx filename="app/components/counter.js" highlight={1} switcher
```jsx filename="app/components/counter.js" highlight={1} switcher
'use client'

import { useState } from 'react'
Expand All @@ -45,7 +45,7 @@ export default function Counter() {
</div>
)
}
````
```

## Nesting Client Components within Server Components

Expand Down Expand Up @@ -88,8 +88,6 @@ export default function Page() {
}
```


## Reference

See the [React documentation](https://react.dev/reference/rsc/use-client) for more information on `use client`.

Loading

2 comments on commit a549889

@ijjk
Copy link
Member

@ijjk ijjk commented on a549889 Oct 24, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Stats from current release

Default Build (Increase detected ⚠️)
General Overall increase ⚠️
vercel/next.js canary v15.0.1 vercel/next.js canary Change
buildDuration 14.8s 35.6s ⚠️ +20.8s
buildDurationCached 14.8s 14.6s N/A
nodeModulesSize 373 MB 402 MB ⚠️ +28.8 MB
nextStartRea..uration (ms) 432ms 478ms N/A
Client Bundles (main, webpack) Overall increase ⚠️
vercel/next.js canary v15.0.1 vercel/next.js canary Change
1943-HASH.js gzip 44.6 kB 45.2 kB ⚠️ +570 B
5395-HASH.js gzip 5.26 kB 5.27 kB N/A
8365.HASH.js gzip 169 B 168 B N/A
99009dd2-HASH.js gzip 52.6 kB 52.6 kB N/A
framework-HASH.js gzip 57.4 kB 57.4 kB N/A
main-app-HASH.js gzip 236 B 232 B N/A
main-HASH.js gzip 32.8 kB 33 kB ⚠️ +271 B
webpack-HASH.js gzip 1.71 kB 1.71 kB N/A
Overall change 77.4 kB 78.2 kB ⚠️ +841 B
Legacy Client Bundles (polyfills)
vercel/next.js canary v15.0.1 vercel/next.js canary Change
polyfills-HASH.js gzip 39.4 kB 39.4 kB ✓
Overall change 39.4 kB 39.4 kB ✓
Client Pages
vercel/next.js canary v15.0.1 vercel/next.js canary Change
_app-HASH.js gzip 193 B 194 B N/A
_error-HASH.js gzip 191 B 192 B N/A
amp-HASH.js gzip 510 B 510 B ✓
css-HASH.js gzip 343 B 342 B N/A
dynamic-HASH.js gzip 1.84 kB 1.84 kB ✓
edge-ssr-HASH.js gzip 266 B 265 B N/A
head-HASH.js gzip 362 B 366 B N/A
hooks-HASH.js gzip 392 B 390 B N/A
image-HASH.js gzip 4.41 kB 4.41 kB ✓
index-HASH.js gzip 269 B 268 B N/A
link-HASH.js gzip 2.78 kB 2.78 kB N/A
routerDirect..HASH.js gzip 329 B 328 B N/A
script-HASH.js gzip 396 B 395 B N/A
withRouter-HASH.js gzip 324 B 324 B ✓
1afbb74e6ecf..834.css gzip 106 B 106 B ✓
Overall change 7.19 kB 7.19 kB ✓
Client Build Manifests
vercel/next.js canary v15.0.1 vercel/next.js canary Change
_buildManifest.js gzip 752 B 748 B N/A
Overall change 0 B 0 B ✓
Rendered Page Sizes
vercel/next.js canary v15.0.1 vercel/next.js canary Change
index.html gzip 523 B 523 B ✓
link.html gzip 537 B 538 B N/A
withRouter.html gzip 519 B 519 B ✓
Overall change 1.04 kB 1.04 kB ✓
Edge SSR bundle Size Overall increase ⚠️
vercel/next.js canary v15.0.1 vercel/next.js canary Change
edge-ssr.js gzip 128 kB 128 kB N/A
page.js gzip 187 kB 187 kB ⚠️ +146 B
Overall change 187 kB 187 kB ⚠️ +146 B
Middleware size
vercel/next.js canary v15.0.1 vercel/next.js canary Change
middleware-b..fest.js gzip 671 B 670 B N/A
middleware-r..fest.js gzip 156 B 155 B N/A
middleware.js gzip 31 kB 31 kB N/A
edge-runtime..pack.js gzip 844 B 844 B ✓
Overall change 844 B 844 B ✓
Next Runtimes Overall increase ⚠️
vercel/next.js canary v15.0.1 vercel/next.js canary Change
973-experime...dev.js gzip 322 B 322 B ✓
973.runtime.dev.js gzip 314 B 314 B ✓
app-page-exp...dev.js gzip 317 kB 317 kB ⚠️ +653 B
app-page-exp..prod.js gzip 121 kB 121 kB ⚠️ +117 B
app-page-tur..prod.js gzip 134 kB 134 kB ⚠️ +126 B
app-page-tur..prod.js gzip 129 kB 129 kB ⚠️ +113 B
app-page.run...dev.js gzip 307 kB 308 kB ⚠️ +628 B
app-page.run..prod.js gzip 117 kB 117 kB ⚠️ +113 B
app-route-ex...dev.js gzip 35.9 kB 35.9 kB N/A
app-route-ex..prod.js gzip 24.4 kB 24.4 kB N/A
app-route-tu..prod.js gzip 24.4 kB 24.4 kB N/A
app-route-tu..prod.js gzip 24.2 kB 24.2 kB N/A
app-route.ru...dev.js gzip 37.5 kB 37.6 kB N/A
app-route.ru..prod.js gzip 24.2 kB 24.2 kB N/A
pages-api-tu..prod.js gzip 9.61 kB 9.61 kB ✓
pages-api.ru...dev.js gzip 11.4 kB 11.4 kB ✓
pages-api.ru..prod.js gzip 9.61 kB 9.61 kB ✓
pages-turbo...prod.js gzip 20.9 kB 20.9 kB ✓
pages.runtim...dev.js gzip 26.5 kB 26.5 kB ✓
pages.runtim..prod.js gzip 20.9 kB 20.9 kB ✓
server.runti..prod.js gzip 58.3 kB 914 kB ⚠️ +856 kB
Overall change 1.28 MB 2.14 MB ⚠️ +857 kB
build cache Overall increase ⚠️
vercel/next.js canary v15.0.1 vercel/next.js canary Change
0.pack gzip 1.85 MB 1.85 MB ⚠️ +643 B
index.pack gzip 144 kB 143 kB N/A
Overall change 1.85 MB 1.85 MB ⚠️ +643 B
Diff details
Diff for page.js

Diff too large to display

Diff for middleware.js

Diff too large to display

Diff for edge-ssr.js

Diff too large to display

Diff for image-HASH.js 
@@ -1,7 +1,7 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [8358],
   {
-    /***/ 8793: /***/ (
+    /***/ 6618: /***/ (
       __unused_webpack_module,
       __unused_webpack_exports,
       __webpack_require__
@@ -9,7 +9,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/image",
         function () {
-          return __webpack_require__(3945);
+          return __webpack_require__(5123);
         },
       ]);
       if (false) {
@@ -18,7 +18,7 @@
       /***/
     },
 
-    /***/ 7153: /***/ (module, exports, __webpack_require__) => {
+    /***/ 6948: /***/ (module, exports, __webpack_require__) => {
       "use strict";
       /* __next_internal_client_entry_do_not_use__  cjs */
       Object.defineProperty(exports, "__esModule", {
@@ -40,17 +40,17 @@
         __webpack_require__(6763)
       );
       const _head = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(7029)
+        __webpack_require__(1068)
       );
-      const _getimgprops = __webpack_require__(331);
-      const _imageconfig = __webpack_require__(5491);
-      const _imageconfigcontextsharedruntime = __webpack_require__(4571);
-      const _warnonce = __webpack_require__(8238);
-      const _routercontextsharedruntime = __webpack_require__(8161);
+      const _getimgprops = __webpack_require__(9800);
+      const _imageconfig = __webpack_require__(6731);
+      const _imageconfigcontextsharedruntime = __webpack_require__(4087);
+      const _warnonce = __webpack_require__(849);
+      const _routercontextsharedruntime = __webpack_require__(6186);
       const _imageloader = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(1974)
+        __webpack_require__(2318)
       );
-      const _usemergedref = __webpack_require__(6823);
+      const _usemergedref = __webpack_require__(5472);
       // This is replaced by webpack define plugin
       const configEnv = {
         deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
@@ -371,7 +371,7 @@
       /***/
     },
 
-    /***/ 6823: /***/ (module, exports, __webpack_require__) => {
+    /***/ 5472: /***/ (module, exports, __webpack_require__) => {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -432,7 +432,7 @@
       /***/
     },
 
-    /***/ 331: /***/ (
+    /***/ 9800: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -448,9 +448,9 @@
           return getImgProps;
         },
       });
-      const _warnonce = __webpack_require__(8238);
-      const _imageblursvg = __webpack_require__(5942);
-      const _imageconfig = __webpack_require__(5491);
+      const _warnonce = __webpack_require__(849);
+      const _imageblursvg = __webpack_require__(2102);
+      const _imageconfig = __webpack_require__(6731);
       const VALID_LOADING_VALUES =
         /* unused pure expression or super */ null && [
           "lazy",
@@ -824,7 +824,7 @@
       /***/
     },
 
-    /***/ 5942: /***/ (__unused_webpack_module, exports) => {
+    /***/ 2102: /***/ (__unused_webpack_module, exports) => {
       "use strict";
       /**
        * A shared function, used on both client and server, to generate a SVG blur placeholder.
@@ -879,7 +879,7 @@
       /***/
     },
 
-    /***/ 2903: /***/ (
+    /***/ 6938: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -906,10 +906,10 @@
         },
       });
       const _interop_require_default = __webpack_require__(9608);
-      const _getimgprops = __webpack_require__(331);
-      const _imagecomponent = __webpack_require__(7153);
+      const _getimgprops = __webpack_require__(9800);
+      const _imagecomponent = __webpack_require__(6948);
       const _imageloader = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(1974)
+        __webpack_require__(2318)
       );
       function getImageProps(imgProps) {
         const { props } = (0, _getimgprops.getImgProps)(imgProps, {
@@ -941,7 +941,7 @@
       /***/
     },
 
-    /***/ 1974: /***/ (__unused_webpack_module, exports) => {
+    /***/ 2318: /***/ (__unused_webpack_module, exports) => {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -976,7 +976,7 @@
       /***/
     },
 
-    /***/ 3945: /***/ (
+    /***/ 5123: /***/ (
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -993,8 +993,8 @@
 
       // EXTERNAL MODULE: ./node_modules/.pnpm/[email protected]/node_modules/react/jsx-runtime.js
       var jsx_runtime = __webpack_require__(5440);
-      // EXTERNAL MODULE: ./node_modules/.pnpm/next@file+..+main-repo+packages+next+next-packed.tgz_react-dom@19.0.0-rc-1631855f-20241023_re_blpa6oodui5ltg54ckje4dl55a/node_modules/next/image.js
-      var next_image = __webpack_require__(2969);
+      // EXTERNAL MODULE: ./node_modules/.pnpm/next@file+..+diff-repo+packages+next+next-packed.tgz_react-dom@19.0.0-rc-1631855f-20241023_re_5l7owhvpanghub2g6cqyzpxc5e/node_modules/next/image.js
+      var next_image = __webpack_require__(3906);
       var image_default = /*#__PURE__*/ __webpack_require__.n(next_image); // CONCATENATED MODULE: ./pages/nextjs.png
       /* harmony default export */ const nextjs = {
         src: "/_next/static/media/nextjs.cae0b805.png",
@@ -1024,12 +1024,12 @@
       /***/
     },
 
-    /***/ 2969: /***/ (
+    /***/ 3906: /***/ (
       module,
       __unused_webpack_exports,
       __webpack_require__
     ) => {
-      module.exports = __webpack_require__(2903);
+      module.exports = __webpack_require__(6938);
 
       /***/
     },
@@ -1039,7 +1039,7 @@
     /******/ var __webpack_exec__ = (moduleId) =>
       __webpack_require__((__webpack_require__.s = moduleId));
     /******/ __webpack_require__.O(0, [2888, 9774, 179], () =>
-      __webpack_exec__(8793)
+      __webpack_exec__(6618)
     );
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ _N_E = __webpack_exports__;
Diff for 1943-HASH.js

Diff too large to display

Diff for main-HASH.js

Diff too large to display

Diff for app-page-exp..ntime.dev.js 
failed to diff
Diff for app-page-exp..time.prod.js

Diff too large to display

Diff for app-page-tur..time.prod.js

Diff too large to display

Diff for app-page-tur..time.prod.js

Diff too large to display

Diff for app-page.runtime.dev.js 
failed to diff
Diff for app-page.runtime.prod.js

Diff too large to display

Diff for app-route-ex..ntime.dev.js

Diff too large to display

Diff for app-route-ex..time.prod.js

Diff too large to display

Diff for app-route-tu..time.prod.js

Diff too large to display

Diff for app-route-tu..time.prod.js

Diff too large to display

Diff for app-route.runtime.dev.js

Diff too large to display

Diff for app-route.ru..time.prod.js

Diff too large to display

Diff for server.runtime.prod.js 
failed to diff

@ijjk
Copy link
Member

@ijjk ijjk commented on a549889 Oct 24, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Stats from current release

Default Build (Increase detected ⚠️)
General Overall increase ⚠️
vercel/next.js canary v15.0.1 vercel/next.js canary Change
buildDuration 15.2s 19.9s ⚠️ +4.8s
buildDurationCached 15.3s 15.5s ⚠️ +130ms
nodeModulesSize 373 MB 402 MB ⚠️ +28.8 MB
nextStartRea..uration (ms) 439ms 470ms N/A
Client Bundles (main, webpack) Overall increase ⚠️
vercel/next.js canary v15.0.1 vercel/next.js canary Change
1943-HASH.js gzip 44.6 kB 45.2 kB ⚠️ +570 B
5395-HASH.js gzip 5.26 kB 5.27 kB N/A
8365.HASH.js gzip 169 B 168 B N/A
99009dd2-HASH.js gzip 52.6 kB 52.6 kB N/A
framework-HASH.js gzip 57.4 kB 57.4 kB N/A
main-app-HASH.js gzip 236 B 231 B N/A
main-HASH.js gzip 32.8 kB 33 kB ⚠️ +271 B
webpack-HASH.js gzip 1.71 kB 1.71 kB N/A
Overall change 77.4 kB 78.2 kB ⚠️ +841 B
Legacy Client Bundles (polyfills)
vercel/next.js canary v15.0.1 vercel/next.js canary Change
polyfills-HASH.js gzip 39.4 kB 39.4 kB ✓
Overall change 39.4 kB 39.4 kB ✓
Client Pages
vercel/next.js canary v15.0.1 vercel/next.js canary Change
_app-HASH.js gzip 193 B 194 B N/A
_error-HASH.js gzip 191 B 192 B N/A
amp-HASH.js gzip 510 B 510 B ✓
css-HASH.js gzip 343 B 342 B N/A
dynamic-HASH.js gzip 1.84 kB 1.84 kB ✓
edge-ssr-HASH.js gzip 266 B 265 B N/A
head-HASH.js gzip 362 B 366 B N/A
hooks-HASH.js gzip 392 B 390 B N/A
image-HASH.js gzip 4.41 kB 4.41 kB ✓
index-HASH.js gzip 269 B 268 B N/A
link-HASH.js gzip 2.78 kB 2.78 kB N/A
routerDirect..HASH.js gzip 329 B 328 B N/A
script-HASH.js gzip 396 B 395 B N/A
withRouter-HASH.js gzip 324 B 324 B ✓
1afbb74e6ecf..834.css gzip 106 B 106 B ✓
Overall change 7.19 kB 7.19 kB ✓
Client Build Manifests
vercel/next.js canary v15.0.1 vercel/next.js canary Change
_buildManifest.js gzip 752 B 748 B N/A
Overall change 0 B 0 B ✓
Rendered Page Sizes
vercel/next.js canary v15.0.1 vercel/next.js canary Change
index.html gzip 523 B 523 B ✓
link.html gzip 537 B 538 B N/A
withRouter.html gzip 519 B 519 B ✓
Overall change 1.04 kB 1.04 kB ✓
Edge SSR bundle Size Overall increase ⚠️
vercel/next.js canary v15.0.1 vercel/next.js canary Change
edge-ssr.js gzip 128 kB 128 kB N/A
page.js gzip 187 kB 188 kB ⚠️ +146 B
Overall change 187 kB 188 kB ⚠️ +146 B
Middleware size
vercel/next.js canary v15.0.1 vercel/next.js canary Change
middleware-b..fest.js gzip 671 B 669 B N/A
middleware-r..fest.js gzip 156 B 155 B N/A
middleware.js gzip 31 kB 31 kB N/A
edge-runtime..pack.js gzip 844 B 844 B ✓
Overall change 844 B 844 B ✓
Next Runtimes Overall increase ⚠️
vercel/next.js canary v15.0.1 vercel/next.js canary Change
973-experime...dev.js gzip 322 B 322 B ✓
973.runtime.dev.js gzip 314 B 314 B ✓
app-page-exp...dev.js gzip 317 kB 317 kB ⚠️ +653 B
app-page-exp..prod.js gzip 121 kB 121 kB ⚠️ +117 B
app-page-tur..prod.js gzip 134 kB 134 kB ⚠️ +126 B
app-page-tur..prod.js gzip 129 kB 129 kB ⚠️ +113 B
app-page.run...dev.js gzip 307 kB 308 kB ⚠️ +628 B
app-page.run..prod.js gzip 117 kB 117 kB ⚠️ +113 B
app-route-ex...dev.js gzip 35.9 kB 35.9 kB N/A
app-route-ex..prod.js gzip 24.4 kB 24.4 kB N/A
app-route-tu..prod.js gzip 24.4 kB 24.4 kB N/A
app-route-tu..prod.js gzip 24.2 kB 24.2 kB N/A
app-route.ru...dev.js gzip 37.5 kB 37.6 kB N/A
app-route.ru..prod.js gzip 24.2 kB 24.2 kB N/A
pages-api-tu..prod.js gzip 9.61 kB 9.61 kB ✓
pages-api.ru...dev.js gzip 11.4 kB 11.4 kB ✓
pages-api.ru..prod.js gzip 9.61 kB 9.61 kB ✓
pages-turbo...prod.js gzip 20.9 kB 20.9 kB ✓
pages.runtim...dev.js gzip 26.5 kB 26.5 kB ✓
pages.runtim..prod.js gzip 20.9 kB 20.9 kB ✓
server.runti..prod.js gzip 58.3 kB 914 kB ⚠️ +856 kB
Overall change 1.28 MB 2.14 MB ⚠️ +857 kB
build cache Overall increase ⚠️
vercel/next.js canary v15.0.1 vercel/next.js canary Change
0.pack gzip 1.85 MB 1.85 MB ⚠️ +1.63 kB
index.pack gzip 144 kB 145 kB ⚠️ +356 B
Overall change 1.99 MB 1.99 MB ⚠️ +1.98 kB
Diff details
Diff for page.js

Diff too large to display

Diff for middleware.js

Diff too large to display

Diff for edge-ssr.js

Diff too large to display

Diff for image-HASH.js 
@@ -1,7 +1,7 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [8358],
   {
-    /***/ 8793: /***/ (
+    /***/ 6618: /***/ (
       __unused_webpack_module,
       __unused_webpack_exports,
       __webpack_require__
@@ -9,7 +9,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/image",
         function () {
-          return __webpack_require__(3945);
+          return __webpack_require__(5123);
         },
       ]);
       if (false) {
@@ -18,7 +18,7 @@
       /***/
     },
 
-    /***/ 7153: /***/ (module, exports, __webpack_require__) => {
+    /***/ 6948: /***/ (module, exports, __webpack_require__) => {
       "use strict";
       /* __next_internal_client_entry_do_not_use__  cjs */
       Object.defineProperty(exports, "__esModule", {
@@ -40,17 +40,17 @@
         __webpack_require__(6763)
       );
       const _head = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(7029)
+        __webpack_require__(1068)
       );
-      const _getimgprops = __webpack_require__(331);
-      const _imageconfig = __webpack_require__(5491);
-      const _imageconfigcontextsharedruntime = __webpack_require__(4571);
-      const _warnonce = __webpack_require__(8238);
-      const _routercontextsharedruntime = __webpack_require__(8161);
+      const _getimgprops = __webpack_require__(9800);
+      const _imageconfig = __webpack_require__(6731);
+      const _imageconfigcontextsharedruntime = __webpack_require__(4087);
+      const _warnonce = __webpack_require__(849);
+      const _routercontextsharedruntime = __webpack_require__(6186);
       const _imageloader = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(1974)
+        __webpack_require__(2318)
       );
-      const _usemergedref = __webpack_require__(6823);
+      const _usemergedref = __webpack_require__(5472);
       // This is replaced by webpack define plugin
       const configEnv = {
         deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
@@ -371,7 +371,7 @@
       /***/
     },
 
-    /***/ 6823: /***/ (module, exports, __webpack_require__) => {
+    /***/ 5472: /***/ (module, exports, __webpack_require__) => {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -432,7 +432,7 @@
       /***/
     },
 
-    /***/ 331: /***/ (
+    /***/ 9800: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -448,9 +448,9 @@
           return getImgProps;
         },
       });
-      const _warnonce = __webpack_require__(8238);
-      const _imageblursvg = __webpack_require__(5942);
-      const _imageconfig = __webpack_require__(5491);
+      const _warnonce = __webpack_require__(849);
+      const _imageblursvg = __webpack_require__(2102);
+      const _imageconfig = __webpack_require__(6731);
       const VALID_LOADING_VALUES =
         /* unused pure expression or super */ null && [
           "lazy",
@@ -824,7 +824,7 @@
       /***/
     },
 
-    /***/ 5942: /***/ (__unused_webpack_module, exports) => {
+    /***/ 2102: /***/ (__unused_webpack_module, exports) => {
       "use strict";
       /**
        * A shared function, used on both client and server, to generate a SVG blur placeholder.
@@ -879,7 +879,7 @@
       /***/
     },
 
-    /***/ 2903: /***/ (
+    /***/ 6938: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -906,10 +906,10 @@
         },
       });
       const _interop_require_default = __webpack_require__(9608);
-      const _getimgprops = __webpack_require__(331);
-      const _imagecomponent = __webpack_require__(7153);
+      const _getimgprops = __webpack_require__(9800);
+      const _imagecomponent = __webpack_require__(6948);
       const _imageloader = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(1974)
+        __webpack_require__(2318)
       );
       function getImageProps(imgProps) {
         const { props } = (0, _getimgprops.getImgProps)(imgProps, {
@@ -941,7 +941,7 @@
       /***/
     },
 
-    /***/ 1974: /***/ (__unused_webpack_module, exports) => {
+    /***/ 2318: /***/ (__unused_webpack_module, exports) => {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -976,7 +976,7 @@
       /***/
     },
 
-    /***/ 3945: /***/ (
+    /***/ 5123: /***/ (
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -993,8 +993,8 @@
 
       // EXTERNAL MODULE: ./node_modules/.pnpm/[email protected]/node_modules/react/jsx-runtime.js
       var jsx_runtime = __webpack_require__(5440);
-      // EXTERNAL MODULE: ./node_modules/.pnpm/next@file+..+main-repo+packages+next+next-packed.tgz_react-dom@19.0.0-rc-1631855f-20241023_re_blpa6oodui5ltg54ckje4dl55a/node_modules/next/image.js
-      var next_image = __webpack_require__(2969);
+      // EXTERNAL MODULE: ./node_modules/.pnpm/next@file+..+diff-repo+packages+next+next-packed.tgz_react-dom@19.0.0-rc-1631855f-20241023_re_5l7owhvpanghub2g6cqyzpxc5e/node_modules/next/image.js
+      var next_image = __webpack_require__(3906);
       var image_default = /*#__PURE__*/ __webpack_require__.n(next_image); // CONCATENATED MODULE: ./pages/nextjs.png
       /* harmony default export */ const nextjs = {
         src: "/_next/static/media/nextjs.cae0b805.png",
@@ -1024,12 +1024,12 @@
       /***/
     },
 
-    /***/ 2969: /***/ (
+    /***/ 3906: /***/ (
       module,
       __unused_webpack_exports,
       __webpack_require__
     ) => {
-      module.exports = __webpack_require__(2903);
+      module.exports = __webpack_require__(6938);
 
       /***/
     },
@@ -1039,7 +1039,7 @@
     /******/ var __webpack_exec__ = (moduleId) =>
       __webpack_require__((__webpack_require__.s = moduleId));
     /******/ __webpack_require__.O(0, [2888, 9774, 179], () =>
-      __webpack_exec__(8793)
+      __webpack_exec__(6618)
     );
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ _N_E = __webpack_exports__;
Diff for 1943-HASH.js

Diff too large to display

Diff for main-HASH.js

Diff too large to display

Diff for app-page-exp..ntime.dev.js 
failed to diff
Diff for app-page-exp..time.prod.js

Diff too large to display

Diff for app-page-tur..time.prod.js

Diff too large to display

Diff for app-page-tur..time.prod.js

Diff too large to display

Diff for app-page.runtime.dev.js 
failed to diff
Diff for app-page.runtime.prod.js

Diff too large to display

Diff for app-route-ex..ntime.dev.js

Diff too large to display

Diff for app-route-ex..time.prod.js

Diff too large to display

Diff for app-route-tu..time.prod.js

Diff too large to display

Diff for app-route-tu..time.prod.js

Diff too large to display

Diff for app-route.runtime.dev.js

Diff too large to display

Diff for app-route.ru..time.prod.js

Diff too large to display

Diff for server.runtime.prod.js 
failed to diff

Please sign in to comment.