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:

Fix over-caching with dynamic IO caching in Next.js 15

Next.js 15 caching overhaul: Fix overcaching with Dynamic IO and the use cache directive.

David Omotayo
Aug 6, 2025 ⋅ 10 min read
LLMs are facing a QA crisis here’s how we could solve it

LLMs are facing a QA crisis: Here’s how we could solve it

LLM QA isn’t just a tooling gap — it’s a fundamental shift in how we think about software reliability.

Rosario De Chiara
Aug 4, 2025 ⋅ 7 min read

Windsurf vs. Cursor: When to choose the challenger

Windsurf AI brings agentic coding and terminal control right into your IDE. We compare it to Cursor, explore its features, and build a real frontend project.

Chizaram Ken
Jul 31, 2025 ⋅ 9 min read

The CSS if() function: Conditional styling will never be the same

The CSS Working Group has approved the if() function for development, a feature that promises to bring true conditional styling directly to our stylesheets.

Ikeh Akinyemi
Jul 30, 2025 ⋅ 12 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