docs: follow up to getting started CC and use-cache API ref

[icyJoseph]

Expanding on the Getting started for CC and also extending use cache

[github-actions]

All broken links are now fixed, thank you!

[vercel]

[vercel]

[vercel]

Additional Suggestion:

The code example for app/page.tsx has two issues: the function is named Layout instead of Page, and the language specifier is jsx instead of tsx. This is inconsistent with the file type and will confuse developers.

View Details

📝 Patch Details

diff --git a/docs/01-app/03-api-reference/01-directives/use-cache.mdx b/docs/01-app/03-api-reference/01-directives/use-cache.mdx
index 4e6bd641fb..25d2368bbf 100644
--- a/docs/01-app/03-api-reference/01-directives/use-cache.mdx
+++ b/docs/01-app/03-api-reference/01-directives/use-cache.mdx
@@ -287,10 +287,10 @@ export default async function Layout({ children }: { children: ReactNode }) {
 }
 ```
 
-```jsx filename="app/page.tsx" switcher
+```tsx filename="app/page.tsx" switcher
 'use cache'
 
-export default async function Layout({ children }) {
+export default async function Page({ children }: { children: ReactNode }) {
   return <div>{children}</div>
 }
 ```

Analysis

Incorrect function name and language specifier in use cache documentation

What fails: Code example in docs/01-app/03-api-reference/01-directives/use-cache.mdx (lines 290-293) has two inconsistencies:

1. Language specifier is jsx instead of tsx for a .tsx file
2. Function is named Layout instead of Page for app/page.tsx file

How to reproduce: Open the documentation file and examine the second code block under "Caching an entire route with use cache" section (line 290-295)

Result: Code block incorrectly shows:

export default async function Layout({ children })

Expected: Should show:

export default async function Page({ children }: { children: ReactNode })

This is inconsistent with the adjacent examples: the app/layout.tsx example correctly uses tsx with Layout function, and the app/page.tsx example on lines 300-314 correctly uses tsx with Page function. The incorrect function name and language specifier would confuse developers copying the example.

[vercel]

Suggested change

	| **Self-hosted** | Cache entries persist across requests. Control cache size with [`cacheMaxMemorySize`](/docs/app/api-reference/config/next-config-js/incrementalCacheHandlerPath). |
	| **Self-hosted** | Cache entries persist across requests. Control cache size with [`cacheMaxMemorySize`](/docs/app/api-reference/config/next-config-js/cacheHandlers). |

The documentation link for configuring cache size with cacheMaxMemorySize incorrectly points to the cacheHandler (ISR cache) documentation instead of the cacheHandlers (use cache) documentation.

View Details

Analysis

Incorrect documentation link for cacheMaxMemorySize in use cache configuration

What fails: The use-cache.mdx documentation incorrectly links to the cacheHandler (ISR cache) documentation when describing how to control cache size with cacheMaxMemorySize in self-hosted environments, even though cacheMaxMemorySize applies to the cacheHandlers (use cache) configuration.

How to reproduce:

1. Open docs/01-app/03-api-reference/01-directives/use-cache.mdx
2. Look at the "Runtime caching considerations" table on line 201
3. Click the link on cacheMaxMemorySize - it points to /docs/app/api-reference/config/next-config-js/incrementalCacheHandlerPath

Result: Users are directed to documentation for cacheHandler (singular), which explicitly states: "The cacheHandler (singular) configuration is specifically used by Next.js for server cache operations such as storing and revalidating ISR and route handler responses. It is not used by 'use cache' directives."

Expected: The link should point to cacheHandlers (plural) documentation at /docs/app/api-reference/config/next-config-js/cacheHandlers, which documents how to configure custom cache handlers for use cache directives. This is verified by the source code in packages/next/src/export/helpers/create-incremental-cache.ts, where cacheMaxMemorySize is passed to initializeCacheHandlers() to create the default cache handler for use cache directives.

Reference:

• cacheHandler documentation - For ISR cache (not use cache)
• cacheHandlers documentation - For use cache configuration (correct target)

[icyJoseph]

tmp issue - cacheMaxMemorySize is only mentioned in cacheHandler 💀

[vercel]

Additional Suggestion:

The function name in the example doesn't match the file path. The app/page.tsx file should export a function named Page, not Layout.

View Details

📝 Patch Details

diff --git a/docs/01-app/03-api-reference/01-directives/use-cache.mdx b/docs/01-app/03-api-reference/01-directives/use-cache.mdx
index 602d5f0133..16940e151e 100644
--- a/docs/01-app/03-api-reference/01-directives/use-cache.mdx
+++ b/docs/01-app/03-api-reference/01-directives/use-cache.mdx
@@ -288,7 +288,7 @@ export default async function Layout({ children }: { children: ReactNode }) {
 ```jsx filename="app/page.tsx" switcher
 'use cache'
 
-export default async function Layout({ children }) {
+export default async function Page({ children }) {
   return <div>{children}</div>
 }
 ```

Analysis

Incorrect function name in page.tsx example in use-cache documentation

What fails: The code example at line 288-294 in docs/01-app/03-api-reference/01-directives/use-cache.mdx shows a file labeled app/page.tsx but exports a function named Layout instead of Page, violating Next.js file naming conventions.

How to reproduce: View the documentation file at line 288-294 - the JSX code block shows:

filename="app/page.tsx" switcher
'use cache'
export default async function Layout({ children }) {

Result: Documentation shows incorrect function name that contradicts Next.js conventions for page files.

Expected: According to Next.js file-system conventions, page.tsx files should export a component named Page. The function should be named Page({ children }) not Layout({ children }).

Note: This is a copy-paste error from the preceding example (lines 280-286) which correctly shows Layout function in app/layout.tsx file.