Using the exposed Link component from gatsby-plugin-react-i18next: import ĭue to the lack of details in your implementation and your data sources, I'm not able to guess how your query should look like. In your case, language holds the currently selected language. I hope this was a useful read for getting the way of thinking rather than the framework specifics.You have a bunch of options available using the gatsby-plugin-react-i18next plugin. I think the reason the i18n plugins won’t be the best fit for all types of multilingual sites is that they make assumptions which impose constraints on scalability of the project using them.
Plugins do have their role into solving problems when they are in a specific scope or when they provide enough flexibility in terms of implementation. The multilingual setup we end up with uses core functionalities without plugins: i18next, React patterns (HOC), Context API, hooks, and Gatsby’s createPage(), which facilitate the data management.
#Gatsby language switcher how to
Having these and the awareness about the state of i18n plugins, it’s natural to start on a new path of thinking: HOW to solve the problem without plugins? createPage() and pageContextįrom the previous section we reached a point where we know that we can achieve i18n with functions from Gatsby.js’s core. Per language a dedicated page is built (so no client-side translations) which is among other things important for SEO. Looking at the example of using i18n it says:Įxample site that demonstrates how to build Gatsby sites with multiple languages (Internationalization / i18n) without any third-party plugins or packages. When you build multilingual sites, Google recommends using different URLs for each language version of a page rather than using cookies or browser settings to adjust the content language on the page. Top plugins are either not scalable or are not production-ready.Ĭoming back to wiziple/gatsby-plugin-intl plugin which has a special WHY section:
It’s easy to see that react-intl and i18next are the go-to solutions in terms of using i18n frameworks, though at the same time Lastly, checking whether any of the top (most downloaded) plugins is used in a core plugin or an example: the answer is no. Shares approach and issues mentioned in angeloocana/gatsby-plugin-i18n: we can’t afford per-language page. The third plugin in the list is wiziple/gatsby-plugin-intl uses react-intl. That’s confusing: gatsby-plugin-18 vs gatsby-18n-plugin, first being a “no-no” and second one being “can’t start the starters”.
#Gatsby language switcher code
Looking at code of gatsby-i18n and gatsby-plugin-i18next packages we see that documentation is scarce and both haven’t been updated very frequently. Has an unofficial? mirror at hupe1980/gatsby-i18n. The second one ikhudo/gatsby-i18n-plugin also uses i18next. Imagine a site with 10 pages which will explode to managing 240 files for a simple site! However, it automatically goes out of the shortlist - it will not be ok to have 24 files for every single page. Looks promising with over 210 stars and separate packages for per-topic solutions. The first one angeloocana/gatsby-plugin-i18n uses react-intl and i18next. Trying to get information about the first one gatsby-plugin-i18n, it leads to Github search which shows several repositories, some of them are forks of a very close relation. When working on a Gatsby.js project, a research phase would usually consist of browing the following sources: In short, the tool or the approach taken to solve the issue should be maintenable. This way, I can switch the language in the blog post page.
#Gatsby language switcher Offline
Follow best practices, using battle-tested utilities. How to use Gatsby to build a blog with offline search, multi-languages, commenting system.Produce translated strings in both client/server rendered components.In my opinion, when evaluating approaches/tools for multilingualism with Gatsby.js, the solution should: Mostly, how to use core APIs to create a scalable system for delivering multilingual static sites. In this article I’ll reflect on the topic of i18n with Gatsby.js, the available plugins and core APIs. Creating a Gatsby.js website in so many languages is an edge case for which the guide on localization and internationalization with Gatsby.js might not help. There are 24 official languages in the European Union.
0 kommentar(er)
