Static i18n examples, using i18next and Locize vendor

i18n refers to both static content and dynamic content, even though both are handled very differently.
Read more about the concept

This section only showcases i18n for static content (nav, footer, etc.).
Dynamic content (DB records) is managed through GraphCMS and is completely unrelated.

NRN provides built-in static i18n support, based on:

i18next package : Core dependency
react-i18next package : What we actually use in NRN, mostly throught the t and Trans component.
Locize vendor packages (paid) : Vendor meant to help with static content localisation. Read our "How to use" and learn more about what benefits it brings

Each example below shows the rendered version and the associated code snippet.
The goal is to showcase real-world examples to help you get started faster and give a wider overview of what's possible.
Check the official documentation

Translation using `t` function

Simple translation

1
2
3


                {t('examples.i18n.simpleTranslation', 'Traduction simple')}

Translation with plurals

Plurals work with the count property, which is the amount of items.
It's a very particular variable, only meant for that purpose.
Read the doc

Translation with pluralisation

1
2
3


                {t('examples.i18n.pluralTranslation', 'Traduction avec gestion du pluriel', { count: 1 })}

Translation with pluralisations

1
2
3


                {t('examples.i18n.pluralTranslation', 'Traduction avec gestion du pluriel', { count: 2 })}

We found 1 solution for you.


                <Trans
                  i18nKey={'examples.i18n.dynamicPluralTranslation'}
                  count={1}
                >
                  Nous avons trouvé {{ count: 1 }} solution pour vous.
                </Trans>

We found 2 solutions for you.


                <Trans
                  i18nKey={'examples.i18n.dynamicPluralTranslation'}
                  count={2}
                >
                  Nous avons trouvé {{ count: 2 }} solution pour vous.
                </Trans>

Translation using variables

Automated fallback - Handling missing translations

It will happen that some translations are missing, in such case NRN has been configured to fallback to another language (AKA "fallback" language).
French has been defined as the default language in NRN (Locize configuration), meaning all translations must always exist for the French language.

Cette phrase n'est pas traduite en anglais, et sera affichée en Français même quand la langue anglaise est utilisée
(This sentence is not translated in English, and will be displayed in French even when English language is being used)
Note that I actually translated it (within the same sentence), so that non-French speakers may understand the explanation/feature.
Basically, if a static translation is not found in any non-primary language, then NRN automatically fall backs to another language, so that something gets displayed in any way.


                <Trans
                  i18nKey={'examples.i18n.missingTranslationWithFallback'}
                >
                  Cette phrase n'est pas traduite en anglais, et sera affichée en Français même quand la langue anglaise est utilisée<br />
                  (This sentence is not translated in English, and will be displayed in French even when English language is being used)<br />
                  <i>
                    Note that I actually translated it (within the same sentence), so that non-French speakers may understand the explanation/feature.<br />
                    Basically, if a static translation is not found in any non-primary language, then NRN automatically fall backs to another language, so that something gets displayed in any way.
                  </i>
                </Trans>

Customising translations, per customer

You may need to allow some translations to be overridden by a particular customer.
NRN comes with built-in support for this advanced need, and uses additional Locize "Languages" to store "variations" of the translations.

This translation is specific to customer "customer1".
Each customer may override its own translations by creating a Locize key in its "en-x-customer1" language.
This translation will override/replace the base translation, for this customer.

Exemple: As Customer 1, I can write anything I want here, that won't be displayed on other customer sites.


                <Trans
                  i18nKey={'examples.i18n.translationUsingCustomerVariation'}
                >
                  Cette traduction est spécifique au customer "{{ customerRef: process.env.NEXT_PUBLIC_CUSTOMER_REF }}". <br />
                  Chaque customer peut surcharger ses propres traductions, en créant une clé Locize dans son <code>"{{ customerVariationLang: resolveCustomerVariationLang(lang)}}"</code> langage.<br />
                  Cette traduction va surcharger/remplacer la traduction de base, pour ce customer.<br />
                  <br />
                  Exemple:
                </Trans>

This requires you create a new Language in Locize first, for instance: fr-x-customer1 and en-x-customer1

The -x- stands for "variation", it's the official way to create custom language variations that are specific to your business needs, when using i18next.

You will need to check how this page displays on other customers to see this particular behaviour.
Check out the README to see all other demos. (e.g: customer 1/2)