DEV Community

How to properly internationalize a React application using i18next

Adriano Raiano on April 14, 2021

Overcoming the language barrier for users who use your software is an important topic. English is no longer the universal language of the internet....

Read full post

Pankaj Patel • Apr 15 '21

Wow! This is long a resourceful article. Good job with covering i18next in its completeness.

Would you mind adding a small Table of Contents? I wanna use i18next in my next project and was evaluating it with next.js. Seems not so complicated.

Though I also like the library suggested by @pretaporter down in the comment because of its very compact size but haven't tried it yet.

Maksim • Apr 17 '21

Thanks, @pankajpatel ! Do not hesitate ask any questions about usage eo-locale, I would happy to help

Pankaj Patel • Apr 18 '21

Thanks @pretaporter for the help.. sure will reach out to you 🙌

Manohar • Oct 10 '23

i want to now that does i18n supports Hindi Language

Adriano Raiano • Apr 15 '21

thx for the TOC advice, just added 😉

Oleg Chursin • Mar 5 '22

Great article. Thank you!

Ceddy Muhoza • Apr 5 '22

super 🚀🚀🚀

Jason Lewis • Mar 18 '22

Wow, an amazingly detailed and thorough walkthrough. I was looking for a good intro article on i18n in React for one of our junior devs and this covers everything. Thanks for saving me a lot of time.

Paolo Di Pietro • Nov 7 '21 • Edited

Thanks Adriano, good post!

But I have a couple of questions:

1) How do you solve the following sentence `I received a gift from Abruzzo' '...from Marche' and '... from Lombardia' giving the fact that in the Italian language (and in many other) the result should be 'dall'Abruzzo', 'dalle Marche' and 'dalla Lombardia'?

2) What is the best way to introduce markup in the text to be translated, if possible?
Something like "I'd like to drink a Red wine" without the need to split this short sentence in three parts?

Thank you

Adriano Raiano • Nov 8 '21 • Edited

Ciao Paolo!

1) I would use the context feature of i18next combined with the interpolation functionality:

// en.json
{
    "key": "I received a gift from {{context}}"
}

// it.json
{
    "key": "Ho ricevuto un regalo da {{context}}",
    "key_Abruzzo": "Ho ricevuto un regalo dall'Abruzzo",
    "key_Marche": "Ho ricevuto un regalo dalle Marche",
    "key_Lombardia": "Ho ricevuto un regalo dalla Lombardia"
}

// when language is italian:
i18next.t('key',  { context: 'Abruzzo' }); // Ho ricevuto un regalo dall'Abruzzo
i18next.t('key',  { context: 'Marche' }); // Ho ricevuto un regalo dalle Marche
i18next.t('key',  { context: 'Lombardia' }); // Ho ricevuto un regalo dalla Lombardia
i18next.t('key',  { context: 'Trieste' }); // Ho ricevuto un regalo da Trieste

// when language is english:
i18next.t('key',  { context: 'Abruzzo' }); // I received a gift from Abruzzo
i18next.t('key',  { context: 'Marche' }); // I received a gift from Marche
i18next.t('key',  { context: 'Lombardia' }); // I received a gift from Lombardia
i18next.t('key',  { context: 'Trieste' }); // I received a gift from Trieste

2) best is to use the Trans component for this:

<Trans i18nKey="key">
  I'd like to drink a <strong>Red</strong> wine
</Trans>

{
    "key": "I'd like to drink a <1>Red</1> wine"
}

Aleksey Razbakov • Apr 20 '21

Great article!

I had to localise lots of apps and the best translation management so far was Google Spreadsheet. I wrote a small cli script to sync spreadsheet to yml files with flat structure, so it's easy to see changes in git diff.

I hope it can be useful for someone else too - github.com/razbakov/sourcy

Lars Rye Jeppesen • Apr 14 '22 • Edited

So this is all translated runtime using downloaded json files?

I much prefer Angular's built in compile-time i18n, simple to use, and doesn't add any overhead at all for performance.

Isn't there a compile-time React i18n project? I can't imagine going back to runtime translation.

Thanks in advance

Adriano Raiano • Apr 14 '22

probably fbt is than more suited for you? dev.to/adrai/i18n-in-the-multivers...

Lars Rye Jeppesen • Apr 14 '22

Thanks mate, I'll take a look. cheers

Adriano Raiano • Apr 14 '22

btw: there is no need to lazy load translations, you can also bundle them and add them on init for example… i18next.com/how-to/add-or-load-tra...

Kevin • Jun 9 '21

Hello!

This was really helpful, however I'm still a bit confused.

What would be a neat way to handle i18n if the values are coming from a database. So there's a value in the db but on the UI we need to show a "friendly" translated version of this.

Example -

Db value -> Tech
UI En -> Technology
UI Fr -> French translation of Tech

Cheers!

Adriano Raiano • Jun 9 '21

just save the translation keys (not the actual translation) in the database…
or at least sync those with the TMS, like with locize via API or via CLI

Prasham Ashesh • Apr 15 '21

Oh my! this is a really big article, took me quite some time to reach the comment section.
I wish there would be a cleaner way for implementing internationalization, internationalization sure sends chills down my spine 😅
I have used react-intl in the past, will continue to explore more, internationalization definitely seems like a pain point for all.

Adriano Raiano • Apr 15 '21

I know... pretty long article, but I wanted to include from the first line of i18n code until the production setup... 🤷‍♂️

Samuel • May 11 '21

Thank you Adriano, I learnt a lot of topics with your article.
I have one doubt related with the topic. In a existing project, how do you check if codebase is clean of hard-coded texts? Do you use any library or lint extension to check and prevent hard coded texts?