Idiomas

Los idiomas incluidos

Cada texto, descripción de imagen y etiqueta de botón, y el título y la descripción de la página, existen en ambos idiomas, en messages/en.json y messages/ar.json.

Cómo se elige el idioma

• El idioma es la primera parte de la dirección, /en o /ar.
• Un visitante que abre / va a /ar cuando el navegador prefiere el árabe, y a /en en los demás casos. De esto se encarga src/middleware.ts.
• El botón de idioma del encabezado cambia al otro idioma y mantiene al visitante en la misma página. Sus etiquetas son LocaleSwitcher.names en los archivos de mensajes.
• Cada idioma tiene su propio título, descripción y dirección canonical, y cada página indica a los buscadores dónde está el otro idioma.

De derecha a izquierda

En /ar, src/app/[locale]/layout.tsx pone lang="ar" y dir="rtl" en la página, así que todo el diseño se invierte: el menú, las tarjetas, las flechas y la tabla 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 marcado, usa estas en lugar de ml-*, pr-*, left-* o text-left, o la página en árabe saldrá mal. Una flecha que debe apuntar al otro lado en árabe lleva rtl:rotate-180.

src/hooks/usePriceFormatter.ts escribe los precios en el idioma de la página.

Cambia un texto

Cambia el valor en messages/en.json y el correspondiente en messages/ar.json. Mantén las mismas claves en ambos archivos y conserva tal cual las palabras entre llaves, como {brand}.

• Dónde está cada texto

Las etiquetas en árabe de la propia página

Cuando escribas sobre la página 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 el francés:

   src/i18n/routing.tsCopiar

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

   Añade su archivo de mensajes

   Copia el archivo en inglés con el nuevo código como nombre y traduce cada valor. Conserva cada clave y cada palabra entre llaves.

   Terminalen landing-page-template-2Copiar

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

   Ponle nombre en el selector de idioma

   Añade el nombre del idioma en LocaleSwitcher.names en cada archivo de mensajes, como "fr": "Français". El encabezado muestra entonces un botón para cada idioma distinto del actual.
4. 04

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

   Un idioma de derecha a izquierda va en RTL_LOCALES en src/i18n/direction.ts. Todos los idiomas salvo el árabe usan Inter con caracteres latinos; para otra escritura, añade una fuente en src/lib/fonts.ts y elígela para ese idioma en src/app/[locale]/layout.tsx.

Reinicia yarn dev, o vuelve a construir, y el nuevo idioma responde en su propia dirección, aquí /fr.