Pulse
ae39e45460
NOVAS SKILLS: - next-best-practices v0.1.0 (CLEAN) — Next.js App Router, RSC, caching, data - nextjs-patterns v1.0.0 (CLEAN) — Next.js 15: Server Actions, route handlers - vite v1.0.0 (CLEAN) — env vars, aliases, proxy, CJS compat - uncle-bob v1.0.0 (CLEAN) — Clean Code, SOLID, Clean Architecture - clean-code-review v1.0.0 (CLEAN) — naming, guard clauses, anti-patterns, refactoring - vue v1.0.0 (CLEAN) — Vue framework - vue-composition-api-best-practices v1.0.0 (CLEAN) — composables, Pinia, reactivity BIBLIOTECA INTELIGENTE libs/ (10 dominios, 11 arquivos): - typescript/ — TS safe + generics gotchas - react/ — Next.js App Router + Vite config - vue/ — Composition API + Pinia - linux/ — System diagnostic cheatsheet - database/ — PostgreSQL + MySQL patterns - browser/ — Chromium CLI + E2E testing - security/ — SAST audit (OWASP Top 10) - best-practices/ — Clean Code + SOLID + Clean Architecture - deploy/ — Docker multi-stack + OpenClaw ops - + INDEX.md como guia de navegacao .learnings/ — LRN-20260519-003 criado (biblioteca compartilhada)
74 lines
1.4 KiB
Markdown
74 lines
1.4 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
|