Guia — atenvi-admin

Painel administrativo em Next.js 15 (App Router).

Estrutura de pastas

src/
  app/
    (auth)/
      login/
    (dashboard)/
      layout.tsx
      <feature>/
        page.tsx
        loading.tsx
        error.tsx
  components/       ← componentes locais do admin
  hooks/
  lib/
    api/            ← funções de fetch para TanStack Query
    utils/
  stores/           ← Zustand stores
  types/

Regras Next.js

• Server Components por padrão — 'use client' apenas quando necessário (interação, estado)
• Dados em Server Components via fetch direto ao BFF (sem TanStack Query no servidor)
• TanStack Query apenas em Client Components para dados interativos/reativos
• Loading UI com loading.tsx e Error boundary com error.tsx por rota

TanStack Query

• Query keys: ['<resource>', <id>?] → ['users'], ['users', userId]
• Funções de fetch centralizadas em src/lib/api/
• Sem lógica de fetch inline em componentes

Zustand

• Store por domínio de UI: useLayoutStore (sidebar, tema), useFilterStore
• Sem server state no Zustand — apenas estado de UI

Componentes

• Componentes de negócio locais em src/components/
• Primitivos de UI via atenvi-ui e shadcn/ui — sem reimplementação