fargo
1a822493ba
963 markdown files reformatted with the repository's pinned prettier so pnpm format:check covers the folded tree like every other repo file. The formatter's embedded-language pass also normalized code fences (TS semicolons, closed HTML tags in examples, lowercased CSS hex colors, one renumbered list that skipped an index). Alphanumeric token deltas vs the fold commit were audited file-by-file; all are formatter-equivalent markup normalizations plus the four sanitized skills.
75 lines
1.5 KiB
Markdown
75 lines
1.5 KiB
Markdown
# Directives
|
|
|
|
## React Directives
|
|
|
|
These are React directives, not Next.js specific.
|
|
|
|
### `'use client'`
|
|
|
|
Marks a component as a Client Component. Required for:
|
|
|
|
- React hooks (`useState`, `useEffect`, etc.)
|
|
- Event handlers (`onClick`, `onChange`)
|
|
- Browser APIs (`window`, `localStorage`)
|
|
|
|
```tsx
|
|
'use client';
|
|
|
|
import { useState } from 'react';
|
|
|
|
export function Counter() {
|
|
const [count, setCount] = useState(0);
|
|
return <button onClick={() => setCount(count + 1)}>{count}</button>;
|
|
}
|
|
```
|
|
|
|
Reference: https://react.dev/reference/rsc/use-client
|
|
|
|
### `'use server'`
|
|
|
|
Marks a function as a Server Action. Can be passed to Client Components.
|
|
|
|
```tsx
|
|
'use server';
|
|
|
|
export async function submitForm(formData: FormData) {
|
|
// Runs on server
|
|
}
|
|
```
|
|
|
|
Or inline within a Server Component:
|
|
|
|
```tsx
|
|
export default function Page() {
|
|
async function submit() {
|
|
'use server';
|
|
// Runs on server
|
|
}
|
|
return <form action={submit}>...</form>;
|
|
}
|
|
```
|
|
|
|
Reference: https://react.dev/reference/rsc/use-server
|
|
|
|
---
|
|
|
|
## Next.js Directive
|
|
|
|
### `'use cache'`
|
|
|
|
Marks a function or component for caching. Part of Next.js Cache Components.
|
|
|
|
```tsx
|
|
'use cache';
|
|
|
|
export async function getCachedData() {
|
|
return await fetchData();
|
|
}
|
|
```
|
|
|
|
Requires `cacheComponents: true` in `next.config.ts`.
|
|
|
|
For detailed usage including cache profiles, `cacheLife()`, `cacheTag()`, and `updateTag()`, see the `next-cache-components` skill.
|
|
|
|
Reference: https://nextjs.org/docs/app/api-reference/directives/use-cache
|