Pular para o conteúdo principal

Status: Approved · v2 · SPEC-ARCH-WEB-001

depends_on: SPEC-ARCH-FRONTEND-001, SPEC-UX-ROUTES-001

used_by: IS-ZERO-00.3, IS-MVP-01.1

Arquitetura da aplicação web

Next.js para páginas públicas indexáveis e gestão responsiva, compartilhando contratos, services e UI.

App Router e renderização​

Next.js App Router​

Rotas públicas priorizam SEO, metadata, canonical URL e compartilhamento. Componentes de servidor podem buscar dados públicos diretamente por um server-side service adapter, mas a lógica continua no service e respeita contracts; componentes client usam hooks.

apps/web/app/
  layout.tsx
  page.tsx
  teams/[slug]/page.tsx
  players/[slug]/page.tsx
  matches/[matchId]/page.tsx
  championships/[slug]/page.tsx
  management/...

Renderização​

  • Páginas públicas: SSR/ISR quando API real estiver disponível; mock mode pode renderizar de forma determinística.
  • Gestão e sessão: client/server boundary explícita; dados privados nunca ficam em static output.
  • Metadata usa DTO público e fallback RaizFC.

Responsividade​

Breakpoints derivam dos tokens. Desktop usa largura máxima, side navigation e tabelas apenas onde agregam densidade. Mobile web mantém a mesma hierarquia do app, sem aparência infantil ou cards excessivamente grandes/coloridos.

SEO​

  • Title/description/canonical por entidade.
  • Open Graph usa share card/fallback oficial.
  • Draft/private/suspended não são indexados.
  • Merged usa redirect canônico.
  • Structured data apenas quando semanticamente correto.

Segurança​

  • Dados privados não entram em HTML público.
  • Cookies e headers seguem ambiente.
  • Return URLs allowlisted.
  • Server logs não incluem tokens.

Critérios de aceite​

  • Public pages renderizam sem login.
  • Metadata correta.
  • Mock mode e API mode usam mesma service contract.
  • Gestão não vaza em cache público.