in Gatsby use multiple languages

i18n, is the abbreviation of internationalization and I develop this feature by following plugin: gatsby-plugin-react-i18next 👈 You can find lots of tips in official website

The following is the issues I met when developing

# not get current language list with gatsby-plugin-react-i18next

first little issue, I did not get the right list of languages like, I put in chinese and english in the setting config but I can only get one when I run the server so ... I google it to find what might caused this and I found this post and kind of solve this issue

looks like, I did not use the right way to use i18n instance

in my original gatsby-brwoser file be like:

// Wraps every page in a component
exports.wrapPageElement = ({ element, props }) => {
  return <Layout {...props}>{element}</Layout>;
};

there's a waring/error warn react-i18next:: You will need to pass in an i18next instance by using initReactI18next and after I use the way that blog offer it works.

# Hydration issue

and the second on is something about hydration

It happened when I open my website, then I will see this #418 andthis #422

I think these both are showing because of some hydrating issue (well, about this hydration thing, I'm not really understand well so... I will make another episode when I know more about it )

And, finally, the reason why this happen is briefly speaking, when I switch language this plugin will store current chosen in my localstorage then, when I open a new tab it will read if there are language in localstorage if it does existed, the page change to that language so here's the problem because I set english as default language and switching to chinese, store chinese in localstorage then open a new tab, default english is conflict with localstorage chinese causes the server-side-render is different from client-side-render

the solution here is not let website change to localStorage when fisrt load it can be fixed in plugin setting

// gastby-config
{
  resolve: `gatsby-plugin-react-i18next`,
  options: {
    //...config,
    generateDefaultLanguagePage: true, // add this
    redirect: false, // and this
  },
  //...setting
},

this is today's sharing 👋