Idiomas

Los idiomas incluidos

Todos los textos visibles vienen de messages/en.json o messages/ar.json, incluidos los textos alternativos, las etiquetas de los botones para lectores de pantalla y el título y la descripción de la página.

Cómo se elige el idioma

• El idioma es la primera parte de la dirección: /en o /ar.
• Una dirección sin idioma, como /, redirige al idioma del visitante: árabe para un navegador configurado en árabe, inglés para cualquier otro. Durante el resto de la sesión del navegador recuerda el último idioma abierto, en una cookie NEXT_LOCALE.
• /en y /ar siempre abren su propio idioma.
• El selector de idioma de la barra de navegación y del menú móvil muestra el nombre del otro idioma y mantiene al visitante en la página.
• Los atributos lang y dir de la página siguen el idioma, igual que el enlace canónico y los enlaces de idioma para los buscadores.

Cambia un texto

Cambia el valor en los dos archivos de mensajes y conserva la clave. Una clave que falte en un archivo aparece como un error de mensaje ausente en la página de ese idioma, así que mantén los dos archivos sincronizados.

• Qué clave contiene qué texto

De derecha a izquierda

El layout usa clases lógicas de Tailwind como ms-*, pe-*, start-* y end-*, así que los márgenes, rellenos y posiciones se invierten solos en árabe. Úsalas, y no ml-* o left-*, cuando añadas marcado. Los iconos de flecha se giran con rtl:-scale-x-100.

Las etiquetas en árabe del propio sitio

Cuando escribas sobre el sitio en árabe, usa las etiquetas que muestra su página:

Añade un idioma

Con el francés como ejemplo, con el código fr:

1. 01

   Añádelo al enrutamiento

   En src/i18n/routing.ts, añade el código a locales:

   src/i18n/routing.tsCopiar

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

   Crea su archivo de mensajes

   Copia el archivo en inglés y traduce sus valores. Conserva todas las claves.

   Terminalen landing-page-template-1Copiar

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

   Ponle nombre en el selector de idioma

   Añade "fr": "Français" dentro de localeSwitcher.names en todos los archivos de mensajes.
4. 04

   Dale una configuración regional para las tarjetas sociales

   En src/i18n/openGraphLocales.ts, añade fr: "fr_FR". La comprobación de tipos de la compilación falla hasta que cada idioma tenga ahí una entrada.
5. 05

   Solo para un idioma de derecha a izquierda

   Añade su código a RTL_LOCALES en src/i18n/getDirection.ts. El layout carga Noto Sans Arabic solo para ar: para otro alfabeto, carga una fuente adecuada en src/app/[locale]/layout.tsx.