Awesome
Introduction
What is react-i18next?
react-i18next is a powerful internationalization framework for React / React Native which is based on i18next. Check out the history of i18next and when react-i18next was introduced.
{% hint style="info" %} You should read the i18next documentation. The configuration options and translation functionalities like plurals, formatting, interpolation, ... are documented there. {% endhint %}
The module provides multiple components eg. to assert that needed translations get loaded or that your content gets rendered when the language changes.
{% embed url="https://www.youtube.com/watch?t=705s&v=SA_9i4TtxLQ" %}
react-i18next is optimally suited for server-side rendering. It provides extra extension point to work with next.js, for e.g. Learn more.
As react-i18next depends on i18next you can use it in any other UI framework and on the server-side (node.js, .net, ...) too. Like the React philosophy - just:
Learn once - translate everywhere.
{% hint style="success" %}
Here you'll find a simple tutorial on how to best use react-i18next.
Some basics of i18next and some cool possibilities on how to optimize your localization workflow.
<img src=".gitbook/assets/title width (1).jpg" alt="" data-size="original">
{% endhint %}
{% hint style="info" %}
Using Next.js?
Here you'll find a blog post on how to best use next-i18next with client side translation download and SEO optimization.
Using Next.js 13 with the new app directory?
Then this article is what you are looking for!
{% endhint %}
{% hint style="info" %}
Using Remix?
Here you'll find a simple example and here a step by step tutorial on how to best use remix-i18next.
{% endhint %}
{% hint style="info" %}
Using Gatsby?
Here you can find an example and an appropriate blog post.
{% endhint %}
What does my code look like
Before: Your React code would have looked something like:
...
<div>Just simple content</div>
<div>
Hello <strong title="this is your name">{name}</strong>, you have {count} unread message(s). <Link to="/msgs">Go to messages</Link>.
</div>
...
After: With the Trans component just change it to:
...
<div>{t('simpleContent')}</div>
<Trans i18nKey="userMessagesUnread" count={count}>
Hello <strong title={t('nameTitle')}>{{name}}</strong>, you have {{count}} unread message(s). <Link to="/msgs">Go to messages</Link>.
</Trans>
...
If you prefer not using semantic keys but text - that's also possible.
On top: Localization as a service
i18next supports translation management tools such as locize.com.
{% hint style="success" %}
Here you can find a step by step guide, which will unleash the full power of i18next in combination with locize.
See how your developer experience with this localization workflow could look like.
There's also the possibility to have an even more focused developer experience, with the help of the auto-machinetranslation workflow and the use of the save missing keys functionality, new keys not only gets added to locize automatically, while developing the app, but are also automatically translated into the target languages using machine translation (like Google Translate).
{% endhint %}
{% embed url="https://www.youtube.com/watch?v=TFV_vhJs5DY" %}