What is correct way change current language when i use dynamic routes?

[Valeronlol]

I'm trying to change current language the next way.

import { i18n } from '../../../i18n'
// ...
  <button onClick={() => i18n.changeLanguage('de')}>change</button>
// ...

Also use dynamic routes like:

• pages
  -- user
  --- [id].js

When I switch the language on any other page everything works fine, but when I try to change lang on /[lang]/user/[id] route - the following error will be thrown:

Uncaught (in promise) Error: The provided `as` value is incompatible with the `href` value. This is invalid. https://err.sh/zeit/next.js/incompatible-href-as
    at router.js:198
    at new Promise (<anonymous>)
    at new F (_export.js:36)
    at Router.change (router.js:139)
    at Router.replace (router.js:136)
    at changeLanguageCallback (app-with-translation.js:120)
    at app-with-translation.js:160
    at done (i18next.js:2051)
    at i18next.js:2068
    at Connector.prepareLoading (i18next.js:1607)
    at Connector.load (i18next.js:1619)
    at I18n.loadResources (i18next.js:1975)
    at setLng (i18next.js:2067)
    at I18n.changeLanguage (i18next.js:2077)
    at _callee$ (app-with-translation.js:159)
    at tryCatch (runtime.js:45)
    at Generator.invoke [as _invoke] (runtime.js:271)
    at Generator.prototype.<computed> [as next] (runtime.js:97)
    at asyncGeneratorStep (asyncToGenerator.js:3)
    at _next (asyncToGenerator.js:25)

I use latest version of next and next-i18next versions.
A similar problem was with using Link imported from i18n, but i resolve it using Router.

[isaachinman]

Can you please provide a reproducible example?

[Valeronlol]

Sure, https://github.com/Valeronlol/next-i18next-bug-report
I took your example as a basis, but can not find the correct way how to create i18n.js file in docs.
Maybe issue is there(in i18n.js configuration), but I don't see it.
You should go to /user/[id] page and try to change language.
Thanks a lot! :)

[isaachinman]

Looks like a genuine bug:

Uncaught (in promise) Error: The provided `as` value (/de/user/1) is incompatible with the `href` value (/user/[id]).

We could potentially use the subpath-is-present util to strip subpaths off the as value when changing language here.

PR welcome.

[Valeronlol]

My team figured out how to solve this problem with switching dynamic routing in our project, by moving language switch button to static /profile route. But the issue still remained in the next-i18next library.
I set up the project locally and tried to solve this problem, but as I understand it, this is not a bug in the code, but in the approach.
Next.js from version 8 is against using different "as" and "href" urls.
Maybe you should open an issue in next and ask how they suggest a solution to a similar problem with routing.
At the moment I see nothing better than giving up of path preffixing and pass "lang" parameter in query string. And it will entail a lot of refactoring and next-i18next v4 :)

[isaachinman]

#413 is already open for that, and there are already issues open on the NextJs repo.