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

    Documentation: getLocalizedUrl Function in intlayer

    Description:

    The getLocalizedUrl function generates a localized URL by prefixing the given URL with the specified locale. It handles both absolute and relative URLs, ensuring that the correct locale prefix is applied based on the configuration.

    Parameters:

    • url: string

      • Description: The original URL string to be prefixed with a locale.
      • Type: string

    • currentLocale: Locales

      • Description: The current locale for which the URL is being localized.
      • Type: Locales

    • locales: Locales[]

      • Description: Optional array of supported locales. By defaults, the configured locales in the project are provided.
      • Type: Locales[]
      • Default: Project Configuration

    • defaultLocale: Locales

      • Description: The default locale for the application. By defaults, the configured default locale in the project are provided.
      • Type: Locales
      • Default: Project Configuration

    • prefixDefault: boolean

      • Description: Whether to prefix the URL for the default locale. By defaults, the configured value in the project are provided.
      • Type: boolean
      • Default: Project Configuration

    Returns:

    • Type: string
    • Description: The localized URL for the specified locale.

    Example Usage:

    Relative URLs:

    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// Output: "/fr/about" for the French locale 12// Output: "/about" for the default (English) locale

    Absolute URLs:

    typescript
    1getLocalizedUrl( 2 "https://example.com/about", 3 Locales.FRENCH, // Current Locale 4 [Locales.ENGLISH, Locales.FRENCH], // Supported Locales 5 Locales.ENGLISH, // Default Locale 6 false // Prefix Default Locale 7); // Output: "https://example.com/fr/about" for the French 8 9getLocalizedUrl( 10 "https://example.com/about", 11 Locales.ENGLISH, // Current Locale 12 [Locales.ENGLISH, Locales.FRENCH], // Supported Locales 13 Locales.ENGLISH, // Default Locale 14 false // Prefix Default Locale 15); // Output: "https://example.com/about" for the English 16 17getLocalizedUrl( 18 "https://example.com/about", 19 Locales.ENGLISH, // Current Locale 20 [Locales.ENGLISH, Locales.FRENCH], // Supported Locales 21 Locales.ENGLISH, // Default Locale 22 true // Prefix Default Locale 23); // Output: "https://example.com/en/about" for the English

    Unsupported Locale:

    typescript
    1getLocalizedUrl( 2 "/about", 3 Locales.ITALIAN, // Current Locale 4 [Locales.ENGLISH, Locales.FRENCH], // Supported Locales 5 Locales.ENGLISH // Default Locale 6); // Output: "/about" (no prefix applied for unsupported locale)

    Edge Cases:

    • No Locale Segment:

      • If the URL does not contain any locale segment, the function safely prefixes the appropriate locale.

    • Default Locale:

      • When prefixDefault is false, the function does not prefix the URL for the default locale.

    • Unsupported Locales:

      • For locales not listed in locales, the function does not apply any prefix.

    Usage in Applications:

    In a multilingual application, configuring the internationalization settings with locales and defaultLocale is critical for ensuring the correct language is displayed. Below is an example of how getLocalizedUrl can be used in an application setup:

    tsx
    1import { Locales, type IntlayerConfig } from "intlayer"; 2 3// Configuration for supported locales and default locale 4export default { 5 internationalization: { 6 locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH], 7 defaultLocale: Locales.ENGLISH, 8 }, 9} satisfies IntlayerConfig; 10 11export default config;

    The above configuration ensures that the application recognizes ENGLISH, FRENCH, and SPANISH as supported languages and uses ENGLISH as the fallback language.

    Using this configuration, the getLocalizedUrl function can dynamically generate localized URLs based on the user's language preference:

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

    By integrating getLocalizedUrl, developers can maintain consistent URL structures across multiple languages, enhancing both user experience and SEO.

    If you have an idea for improving this documentation, please feel free to contribute by submitting a pull request on GitHub.

    GitHub link to the documentation
    getLocaleNamegetMultilingualUrls

    In this page