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ón | Inglés | Árabe |
|---|---|---|
| Sitio web | /en/… | /ar/… |
| Panel | /en/… | /ar/… |
| API | Accept-Language: en | Accept-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
/enen 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 comoAccept-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ón | Espacios de nombres |
|---|---|
| Sitio web | layout, 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. |
| Panel | ai-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.jsonaparece 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 elmessagede 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 (comocheckout_started) que el frontend redacta por sí mismo.ar-SAcuenta 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/yar/, 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.jsonen 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/.
- Añade el código a
localesensrc/i18n/routing.ts. Esa lista decide qué direcciones existen, qué lista el mapa del sitio y a qué idioma va una ruta sin idioma. - Copia cada
messages/<namespace>/en.jsona un archivo con el nombre del nuevo código y traduce los valores.src/i18n/request.tscarga un archivo por espacio de nombres para cada idioma, así que no puede faltar ninguno. - Haz lo mismo con
src/content/docs/,src/content/journal/ysrc/content/changelog/, y añade el nuevo archivo a la tablabyLocaledelindex.tsde cada carpeta. - Si el idioma se escribe de derecha a izquierda, amplía la línea
dirdesrc/app/[locale]/layout.tsx, que solo conocear, y dale una tipografía ensrc/styles/fonts.css. - El pago envía
enoara la API (src/features/checkout/hooks/useCheckoutForm.ts), y la API acepta solo esos dos. Busca"ar"ensrc/y trata también allí el nuevo código.
Añade un idioma al panel
- Añade el código a
localesensrc/config/i18n.tsy ensrc/proxy.tsy, si se escribe de derecha a izquierda, aRTL_LOCALESensrc/app/layout.tsxy a la comprobación desrc/hooks/locale/useDirection.ts. - Copia cada
messages/**/en.jsona un archivo con el nombre del nuevo código y traduce los valores. - Busca
"ar"ensrc/: las fechas, los gráficos, los widgets del asistente y algunos ajustes eligen directamente entre los dos idiomas, ypickLocaleensrc/lib/api/shared.tselige un texto guardado en inglés o en árabe. - 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.