Idiomas

Los idiomas en los que viene

Abrir / lleva al visitante al idioma que prefiere su navegador, y al inglés cuando no prefiere ninguno de los dos. La barra de menú tiene un botón para el otro idioma; en móviles está dentro del menú.

De derecha a izquierda

El layout define lang y dir en la página según el idioma, así que en árabe el texto, la barra de menú, el texto del producto y los botones van de derecha a izquierda. La rueda 3D, las frutas flotantes, el hielo y la palabra gigante detrás de las latas mantienen su propia orientación en los dos idiomas.

El texto en árabe usa la fuente Cairo, mediante la regla html[lang="ar"] body en src/app/globals.css. Los idiomas que van de derecha a izquierda son la lista RTL_LOCALES en src/i18n/routing.ts.

Añade un idioma

Los pasos añaden el francés, fr. Usa el código de dos letras del idioma.

1. 01

   Añade el código al enrutado

   En src/i18n/routing.ts, añádelo a locales. Si el idioma se escribe de derecha a izquierda, añádelo también a RTL_LOCALES.

   src/i18n/routing.tsCopiar

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

   Crea su archivo de mensajes

   Copia el archivo en inglés y traduce cada valor. Deja las claves como están.

   Terminalen juicyCopiar

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

   Ponle nombre en el cambio de idioma

   El cambio de idioma muestra cada idioma con su propio nombre, desde localeSwitcher.names. Añade el nombre nuevo a todos los archivos de mensajes, incluido el nuevo.

   messages/en.jsonCopiar

   "names": {
     "en": "English",
     "ar": "العربية",
     "fr": "Français"
   }
4. 04

   Reinicia y ábrelo

   Detén yarn dev e inícialo de nuevo, y luego abre localhost:3030/frLocal.

   Resultado esperado: La página se abre en el idioma nuevo, y la barra de menú muestra un botón para cada uno de los otros dos.

   ¿Tienes problemas?

Un idioma en una escritura que Arial y Cairo no cubren necesita su propia fuente: cárgala en src/app/[locale]/layout.tsx como Cairo, y añade una regla para ella en src/app/globals.css como la del árabe.

Cambia el idioma por defecto o quita un idioma

defaultLocale en src/i18n/routing.ts es el idioma que recibe un visitante cuando su navegador no prefiere ninguno de los tuyos. Para quitar un idioma, sácalo de locales y de RTL_LOCALES, borra su archivo de mensajes y quita su nombre de localeSwitcher.names en los demás archivos. Con un solo idioma, el cambio de idioma no muestra ningún botón.