2021-06-30
4461
#react
Ibadehin Mojeed
56905
Jun 30, 2021 ⋅ 15 min read

React localization with i18next

Ibadehin Mojeed I'm an advocate of project-based learning. I also write technical content around web development.

Recent posts:

6 CSS Frameworks Every Developer Should Use In 2025

Top 6 CSS frameworks every frontend developer should know in 2025

Tight deadline? Bloated CSS options? This guide breaks down six modern CSS frameworks, from Beer CSS to CodeStitch — that help you build fast, beautiful UIs in 2025.

Murat Yüksel
May 27, 2025 ⋅ 10 min read
A crash course in Next.js middleware

A crash course in Next.js middleware

Learn the ins and outs of Next.js middleware, which allows you to perform actions before a request is completed and modify the response accordingly.

Temitope Oyedele
May 23, 2025 ⋅ 9 min read
How AI Is Changing Debugging With Google Gemini

How AI is changing debugging with Google Gemini

The Google Gemini AI model has integrated AI-powered features to improve the debugging experience in web development.

Emmanuel John
May 23, 2025 ⋅ 5 min read
10 Node.js 24 features you're probably not using

10 Node.js 24 features you’re probably not using

The Node.js 24 release included significant updates. Explore 10 features you might not be using yet — but absolutely should be.

Emmanuel John
May 22, 2025 ⋅ 8 min read
View all posts

5 Replies to "React localization with i18next"

  1. Thank you for a great article. It really covers most of what I need. But in the example the date format for “English” is MM/DD/YYYY – which is US date format. Does the component allow for the NZ/AU/UK English date format too, ie DD/MM/YYYY? Cheers.

    1. You are welcome JB.

      For countries that have the same language, we can add the COUNTRY clarifier. For example, English in the United States would be en-US, and English in the United Kingdom would be en-GB. We’ve covered this approach in this guide, https://blog.logrocket.com/react-intl-internationalize-your-react-apps/.

      But basically, all you have to do is open the language directory: public/locales/{lng} and replace “en” with “en-US” or “en-GB” or add both depending on what you want. Then ensure this change reflect in the file where we switch locales in the dropdown. In our case, Header.js file. This way, the Intl date API automatically formats the date according to the selected locale.

      Thank you.

  2. Hello and thanks for the great article – in it, you say to “use Google Translate” – it sounds like a very tedious task to have to do this manually for thousands of pages on our website that we would like to translate into 20 languages. Also, what happens for any text updates within the pages? Does that mean a manual update the translation across all of the same pages again?

    I might be missing something though? Not unlikely

    Is there a React solution similar to the PHP solution offered by Gtranslate.io?

    1. Thank you, Will Bligh!

      The concern you raised is valid. As outlined in the guide, i18next supports the concept of “backend”. With this, it lets us integrate a translation management system, such as locize (https://locize.com/), developed by the creators of i18next, to automate the translation process in all the languages you’re working with. It’s important to note that this comes with associated costs.

      If you are curious about how to implement this, there’s a helpful YouTube video (https://www.youtube.com/watch?v=ds-yEEYP1Ks) from the creator explaining the integration process.

      I hope this helps!

  3. Hi,
    How to do so with custom backend translation syntax such as Laravel, where the replace variable is :ex instead of {{ex}} and pluralization as well.

Leave a Reply