Internacionalización

Agrega soporte multilenguaje a tu app. Usa la Proyecta Content API para la localización editorial, o pídele a la IA que integre un framework de i18n directamente en el código.

Proyecta admite dos enfoques complementarios para internacionalizar las apps que construyes:

1. Localización de contenido mediante la Proyecta Content API — para contenido editorial (entradas de blog, preguntas frecuentes, textos de marketing) que necesita traducirse a varios idiomas
2. i18n a nivel de código mediante un framework de traducción — para cadenas de UI, fechas, monedas y cambio de idioma en tiempo de ejecución

Ambas opciones funcionan hoy. Cuál necesitas depende de qué estás traduciendo.

Proyecta como builder se entrega con 24 locales, así que el producto domina el i18n. Los mismos patrones aplican a las apps que construyes dentro de él.

Opción 1: Localización de contenido (Proyecta Content API)

Si estás construyendo un sitio con mucho contenido — blog, base de conocimiento, páginas de marketing, catálogo de productos — usa el soporte de locales integrado en la Content API.

// Create the locales you support
await proyecta.content.locales.create({
    /* code: 'en', name: 'English' */
});
await proyecta.content.locales.create({
    /* code: 'es', name: 'Español' */
});
await proyecta.content.locales.create({
    /* code: 'fr', name: 'Français' */
});

// Then create entries that exist in multiple locales — fetch the right
// translation per request based on the user's locale.

Esta es la opción correcta cuando:

• Editores que no escriben código necesitan traducir contenido
• Quieres que las traducciones tengan control de versiones
• Necesitas publicación por locale (la publicación programada llegará pronto — actualmente las entradas requieren publicación manual vía la API)

Consulta Gestión de contenido para ver la Content API completa.

Opción 2: Framework de i18n a nivel de código

Para cadenas de UI — etiquetas, botones, mensajes de error, fechas, monedas — pídele a la IA que integre un framework de i18n directamente en tu proyecto:

Add internationalization to my app.
Support English, Spanish, French, and Arabic.
Add message catalogs in src/locales/.
Add a language switcher in the header.
Use locale-prefixed URLs like /en/about and /es/about.
Make sure RTL layout works correctly for Arabic.

La IA:

1. Elegirá un framework — la IA usa i18next con react-i18next (el estándar de Proyecta)
2. Creará los archivos de catálogo en src/locales/ (un JSON por idioma)
3. Envolverá los textos en llamadas t() (del hook useTranslation de react-i18next)
4. Agregará un componente selector de idioma
5. Configurará el enrutamiento por URL con prefijos de locale
6. Manejará layouts RTL (dir="rtl") para árabe, hebreo, etc.
7. Formateará números, fechas y monedas según el locale

Auto-traducción con la IA

Una vez que tu idioma base esté listo, la IA es excelente para generar los demás archivos de catálogo:

• "Translate every string in src/locales/en.json into Spanish, French, German, and Japanese. Use natural, idiomatic phrasing — don't translate brand names."
• "My app is fully built in English. Add Spanish translations for everything and an es/ route prefix."

Para contenido de alto riesgo (textos legales, médicos, financieros), pide a un traductor humano que revise el resultado de la IA antes de publicarlo.

Combinar ambos enfoques

La mayoría de las apps reales usan los dos: i18n a nivel de código para el chrome de la UI (botones, errores, navegación), y la Content API para el contenido editorial (artículos, descripciones de productos). Coexisten sin problema — tu framework de i18n maneja los archivos de catálogo en tiempo de build, la Content API sirve las entradas localizadas en tiempo de ejecución.

Mejores prácticas

1. Elige tu idioma base y finaliza los textos primero. Traducir algo que sigue cambiando es muy costoso.
2. Agrupa las traducciones. No traduzcas sobre la marcha — espera a que una funcionalidad esté estable.
3. Prueba RTL desde el principio si admites árabe o hebreo. Los bugs de RTL no aparecen hasta que realmente los buscas.
4. Incluye lang y dir en <html>. Los navegadores y los lectores de pantalla dependen de ello.
5. Usa Intl para el formateo. No construyas tu propio formateador de fechas o monedas — usa Intl.DateTimeFormat, Intl.NumberFormat.

Próximamente

• UI de gestión de locales dentro del builder — elige locales, revisa la cobertura de traducción y edita catálogos sin salir de Proyecta
• Auto-traducción al guardar para cadenas nuevas
• Plantillas de proyectos listas para i18n con el framework preconfigurado