| 1 | # Directives |
| 2 | |
| 3 | ## React Directives |
| 4 | |
| 5 | These are React directives, not Next.js specific. |
| 6 | |
| 7 | ### `'use client' |
| 8 | |
| 9 | Marks a component as a Client Component. Required for: |
| 10 | |
| 11 | - React hooks (`useState`, `useEffect`, etc.) |
| 12 | - Event handlers (`onClick`, `onChange`) |
| 13 | - Browser APIs (`window`, `localStorage`) |
| 14 | |
| 15 | ```tsx |
| 16 | "use client"; |
| 17 | |
| 18 | import { useState } |
| 19 | |
| 20 | export function Counter() |
| 21 | const [count, |
| 22 | return <button onClick |
| 23 | } |
| 24 | ``` |
| 25 | |
| 26 | Reference: https://react.dev/reference/rsc/use-client |
| 27 | |
| 28 | ### `'use server' |
| 29 | |
| 30 | Marks a function as a Server Action. Can be passed to Client Components. |
| 31 | |
| 32 | ```tsx |
| 33 | "use server"; |
| 34 | |
| 35 | export async function submitForm |
| 36 | // Runs on server |
| 37 | } |
| 38 | ``` |
| 39 | |
| 40 | Or inline within a Server Component: |
| 41 | |
| 42 | ```tsx |
| 43 | export default function Page |
| 44 | async function submit |
| 45 | "use server"; |
| 46 | // Runs on server |
| 47 | } |
| 48 | return <form action |
| 49 | } |
| 50 | ``` |
| 51 | |
| 52 | Reference: https://react.dev/reference/rsc/use-server |
| 53 | |
| 54 | --- |
| 55 | |
| 56 | ## Next.js Directive |
| 57 | |
| 58 | ### `'use cache' |
| 59 | |
| 60 | Marks a function or component for caching. Part of Next.js Cache Components. |
| 61 | |
| 62 | ```tsx |
| 63 | "use cache"; |
| 64 | |
| 65 | export async function getCachedData |
| 66 | return await fetchData |
| 67 | } |
| 68 | ``` |
| 69 | |
| 70 | Requires `cacheComponents: true` in `next.config.ts`. |
| 71 | |
| 72 | For detailed usage including cache profiles, `cacheLife()`, `cacheTag()`, and ` |
| 73 | |
| 74 | Reference: https://nextjs.org/docs/app/api-reference/directives/use-cache |