# Ag Referencia Nextjs

> Patterns e convencoes para projetos Next.js com React

- **Type:** Skill
- **Install:** `agentstack add skill-andregusman-raiz-a-gusman-claude-ag-referencia-nextjs`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [andregusman-raiz](https://agentstack.voostack.com/s/andregusman-raiz)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [andregusman-raiz](https://github.com/andregusman-raiz)
- **Source:** https://github.com/andregusman-raiz/a-gusman-claude/tree/main/archive/reference-skills-deprecated-2026-04-22/ag-referencia-nextjs

## Install

```sh
agentstack add skill-andregusman-raiz-a-gusman-claude-ag-referencia-nextjs
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# Skill: Next.js + React Patterns

Referencia de patterns e convencoes para projetos Next.js + React.

## Quando Ativar

- Trabalhando em projeto Next.js
- Criando componentes React
- Decidindo entre Server e Client Components

## App Router (Next.js 13+)

### Estrutura de Pastas

```
src/app/
├── layout.tsx          # Root layout (Server Component)
├── page.tsx            # Home page
├── loading.tsx         # Loading UI
├── error.tsx           # Error boundary (Client Component)
├── not-found.tsx       # 404 page
├── (auth)/             # Route group
│   ├── login/page.tsx
│   └── register/page.tsx
├── dashboard/
│   ├── layout.tsx      # Nested layout
│   └── [id]/page.tsx   # Dynamic route
└── api/
    └── route.ts        # API route handler
```

### Server vs Client Components

| Criterio | Server Component | Client Component |
|----------|-----------------|------------------|
| Default | Sim (padrao) | Precisa `'use client'` |
| Fetch data | Sim (async/await) | Via hooks |
| useState/useEffect | Nao | Sim |
| Event handlers | Nao | Sim |
| Bundle size | Nao inclui | Inclui no bundle |

**Regra**: Comece como Server Component. Adicione `'use client'` apenas quando precisar de interatividade.

### Data Fetching (Server Component)

```typescript
export default async function UsersPage() {
  const users = await getUsers();
  return ;
}
```

### Composicao Server + Client

```typescript
export default async function Page() {
  const data = await fetchData();
  return (
    
      Server rendered
      
    
  );
}
```

## React Patterns

### Custom Hooks

```typescript
export function useDebounce(value: T, delay: number): T {
  const [debouncedValue, setDebouncedValue] = useState(value);
  useEffect(() => {
    const timer = setTimeout(() => setDebouncedValue(value), delay);
    return () => clearTimeout(timer);
  }, [value, delay]);
  return debouncedValue;
}
```

### Error Boundaries

```typescript
'use client';
export default function Error({ error, reset }: { error: Error; reset: () => void }) {
  return (
    
      Algo deu errado
      Tentar novamente
    
  );
}
```

## Tailwind CSS

- **Responsive**: mobile-first (`sm:`, `md:`, `lg:`, `xl:`)
- **Dark mode**: `dark:` prefix
- **Hover/Focus**: `hover:`, `focus:`, `focus-visible:`

## Performance

1. **Image**: Sempre usar `next/image` com `width` e `height`
2. **Fonts**: Usar `next/font`
3. **Dynamic imports**: `next/dynamic` para lazy loading
4. **Memoization**: `useMemo`/`useCallback` apenas quando necessario
5. **Suspense**: Para loading states granulares

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [andregusman-raiz](https://github.com/andregusman-raiz)
- **Source:** [andregusman-raiz/a-gusman-claude](https://github.com/andregusman-raiz/a-gusman-claude)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-andregusman-raiz-a-gusman-claude-ag-referencia-nextjs
- Seller: https://agentstack.voostack.com/s/andregusman-raiz
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.