Idiomas

Los idiomas incluidos

Cada etiqueta, botón, leyenda de gráfico, encabezado de tabla, mensaje de formulario y título de página existe en ambos idiomas.

Cómo se elige el idioma

• El idioma es la primera parte de cada dirección: /en/dashboard/analytics, /ar/dashboard/analytics.
• Un visitante que abre / es enviado a /ar cuando su navegador prefiere el árabe, y a /en en caso contrario. Lo hace src/proxy.ts.
• El menú de idiomas del encabezado, una bandera con su código, cambia el idioma y mantiene al usuario en la misma página. En un teléfono está en el menú de usuario. Language en Settings, Preferences hace lo mismo.

De derecha a izquierda

En /ar, src/app/[locale]/layout.tsx fija lang="ar" y dir="rtl" en la página, así que todo el diseño se refleja: la barra lateral pasa a la derecha, y las tarjetas, tablas y menús se leen de derecha a izquierda.

Los componentes usan clases lógicas de Tailwind que siguen la dirección, como ms-2, pe-4, start-0 y text-start. Cuando añadas código, usa estas en lugar de ml-*, pr-*, left-* o text-left, o la página en árabe se verá mal.

Dónde están los textos

Los textos están divididos por página dentro de messages/, cada carpeta con un en.json y un ar.json:

Cambia un texto

• Cambia el valor en el archivo en inglés y el correspondiente en el archivo en árabe. Mantén las mismas claves en ambos.
• Si falta una clave en un archivo, la página de ese idioma muestra su nombre en lugar del texto.
• Las palabras entre llaves, como {theme}, las rellena la app. Déjalas tal cual.

Las etiquetas en árabe del propio panel

Cuando escribas sobre el panel en árabe, usa las etiquetas que muestra:

Añade un idioma

1. 01

   Añade su código al enrutamiento

   Añade el código del idioma a locales en src/i18n/routing.ts. Por ejemplo, francés:

   src/i18n/routing.tsCopiar

   locales: ['en', 'ar', 'fr'],
2. 02

   Añade sus archivos de mensajes

   En cada una de las ocho carpetas de messages/, copia en.json con el código nuevo y traduce los valores. Conserva cada clave y cada palabra entre llaves. src/i18n/request.ts los carga por el código del idioma, así que cada carpeta necesita el archivo. Para la carpeta common:

   Terminalen dashboard-template-1Copiar

   cp messages/common/en.json messages/common/fr.json
3. 03

   Añádelo al menú de idioma

   Añádelo a languageOptions en src/components/LanguageSelector.tsx, con su nombre, una etiqueta corta y una bandera de country-flag-icons, como { id: "fr", label: "Français", shortLabel: "FR", Flag: FR } con FR añadido a la importación de banderas.
4. 04

   Configura su dirección y su fuente, si las necesita

   Solo el árabe se trata como de derecha a izquierda. Para otro idioma de derecha a izquierda, amplía las comprobaciones locale === "ar" en src/app/[locale]/layout.tsx, src/components/calendar.tsx, src/components/themeToggle.tsx, src/features/dashboard/overview/components/CardSection/CardStack/index.tsx y en QuickTransferSheet/index.tsx de la transferencia rápida. Para una escritura que Inter no cubre, añade una fuente con next/font en layout.tsx.

Reinicia yarn dev, o construye de nuevo, y el idioma nuevo responde en su propia dirección, aquí /fr/login.