Internacionalización (i18n)
Closegram usa i18next con react-i18next para admitir múltiples idiomas.
Configuración
Configurado en src/i18n/ con i18next-browser-languagedetector para detectar automáticamente el idioma del navegador del usuario.
import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import LanguageDetector from "i18next-browser-languagedetector";
i18n
.use(LanguageDetector)
.use(initReactI18next)
.init({ resources, fallbackLng: "en", interpolation: { escapeValue: false } });
Idiomas admitidos
| Código | Idioma | Estado |
|---|---|---|
en | Inglés | ✅ Completo |
es | Español | ✅ Completo |
Consulta TRANSLATION_STATUS.md para ver la cobertura detallada por clave.
Uso en componentes
import { useTranslation } from "react-i18next";
export function MyComponent() {
const { t } = useTranslation();
return <h1>{t("settings.account_privacy")}</h1>;
}
Archivos de traducción
src/i18n/
locales/
en/
translation.json
es/
translation.json
El backend también incluye sus propios archivos de traducción en apps/backend/translations/en.json y es.json para los mensajes de error del lado del servidor.
Selector de idioma
El componente LanguageSelector (en Configuración) cambia el idioma en tiempo de ejecución. La selección se persiste mediante localStorage a través de i18next-browser-languagedetector.
Agregar un nuevo idioma
- Crea
src/i18n/locales/<code>/translation.json - Copia todas las claves de
en/translation.json - Traduce cada valor
- Registra el nuevo locale en la configuración de i18n
- Agrega la opción a
LanguageSelector.tsx - Agrega el archivo correspondiente a
apps/backend/translations/