1. Documentation
    2. Packages
    3. intlayer
    4. getLocalizedUrl

    Documentación: getLocalizedUrl Función en intlayer

    Descripción:

    La función getLocalizedUrl genera una URL localizada al prefijar la URL dada con el locale especificado. Maneja tanto URLs absolutas como relativas, asegurando que el prefijo de locale correcto se aplique según la configuración.

    Parámetros:

    • url: string

      • Descripción: La cadena de URL original que se debe prefijar con un locale.
      • Tipo: string

    • currentLocale: Locales

      • Descripción: El locale actual para el cual se está localizando la URL.
      • Tipo: Locales

    • locales: Locales[]

      • Descripción: Array opcional de locales soportados. Por defecto, se proporcionan los locales configurados en el proyecto.
      • Tipo: Locales[]
      • Predeterminado: Configuración del Proyecto

    • defaultLocale: Locales

      • Descripción: El locale predeterminado para la aplicación. Por defecto, se proporciona el locale predeterminado configurado en el proyecto.
      • Tipo: Locales
      • Predeterminado: Configuración del Proyecto

    • prefixDefault: boolean

      • Descripción: Si se debe prefijar la URL para el locale predeterminado. Por defecto, se proporciona el valor configurado en el proyecto.
      • Tipo: boolean
      • Predeterminado: Configuración del Proyecto

    Retorna:

    • Tipo: string
    • Descripción: La URL localizada para el locale especificado.

    Ejemplo de Uso:

    URLs Relativas:

    typescript
    1import { getLocalizedUrl, Locales } from "intlayer"; 2 3getLocalizedUrl( 4 "/about", 5 Locales.FRENCH, 6 [Locales.ENGLISH, Locales.FRENCH], 7 Locales.ENGLISH, 8 false 9); 10 11// Salida: "/fr/about" para el locale francés 12// Salida: "/about" para el locale predeterminado (inglés)

    URLs Absolutas:

    typescript
    1getLocalizedUrl( 2 "https://example.com/about", 3 Locales.FRENCH, // Locale Actual 4 [Locales.ENGLISH, Locales.FRENCH], // Locales Soportados 5 Locales.ENGLISH, // Locale Predeterminado 6 false // Prefijar Locale Predeterminado 7); // Salida: "https://example.com/fr/about" para el francés 8 9getLocalizedUrl( 10 "https://example.com/about", 11 Locales.ENGLISH, // Locale Actual 12 [Locales.ENGLISH, Locales.FRENCH], // Locales Soportados 13 Locales.ENGLISH, // Locale Predeterminado 14 false // Prefijar Locale Predeterminado 15); // Salida: "https://example.com/about" para el inglés 16 17getLocalizedUrl( 18 "https://example.com/about", 19 Locales.ENGLISH, // Locale Actual 20 [Locales.ENGLISH, Locales.FRENCH], // Locales Soportados 21 Locales.ENGLISH, // Locale Predeterminado 22 true // Prefijar Locale Predeterminado 23); // Salida: "https://example.com/en/about" para el inglés

    Locale No Soportado:

    typescript
    1getLocalizedUrl( 2 "/about", 3 Locales.ITALIAN, // Locale Actual 4 [Locales.ENGLISH, Locales.FRENCH], // Locales Soportados 5 Locales.ENGLISH // Locale Predeterminado 6); // Salida: "/about" (sin prefijo aplicado para locale no soportado)

    Casos Límite:

    • Sin Segmento de Locale:

      • Si la URL no contiene ningún segmento de locale, la función añade de forma segura el locale apropiado.

    • Locale Predeterminado:

      • Cuando prefixDefault es false, la función no añade un prefijo a la URL para el locale predeterminado.

    • Locales No Soportados:

      • Para locales no listados en locales, la función no aplica ningún prefijo.

    Uso en Aplicaciones:

    En una aplicación multilingüe, configurar la internacionalización con locales y defaultLocale es crítico para asegurar que se muestra el idioma correcto. A continuación se muestra un ejemplo de cómo getLocalizedUrl se puede utilizar en la configuración de una aplicación:

    tsx
    1import { Locales, type IntlayerConfig } from "intlayer"; 2 3// Configuración para locales soportados y locale predeterminado 4export default { 5 internationalization: { 6 locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH], 7 defaultLocale: Locales.ENGLISH, 8 }, 9} satisfies IntlayerConfig; 10 11export default config;

    La configuración anterior asegura que la aplicación reconozca ENGLISH, FRENCH y SPANISH como idiomas soportados y use ENGLISH como el idioma de reserva.

    Usando esta configuración, la función getLocalizedUrl puede generar URLs localizadas dinámicamente basadas en la preferencia de idioma del usuario:

    typescript
    1getLocalizedUrl("/about", Locales.FRENCH); // Salida: "/fr/about" 2getLocalizedUrl("/about", Locales.SPANISH); // Salida: "/es/about" 3getLocalizedUrl("/about", Locales.ENGLISH); // Salida: "/about"

    Al integrar getLocalizedUrl, los desarrolladores pueden mantener estructuras URL consistentes en múltiples idiomas, mejorando tanto la experiencia del usuario como el SEO.

    Si tienes una idea para mejorar esta documentación, no dudes en contribuir enviando una pull request en GitHub.

    Enlace de GitHub a la documentación
    getLocaleNamegetMultilingualUrls

    En esta página