Caso de estudio UX para NicaLink
Cómo NicaLink presenta la historia y cultura de Nicaragua como producto editorial bilingüe: URLs con español primero, un logotipo propio del papel a Illustrator y SVG, shell del design system sincronizado y HTML de artículos seguro sin perder énfasis ligero.
Contexto
NicaLink está dedicado a la historia y cultura de Nicaragua. El sitio publica artículos originales e información sobre el país como tributo personal. Destaca trabajo como “Estancia en Nicaragua” / “Tarrying in Nicaragua”, una traducción arcaizante de un cruce del siglo XIX en plena fiebre del oro.
Diseño de logotipo
El logotipo de NicaLink es una marca propia—no un recurso de stock. Empezó como boceto en papel, se trazó y refinó en Adobe Illustrator y se entrega en la app como componente SVG en React para que la marca se mantenga nítida en header, héroe y favicon.
Problema
Los sitios editoriales a menudo pelean con su propia cromática: rutas en inglés sobre contenido con español por defecto, UI duplicada que se desvía del design system compartido, o renderizado HTML inseguro para copy enriquecido. Quienes leen necesitan lectura serena, cambio de idioma claro y enlaces confiables—sin que el shell se sienta como otro producto en cada página.
Usuarios y objetivos
Lectores con español como idioma principal, lectores en inglés vía /en y visitantes que siguen series de artículos. El éxito se ve así: URLs en español sin prefijo de idioma, inglés bajo /en con la misma página lógica, un interruptor en el header que conserva la página entre idiomas, y listados de artículos legibles en móvil y escritorio.
Enfoque
Next.js App Router con mayormente React Server Components; piezas cliente pequeñas para idioma, tema y shell. Dart Sass y tokens sincronizados componen layout y módulos de UI; el SCSS y tokens de marca propios viven en src/styles/app/. Tareas de sync traen layout, UI, estilos e iconos del TS Design System para alinear NicaLink con otros productos de Tulio Solórzano.
Decisiones clave de UX
Rutas canónicas en español (/acerca-de, /articulos) con redirecciones 308 desde /about y /articles heredadas y prefijos /es erróneos. El inglés usa /en más slugs en inglés. Títulos, descripciones y párrafos de artículos pasan por una lista permitida (sanitize-html + html-react-parser) para reescribir enlaces internos a Link de Next.js sin dangerouslySetInnerHTML. RootProviders envuelve next-themes, toasts y restauración de scroll; template.tsx posee el remount de header/footer.
Resultado
Una app editorial de cara al público que se siente coherente con el design system y mantiene copy, rutas y artículos de NicaLink en carpetas propias de la app—lista para más traducciones y series sin reescribir el shell.
Stack
Next.js App Router (Turbopack en dev y build), componentes server y client de React, TypeScript, Dart Sass con tokens sincronizados más estilos host, sync del TS Design System para layout/UI/iconos, next-themes, JSON de locales en src/locales/es y src/locales/en, articles.json por idioma y metadata del App Router (manifest, robots).
