App router withoout i18n routing - switch locale from client

[bryanlundberg]

Hello,

I have been trying to implement this system, but the documentation is not very precise on the topic of "without i18n routing". Even the available example does not show a way to switch the language Example: App Router (without i18n routing)

The documentation mentions that this strategy does not require the use of Middleware or the wrap Navigation API 🤷‍♂️
I do not quite understand how to place a select input to change the language and sync all application.

I did a small attempt wrapping the Navigation API and using router.replace("/", {locale: selectLocale}), but this method adds the locale to the URL.

Thanks.

[amannn]

It really depends on how you're storing the locale in your app. There's some discussion in #1081, including a strategy for updating the locale in case you use a cookie—this might help!

We might expand the docs in regard to this at some point, for the time being I'm collecting use cases of users.

[bryanlundberg]

I was saving the chosen language in localStorage along with all other user settings.

But already found a solution that I was not expecting. Instead of using the "without i18n routing" configuration, I used the "i18n routing" configuration. I think it's easier, and just set the localePrefix = "never".

For switching language on the client side, I handled it this way:

  function onSelectChange(event: ChangeEvent<HTMLSelectElement>) {
    const nextLocale = event.target.value;
    Cookies.set("NEXT_LOCALE", nextLocale);
    router.refresh();
  }

At the end result looks the same i was searching 🤷‍♂️