- Documentation
- Packages
- intlayer
- getMultilingualUrls
Documentation: getMultilingualUrls Function in intlayer
Description:
The getMultilingualUrls function generates a mapping of multilingual URLs by prefixing the given URL with each supported locale. It can handle both absolute and relative URLs, applying the appropriate locale prefix based on the provided configuration or defaults.
Parameters:
url: string
- Description: The original URL string to be prefixed with locales.
- Type: string
locales: Locales[]
- Description: Optional array of supported locales. Defaults to the configured locales in the project.
- Type: Locales[]
- Default: localesDefault
defaultLocale: Locales
- Description: The default locale for the application. Defaults to the configured default locale in the project.
- Type: Locales
- Default: defaultLocaleDefault
prefixDefault: boolean
- Description: Whether to prefix the default locale. Defaults to the configured value in the project.
- Type: boolean
- Default: prefixDefaultDefault
Returns:
- Type: IConfigLocales<string>
- Description: An object mapping each locale to its corresponding multilingual URL.
Example Usage:
Relative URLs:
1import { getMultilingualUrls, Locales } from "intlayer";
2
3getMultilingualUrls(
4 "/dashboard",
5 [Locales.ENGLISH, Locales.FRENCH],
6 Locales.ENGLISH,
7 false
8);
9// Output: {
10// en: "/dashboard",
11// fr: "/fr/dashboard"
12// }Absolute URLs:
1getMultilingualUrls(
2 "https://example.com/dashboard",
3 [Locales.ENGLISH, Locales.FRENCH],
4 Locales.ENGLISH,
5 true
6);
7// Output: {
8// en: "https://example.com/en/dashboard",
9// fr: "https://example.com/fr/dashboard"
10// }Edge Cases:
No Locale Segment:
- The function removes any existing locale segment from the URL before generating the multilingual mappings.
Default Locale:
- When prefixDefault is false, the function does not prefix the URL for the default locale.
Unsupported Locales:
- Only the locales provided in the locales array are considered for generating the URLs.
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 getMultilingualUrls can be used in an application setup:
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 getMultilingualUrls function can dynamically generate multilingual URL mappings based on the application's supported locales:
1getMultilingualUrls(
2 "/dashboard",
3 [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
4 Locales.ENGLISH
5);
6// Output:
7// {
8// en: "/dashboard",
9// fr: "/fr/dashboard",
10// es: "/es/dashboard"
11// }
12
13getMultilingualUrls(
14 "https://example.com/dashboard",
15 [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
16 Locales.ENGLISH,
17 true
18);
19// Output:
20// {
21// en: "https://example.com/en/dashboard",
22// fr: "https://example.com/fr/dashboard",
23// es: "https://example.com/es/dashboard"
24// }By integrating getMultilingualUrls, 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