Ir al artículo
Aniq-UI

NorthstackIdiomas

Idiomas

Cómo funcionan el sitio web y el panel en inglés y en árabe, cómo cambiar cualquier texto, qué traduce la API y qué cambiar para añadir un idioma.

Para el paquete Full Stack

Los idiomas incluidos

Inglés y árabe, en las tres aplicaciones. El árabe dispone toda la interfaz de derecha a izquierda, con sus propias tipografías, y el nombre del producto sigue siendo Northstack en letras latinas en ambos idiomas. Los precios del sitio web se escriben igual en ambos, con el signo del dólar primero y dígitos latinos.

AplicaciónInglésÁrabe
Sitio web/en/…/ar/…
Panel/en/…/ar/…
APIAccept-Language: enAccept-Language: ar

El inglés es el idioma por defecto. El francés, el español y otros idiomas no están incluidos; las secciones de abajo explican qué hace falta para añadir uno.

Cómo se elige el idioma

  • El idioma es la primera parte de la dirección. El menú Language lo cambia y conserva la página.
  • El sitio web: next-intl envía una ruta sin idioma a la elección anterior del visitante o al idioma de su navegador cuando es inglés o árabe, y a /en en caso contrario. El mapa del sitio lista cada página en ambos idiomas, cada una con su alternativa.
  • El panel: una ruta sin idioma se abre en el idioma en que el panel sirvió por última vez en ese navegador (la cookie NEXT_LOCALE), y en inglés en caso contrario, y la dirección sin ruta abre /<language>/dashboard. Cada petición que hace envía el idioma de la página a la API como Accept-Language.
  • Un enlace de restablecimiento de contraseña abre el panel en el idioma en que se pidió el restablecimiento, y las páginas de retorno del pago de licencias se abren en el idioma en que el comprador pagó.

Cambia un texto

Cada palabra visible está en messages/<namespace>/en.json y ar.json, en la carpeta de cada frontend. Cambia el valor, conserva la clave y cámbialo en ambos archivos.

AplicaciónEspacios de nombres
Sitio weblayout, home, pricing, checkout, docs, blog, changelog, contact, legal, sampleData. Los textos de la documentación, el diario y el registro de cambios están en src/content/docs/, src/content/journal/ y src/content/changelog/, con un en.json y un ar.json cada uno.
Panelai-assistant, auth, common, dashboard (con una carpeta por área: activity, billing, overview, platform, projects, roles, settings con adminmanagement, adminroles, appsettings, profile y security, team, ui-component, users), invitation, layouts, metadata (los títulos de pestaña), onboarding
  • Una clave que falta en ar.json aparece como mensaje ausente en la versión árabe, así que mantén los dos archivos sincronizados.
  • El texto entre llaves {curly} lo rellena la aplicación, como {count} o {license}. Conserva esas palabras tal cual en ambos idiomas, y mantén las etiquetas dentro de un mensaje, como <code> o <card>, alrededor de su texto.

Texto que el espacio de trabajo guarda en ambos idiomas

  • El nombre y la descripción de un proyecto y el título y la descripción de una tarea se guardan por idioma, como translations: { en, ar }. El nombre o título en inglés es obligatorio; el árabe es opcional, y el panel en árabe muestra el texto en inglés donde el árabe está vacío. Los datos de ejemplo rellenan ambos para cada proyecto y tarea de ejemplo.
  • Los permisos y los ajustes de la plataforma también llevan sus etiquetas y descripciones en ambos idiomas.
  • El Language de Settings del espacio de trabajo es el idioma de sus correos para quien no ha elegido idioma propio. El idioma de las pantallas es siempre el de la dirección.
  • El asistente de IA responde en el idioma de la página desde la que se le pregunta, salvo que la persona escriba en otro.

Qué traduce la API

  • Los mensajes de error vuelven en el idioma de la cabecera Accept-Language, y también el message de un inicio de sesión, un cambio de perfil, de personal, de rol o de ajustes correcto; las demás respuestas llevan un código fijo (como checkout_started) que el frontend redacta por sí mismo. ar-SA cuenta como árabe; cualquier idioma que la API no tenga recurre al inglés.
  • Sus propios textos son archivos JSON en back-end/src/i18n/translations/en/ y ar/, uno por área: admin, auth, common, mail, project, roles, settings, tasks, users.
  • Los proyectos y las tareas vuelven con ambos idiomas, como { "en": {…}, "ar": {…} }, y el panel elige uno.
  • Los correos sobre un espacio de trabajo (invitaciones, el resumen semanal y los correos de facturación) se redactan desde mail.json en el idioma del destinatario: su propia elección, si no el Language del espacio de trabajo, si no inglés (back-end/src/modules/mail/recipient-locale.ts). El correo de restablecimiento de contraseña (back-end/src/modules/auth/account.service.ts) y el recibo de licencia (back-end/src/modules/licenses/services/license-checkout.service.ts) están redactados en inglés, con enlaces en el idioma del lector; tradúcelos allí si tus clientes los necesitan en árabe.

Añade un idioma al sitio web

Los dos idiomas están escritos en unos pocos archivos, así que añadir un tercero toca cada uno de ellos. Las rutas están dentro de website/.

  1. Añade el código a locales en src/i18n/routing.ts. Esa lista decide qué direcciones existen, qué lista el mapa del sitio y a qué idioma va una ruta sin idioma.
  2. Copia cada messages/<namespace>/en.json a un archivo con el nombre del nuevo código y traduce los valores. src/i18n/request.ts carga un archivo por espacio de nombres para cada idioma, así que no puede faltar ninguno.
  3. Haz lo mismo con src/content/docs/, src/content/journal/ y src/content/changelog/, y añade el nuevo archivo a la tabla byLocale del index.ts de cada carpeta.
  4. Si el idioma se escribe de derecha a izquierda, amplía la línea dir de src/app/[locale]/layout.tsx, que solo conoce ar, y dale una tipografía en src/styles/fonts.css.
  5. El pago envía en o ar a la API (src/features/checkout/hooks/useCheckoutForm.ts), y la API acepta solo esos dos. Busca "ar" en src/ y trata también allí el nuevo código.

Añade un idioma al panel

  1. Añade el código a locales en src/config/i18n.ts y en src/proxy.ts y, si se escribe de derecha a izquierda, a RTL_LOCALES en src/app/layout.tsx y a la comprobación de src/hooks/locale/useDirection.ts.
  2. Copia cada messages/**/en.json a un archivo con el nombre del nuevo código y traduce los valores.
  3. Busca "ar" en src/: las fechas, los gráficos, los widgets del asistente y algunos ajustes eligen directamente entre los dos idiomas, y pickLocale en src/lib/api/shared.ts elige un texto guardado en inglés o en árabe.
  4. Los formularios de proyecto y de tarea piden inglés y árabe. Un tercer idioma en los textos guardados necesita además que la API lo acepte.

Añade un idioma a la API

La API conoce en y ar en supportedLocales en back-end/src/i18n/i18n.service.ts. Añade ahí el nuevo código, copia src/i18n/translations/en/ a una carpeta con su nombre y traduce los archivos. Los textos guardados son un par { en, ar }, validado por las clases de traducciones de src/modules/projects/dto/project.dto.ts y src/modules/tasks/dto/task.dto.ts, así que un tercer idioma en los datos es un cambio en esas clases, las entidades, las herramientas del asistente de IA y los datos de ejemplo. El pago de licencias acepta en o ar en src/modules/licenses/dto/start-license-checkout.dto.ts.

¿Te atascaste en un paso?

Busca una solución antes de empezar de nuevo.

Solución de problemas

Preferencias de Cookies

Utilizamos cookies para mejorar tu experiencia de navegación, analizar el tráfico del sitio y personalizar el contenido. Al hacer clic en "Aceptar Todo", consientes nuestro uso de cookies para análisis y publicidad personalizada.