From 61dbe6fb00885068e7ae89ed397e2112076a4577 Mon Sep 17 00:00:00 2001 From: dan Date: Mon, 28 Oct 2024 16:37:32 +0000 Subject: [PATCH] Fix use cache example line highlights (#71883) Have not tested Co-authored-by: Delba de Oliveira <32464864+delbaoliveira@users.noreply.github.com> --- .../02-api-reference/01-directives/use-cache.mdx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/docs/02-app/02-api-reference/01-directives/use-cache.mdx b/docs/02-app/02-api-reference/01-directives/use-cache.mdx index 443e8762e3fde..b6c7894292dbf 100644 --- a/docs/02-app/02-api-reference/01-directives/use-cache.mdx +++ b/docs/02-app/02-api-reference/01-directives/use-cache.mdx @@ -268,7 +268,7 @@ 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} +```tsx filename="app/actions.ts" highlight={8,9} import { unstable_cacheTag as cacheTag, unstable_cacheLife as cacheLife, @@ -286,7 +286,7 @@ export async function getData() { 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} +```tsx filename="app/submit.ts" highlight={6,7} 'use server' import { revalidateTag } from 'next/cache' @@ -311,7 +311,7 @@ This is recommended for applications that previously used the [`export const dyn ```tsx filename="app/layout.tsx" "use cache" -import { unstable_cacheLife as cacheLife} from 'next/cache' +import { unstable_cacheLife as cacheLife } from 'next/cache' cacheLife('minutes') export default Layout({children}: {children: ReactNode}) { @@ -323,7 +323,7 @@ And in your `page.tsx` file you can add the `use cache` directive to the top of ```tsx filename="app/page.tsx" "use cache" -import { unstable_cacheLife as cacheLife} from 'next/cache' +import { unstable_cacheLife as cacheLife } from 'next/cache' cacheLife('minutes') async function Users() { @@ -346,7 +346,7 @@ You can use `use cache` at the component level to cache any fetches or computati 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} +```tsx filename="app/components/bookings.tsx" highlight={8,9} import { unstable_cacheLife as cacheLife } from 'next/cache' interface BookingsProps {