docs(use-cache): add missing function to page component examples (v…

…ercel#72620)

### Improving Documentation

- This PR updates Page component examples by adding `function` keyword
to ensure proper syntax highlighting 🙂
- Also includes the missing `export default` for page components, and
applies consistent code formatting.

<img width="675" alt="image"
src="https://github.com/user-attachments/assets/c081f866-8523-4597-aa56-7baad96eecb5">

<br />

docs/01-app/03-api-reference/01-directives/use-cache.mdx

@@ -74,56 +74,56 @@ export async function getData() {
 To prerender an entire route, add `use cache` to the top **both** the `layout` and `page` files. Each of these segments are treated as separate entry points in your application, and will be cached independently.
 
 ```tsx filename="app/layout.tsx" switcher
-"use cache"
+'use cache'
 import { unstable_cacheLife as cacheLife } from 'next/cache'
 
-export default Layout({children}: {children: ReactNode}) {
+export default function Layout({ children }: { children: ReactNode }) {
   return <div>{children}</div>
 }
 ```
 
 ```jsx filename="app/page.tsx" switcher
-"use cache"
+'use cache'
 import { unstable_cacheLife as cacheLife } from 'next/cache'
 
-export default Layout({ children }) {
+export default function Layout({ children }) {
   return <div>{children}</div>
 }
 ```
 
 Any components imported and nested in `page` file will inherit the cache behavior of `page`.
 
 ```tsx filename="app/page.tsx" switcher
-"use cache"
+'use cache'
 import { unstable_cacheLife as cacheLife } from 'next/cache'
 
 async function Users() {
-  const users = await fetch('/api/users');
+  const users = await fetch('/api/users')
   // loop through users
 }
 
-export default Page() {
+export default function Page() {
   return (
     <main>
-      <Users/>
+      <Users />
     </main>
   )
 }
 ```
 
 ```jsx filename="app/page.js" switcher
-"use cache"
+'use cache'
 import { unstable_cacheLife as cacheLife } from 'next/cache'
 
 async function Users() {
-  const users = await fetch('/api/users');
+  const users = await fetch('/api/users')
   // loop through users
 }
 
-export default Page() {
+export default function Page() {
   return (
     <main>
-      <Users/>
+      <Users />
     </main>
   )
 }
@@ -203,7 +203,7 @@ See the [`cacheLife`](/docs/app/api-reference/functions/cacheLife) and [`cacheTa
 If you need to pass non-serializable arguments to a cacheable function, you can pass them as `children`. This means the `children` reference can change without affecting the cache entry.
 
 ```tsx filename="app/page.tsx" switcher
-async function Page() {
+export default async function Page() {
   const uncachedData = await getData()
   return (
     <CacheComponent>
@@ -229,7 +229,7 @@ You can also pass Server Actions through cached components to Client Components
 ```tsx filename="app/page.tsx" switcher
 import ClientComponent from './ClientComponent';
 
-async function Page() {
+export default async function Page() {
   const performUpdate = async () => {
     "use server"
     // Perform some server-side update
@@ -249,7 +249,7 @@ async function CachedComponent({ performUpdate }) {
 ```jsx filename="app/page.js" switcher
 import ClientComponent from './ClientComponent';
 
-async function Page() {
+export default async function Page() {
   const performUpdate = async () => {
     "use server"
     // Perform some server-side update