How can I use a different language than the locale in the URL?

[LoganBaek97]

I want to display content in a different language without changing the locale in the URL. For example, I want to use Japanese (ja) content while the URL shows English (en).

The getMessages({locale}) function has a locale parameter, but other methods don't allow specifying a locale to fetch translation files. What's the best way to handle this? Currently, I'm using getMessages({locale}) with the desired language wherever needed and passing the messages to NextIntlClientProvider.

[amannn]

Can you share some background on why you'd want to show a different locale in the URL than what is used in your content?

But yes, the workaround you've mentioned is definitely valid.

There was a related discussion recently here: #1355.

[LoganBaek97]

Thank you for your answer. To provide some background,

I'm developing a multilingual assessment platform where the server sends the assessment results in the language of the assessment. However, on the client-side, we display the content in the language specified by the URL, not the assessment language. This creates a mismatch between the server language and the client language.

For example, if a Japanese assessment was conducted and the URL locale is set to English, the assessment results would be displayed in Japanese, while other text managed by the client would be shown in English.

[amannn]

Got it, that makes sense. It's a bit different from #1355 in this case, since as far as I understand you want to display mixed content from multiple languages at the same time. I think your current approach is fine here.

Async functions like getTranslations btw. also accept a locale param, this could be helpful in case you can render the content in Server Components and want to avoid downloading messages from a secondary locale to the client. On the client side however, NextIntlClientProvider is the only option to change the locale for a given part of the tree.

As a side note, for mixed content you might want to consider setting the lang attribute on relevant text content that differs from the main language (in case you're not already doing this).

[LoganBaek97]

Thank you.

I wasn't aware that we could pass an object as a parameter to the getTranslations function. Would it be difficult to make the same change for useTranslations as well? I'm also curious about whether there would be any performance issues if we use nested NextIntlClientProviders.

[amannn]

For getTranslations the situation is somewhat straightforward, as since we know that we're on the server side, we can consult i18n/request.ts to load relevant messages and make them available to the call site immediately. On the client side however, with useTranslations, this is unfortunately not the case—therefore you need to use NextIntlClientProvider.

I'm also curious about whether there would be any performance issues if we use nested NextIntlClientProviders.

Nope, definitely fine!

[LoganBaek97]

Thank you. Have a great day!