Next-i18next: Provide fix locale option for Link component.

[StarpTech]

Hello,
I recently faced with an issue where I need to reload the whole page because my page is constructed with multiple localized sources. Some are static others are fetched from an CMS.

In order to avoid a reload of the whole page I need to retrigger the getInitialProps of all components. This can be done by manipulating the router state but this is a bit hacky I couldn't fix it yet.

Another solution would be to provide a different attribute locale for the Link component to generate specific localized URLs. This is very helpful to provide urls in order to switch the user language. The switch or (router change) would occur a rerender of the page and all content would be in sync.

<Link locale="de" href="/product"></Link>

Resolves to /de/product

Related:
https://github.com/isaachinman/next-i18next/issues/298

[isaachinman]

What's your actual request? You can wrap anything with the withNamespaces HOC and it'll get re-rendered on locale change.

[StarpTech]

I do it but it doesn't trigger a refetch of getInitialProps

[isaachinman]

Of course not. That runs during SSR and client side route changes. You should use a different lifecycle method.

[StarpTech]

Could you please wait with closing issues before the initial creator has solve its issue? I don't know what you mean with your last statement.

You should use a different lifecycle method.

Of course, I'm talking about client side route changes!

[isaachinman]

Whether or not getInitialProps is called is entirely a NextJs concern and has nothing to do with this package. Apologies for closing the issue but I do not believe it to be actionable.

[StarpTech]

Did you really read the issue description? It's not really related to that package but it's common issue in that domain where the localized content is fetched by an api and therefore I see no reason why we can't trying to solve it here together. If you have no power then it's fine but let the community time to answer.

[StarpTech]

For all other people who needs this:

  import { withNamespaces, Router } from '~/i18n';

  const changeLanguage = (e, locale) => {
    e.preventDefault();
    // 1. change static translations
    i18n.changeLanguage(locale).then(() => {
      // 2. trigger reload of getInitialProps to fetch localized content from CMS
      Router.push(
        {
          pathname: Router.pathname,
          query: Router.query
        },
        Router.asPath
      );
    });
  };

[lipoolock]

Thanks @StarpTech
Indeed it relies more on NextJs pattern, but since we are calling Router from i18n now, it concerns a little bit this package. Previously I was making a navigation to change language, with Link component. What about SEO approach with this pure JavaScript approach ?
This idea looks like an interesting pattern : https://github.com/kachkaev/next-i18n/blob/master/examples/basic/components/Menu.jsx
Why not taking that into account @isaachinman ?
(by the way, many thanks for your work and sharing this package to us :+1: )

[isaachinman]

@lipoolock Please see https://github.com/isaachinman/next-i18next/pull/306#issuecomment-491003672.

It's certainly possible to trigger a full route reload when the language changes, but:

1. It's not convincing that this should be internal to next-i18next as it's possible to do this in user land
2. Any implementation would need to be independent of localeSubpaths

[StarpTech]

@isaachinman @lipoolock let's discuss it in #305