How should I implement language switching suggestion?

[abriginets]

I have the following component in my NextJS app:

I implemented the component and stored the translations in each json file:

"language-suggestions": {
  "aria-label": "Suggested language dialog",
  "ru": {
    "title": "Мы говорим по-русски!",
    "description": "Вы просматриваете версию сайта для корееязычных посетителей. Хотите перейти на русскоязычную версию сайта прямо сейчас?",
    "actions": {
      "yes": "Перейти на <flag></flag>",
      "no": "Остаться"
    }
  },
  "uk": {
    "title": "Ми говоримо українською!",
    "description": "Ви переглядаєте версію сайту для корейськомовних відвідувачів. Бажаєте перейти на українськомовну версію сайту прямо зараз?",
    "actions": {
      "yes": "Перейти на <flag></flag>",
      "no": "Лишитись"
    }
  },
  "en": {
    "title": "We speak English!",
    "description": "You are viewing the version of the site for korean-speaking visitors. Do you want to switch to the English version of the site right now?",
    "actions": {
      "yes": "Switch to <flag></flag>",
      "no": "Stay"
    }
  }
},

But this doesn't seem right to store russian, ukrainian and english translations inside of ko.json where korean translations are stored. I wonder, is there a better way to do this? Perhaps some kind of partially loaded translation chunk?

[amannn]

I think it's fine 👍. I mean, I guess these labels will even be the same for each locale, so you could even consider not handling them in next-intl in the first place. But it can still be nice for pluralization etc., so this is surely fine from my perspective.

Two things to be aware of though:

1. Use the lang attribute when switching the language in the middle of the page.
2. Consider if a flag is appropriate here (English ≠ United Kingdom). Flags can be fine if what you're switching is really the country.

[laGameTV]

Regarding specifying locale keys for individual elements, would it be feasible to implement a feature where we can explicitly define the locale to use for a specific translation key?

For example, something along the lines of:

t('nativeName', {locale: "en"})
// or
t('nativeName', null, "en")

Or does this functionality already exist?

[amannn]

You can use await getTranslations({locale: 'en'}) on the server side (ref). On the client side this is not possible.

But it's not what I'd suggest for the question that was asked in this thread as it loads all messages of that locale.

[abriginets]

@amannn what if we await getTranslations({locale: 'en'}) on the server (async component) and stream only the required chunk to the client?

[amannn]

stream only the required chunk to the client

What exactly does that mean?

You can certainly do something like this:

function ServerComponent() {
  const t = await getTranslations({locale: 'en'});
  return <LanguageSuggestion title={t('title')} ... />
}

… where LanguageSuggestion is a Client Component.

[abriginets]

That's basically what I meant :)

The entire {locale}.json would stay on the server and only the required title, description and actions will be streamed by React to the client side.

[abriginets]

Just implemented the idea. Now every language is at it's corresponding {locale}.json file plus fully type-augmentation compatible.

 {
 "languageSuggestion": {
  "ariaLabel": "Language suggestion dialog",
  "title": "We speak English!",
  "description": "You are viewing the {locale, select, uk {Ukrainian} ru {Russian} ko {Korean} es {Spanish} fr {French} de {German} it {Italian} id {Indonesian} pt {Portuguese} tr {Turkish} vi {Vietnamese} tl {Tagalog} other {unknown}} version of the site. Would you like to switch to the English version right now?",
  "actions": {
    "yes": "Switch to",
    "no": "Stay"
  }
},

[amannn]

That's an interesting pattern, thanks for sharing it @abriginets!