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:

Where AI-assisted coding accelerates development — and where it doesn’t

Where AI-assisted coding accelerates development — and where it doesn’t

John Reilly discusses how software development has been changed by the innovations of AI: both the positives and the negatives.

John Reilly
Oct 22, 2025 ⋅ 12 min read
Debugging with Chrome DevTools MCP: Giving AI eyes in the browser

Debugging with Chrome DevTools MCP: Giving AI eyes in the browser

Learn how to effectively debug with Chrome DevTools MCP server, which provides AI agents access to Chrome DevTools directly inside your favorite code editor.

Emmanuel John
Oct 21, 2025 ⋅ 6 min read
Goodbye, useState? Smarter state modeling for modern React apps

Goodbye, useState? Smarter state modeling for modern React apps

Ever opened a React file and found a graveyard of useState hooks? The problem isn’t React; it’s how we model state. Here’s how to do it smarter.

Oscar Jite-Orimiono
Oct 21, 2025 ⋅ 9 min read

Why third-party integrations break in React 19 — And how to future-proof them

React 19 breaks old third-party integrations. Learn why concurrent rendering exposes brittle SDKs and how to rebuild them with resilient modern patterns.

Peter Aideloje
Oct 20, 2025 ⋅ 4 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

Would you be interested in joining LogRocket's developer community?

Join LogRocket’s Content Advisory Board. You’ll help inform the type of content we create and get access to exclusive meetups, social accreditation, and swag.

Sign up now