Centavos

Landing page de la app Centavos (control de gastos para México), hecha con Next.js 16 + React 19 + TypeScript + Tailwind v4. App Router, Server Components por default, 100% estática. Mobile-first.

Stack

• Framework: Next.js 16 (App Router, Server Components)
• Lenguaje: TypeScript (strict)
• Estilos: Tailwind v4 (config en CSS via @theme)
• Fuentes: next/font (Bricolage Grotesque, Manrope, Caveat)
• SEO: Metadata API + JSON-LD + sitemap + robots

Estructura

app/
  layout.tsx                 → fuentes, metadata raíz, JSON-LD Organización + WebSite
  page.tsx                   → home (landing de la app) en español
  en/page.tsx                → la misma landing en inglés (se sirve en /?lang=en)
  gastos-hormiga/page.tsx    → calculadora de gastos hormiga (es); deja guardar la lista en la API
  en/gastos-hormiga/page.tsx → la misma calculadora en inglés (se sirve en /gastos-hormiga?lang=en)
  sitemap.ts                 → sitemap
  robots.ts                  → robots.txt
  manifest.ts                → PWA manifest
  not-found.tsx              → 404
  opengraph-image.png        → imagen social (og:image / twitter:image) de todas las rutas
  apple-icon.png             → ícono iOS
  app/
    soporte/page.tsx         → formulario de soporte (+ mailto de respaldo)
    privacidad/page.tsx      → aviso de privacidad (es/en)
    terminos/page.tsx        → términos (es/en)
    eliminar-cuenta/page.tsx → cómo eliminar la cuenta
  canjear/page.tsx           → canje de códigos promocionales (/canjear?code=XXX), es/en, noindex
  canjear/og/route.tsx       → imagen social del enlace compartido (cupón con los días y el código)
  canjear/og/fonts/*.ttf     → las fuentes de marca de app/fonts convertidas a TTF (el generador no lee WOFF2)
  api/
    soporte/route.ts         → endpoint del formulario (stub 503 hasta reconectar backend)

components/
  Header.tsx, Logo.tsx
  home/*                     → HomePage, copy (es/en), AppFooter, AppStoreBadges, MobileDownloadBar, PhoneMock
  legal/*                    → LegalShell, BackToTop, LanguageSwitcher, HtmlLang
  legal/docs/*               → el texto legal, un módulo por documento e idioma
  soporte/SoporteForm.tsx
  canjear/*                  → CanjearFlow (flujo cliente), GoogleButton, copy (es/en)
  gastos-hormiga/*           → GastosHormigaPage, GastosHormigaCalculator (isla cliente), copy y page-copy (es/en)

proxy.ts                     → idioma de la landing (?lang=, cookie o idioma del dispositivo) y ?lang=en de /gastos-hormiga

lib/
  promo-api.ts              → cliente de la API de códigos promocionales (el contrato vive aquí)
  gastos-hormiga.ts          → la cuenta y los límites de la calculadora de gastos hormiga (los mismos de la API)
  gastos-hormiga-api.ts      → cliente del endpoint que guarda la lista de gastos hormiga
  store-links.ts             → URLs de App Store / Google Play
  social-links.ts            → URLs de Instagram y TikTok (footer)
  seo.ts                     → helpers de JSON-LD y Open Graph por página
  config.ts                  → flags (formulario de soporte, correo)
  lang.ts                    → idioma por query param (?lang=), hreflang, hrefs
  ui-strings.ts              → copy del header/footer/shell en los dos idiomas

Empezar

cp .env.example .env.local            # ajusta NEXT_PUBLIC_SITE_URL
bun install
bun run dev                           # http://localhost:3000

Variables de entorno

Variable	Default	Para qué sirve
NEXT_PUBLIC_SITE_URL	https://centavos.mx	URL canónica usada en metadata/sitemap/JSON-LD
NEXT_PUBLIC_API_URL	(vacío)	URL base de la API de Centavos; /canjear y /gastos-hormiga la llaman directo desde el navegador. Si falta, /gastos-hormiga no ofrece guardar la lista
NEXT_PUBLIC_GOOGLE_CLIENT_ID	(vacío)	Client ID web de Google; si falta, /canjear oculta el botón de Google

Comandos

bun run dev          # desarrollo (http://localhost:3000)
bun run build        # producción
bun start            # servidor de producción
bun run typecheck    # tsc --noEmit
bun run lint         # eslint

Legales en dos idiomas

Los términos y el aviso de privacidad se sirven en español e inglés desde la misma URL; el idioma va en un query param, así que el enlace es compartible:

Documento	Español	Inglés
Términos	https://centavos.mx/app/terminos	https://centavos.mx/app/terminos?lang=en
Privacidad	https://centavos.mx/app/privacidad	https://centavos.mx/app/privacidad?lang=en

• El español es el default: sin param, con el param vacío o con un valor que no reconocemos (?lang=klingon), se sirve español. ?lang=en-US y ?lang=EN también valen: se compara solo el subtag principal.
• El español conserva la URL limpia, sin param, para no romper enlaces ni canonicals existentes.
• Las dos variantes se apuntan entre sí con hreflang (es-MX, en, x-default) y van las dos en el sitemap.
• <html lang> lo ajusta components/legal/HtmlLang.tsx con un script inline: el root layout es quien tiene el <html> y no puede leer searchParams, y leer un header ahí volvería dinámico todo el sitio.
• Estas dos rutas se renderizan on demand (leen searchParams); el resto del sitio sigue siendo estático.
• El texto vive en components/legal/docs/. El español es la fuente de verdad; el inglés lo traduce y tiene que seguir el mismo orden de secciones, porque los anchors #seccion-N y las referencias cruzadas del texto son compartidos.
• Huecos legales conocidos: docs/legales-pendientes.md.

Landing en dos idiomas

La landing existe en español (/) y en inglés (/?lang=en), y detecta el idioma del dispositivo. Lo decide proxy.ts, solo para /, en este orden:

여기까지가 README 앞부분입니다. 나머지는 원문에서 읽을 수 있습니다. README 전문 보기 ↗