Idiomas

Los idiomas incluidos

Cada texto, etiqueta de botón, descripción de imagen, mensaje de formulario y título de página existe en los dos idiomas.

Cómo se elige el idioma

• El idioma es la primera parte de cada dirección: /en/pricing, /ar/pricing.
• 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 idioma del encabezado cambia al otro idioma y mantiene al visitante en la misma página.
• 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 define lang="ar" y dir="rtl" en la página, así que todo el diseño se refleja: el menú, las tarjetas, las flechas y las tablas 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.

La vista previa del panel en el hero mantiene un diseño de izquierda a derecha en los dos idiomas, como lo haría una captura real de un producto. Sus etiquetas están traducidas.

Dónde están los textos

Los textos se dividen por página en siete carpetas dentro de messages/, cada una 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 {year}, {count} y {planName}, las rellena el sitio. Déjalas como están.

Las etiquetas propias del sitio en árabe

Cuando escribas sobre el sitio 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, y a Locale, locales y localeNames en src/config/i18n.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 siete carpetas dentro de messages/, copia en.json con el código nuevo y traduce los valores. Conserva todas las claves y todas las palabras entre llaves. Para la carpeta de inicio:

   Terminalen Nextjs-landing-page-template-2Copiar

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

   Añádelo al menú de idioma

   Añádelo a la lista languages en src/components/LanguageSwitcher.tsx, con el país de la bandera que muestra, como { code: "fr", country: "FR" }.
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/hooks/locale/useDirection.ts, src/features/home/TestimonialsSection/hooks/useTestimonialsCarousel.ts y src/features/auth/forgot-password/components/ForgotPasswordForm/components/BackToSignInLink.tsx. Para una escritura que DM Sans 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. Los enlaces canónicos, los enlaces de idioma y el sitemap lo incorporan solos.