03-frontend-nextjs

⚡ FRONTEND NEXT.JS 16 — ESTÁNDARES v3.0

FASE LOCK ACTIVO: FASE 1

✅ Permitido: layout.tsx · TopNavigationBar · lib/env.ts · hooks/useAuthToken.ts
⛔ BLOQUEADO: dashboards · rutas secundarias · charts · WebSocket client · auth forms

Si se solicita algo fuera de Fase 1 → RECHAZAR con mensaje:

"⛔ Phase Lock: Esta feature es Fase [X]. Lock actual: Fase 1."

TYPESCRIPT — MODO ESTRICTO

// tsconfig.json — obligatorio
{
  "compilerOptions": {
    "strict": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "noUncheckedIndexedAccess": true
  }
}

// ❌ PROHIBIDO — any
const handler = (event: any) => {}
const response: any = await fetch(url)

// ✅ CORRECTO — tipos específicos
const handler = (event: React.MouseEvent<HTMLButtonElement>) => {}
interface ApiResponse<T> { data: T; status: number }

COMPONENTES — REGLAS PRINCIPALES

// ✅ Server Component por defecto (sin directiva)
export function TradingPanel() {
  return <div>...</div>
}

// Solo agregar 'use client' si el componente usa:
// - useState, useEffect, useCallback
// - Eventos de browser (onClick, onChange directo)
// - APIs de browser (localStorage, etc.)
"use client";
export function LivePrice() {
  const [price, setPrice] = useState(0)
  // ...
}

// Máximo 100 líneas por componente.
// Si supera → extraer subcomponentes o un hook.

// ✅ Props tipadas con interface — nunca any
interface TopNavigationBarProps {
  items: NavigationItem[]
}

export function TopNavigationBar({ items }: TopNavigationBarProps) {
  return (...)
}

DISEÑO — DARK MODE OBLIGATORIO

// ❌ PROHIBIDO — referencia a light mode
className="dark:bg-gray-900 bg-white"

// ❌ PROHIBIDO — colores hardcodeados
style={{ color: "#f0f0f5" }}

// ✅ CORRECTO — CSS variables del design system
className="bg-bg-surface text-text-primary border-border-subtle"

// El Top Nav usa glassmorphism exacto:
const navClasses = [
  "fixed top-0 left-0 right-0 z-50 h-14",
  "flex items-center justify-between px-6",
  "bg-[rgba(17,17,24,0.72)] backdrop-blur-md",
  "border-b border-border-subtle",
].join(" ")