feat: biblioteca inteligente libs/ + 5 novas skills (20 skills total)
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)
This commit is contained in:
@@ -0,0 +1,73 @@
|
||||
# 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
|
||||
Reference in New Issue
Block a user