Go international with your next app: Using i18next to add multilingual support to your React App

Still creating monolingual apps in 2021? Learn how to take your web application to the next level by adding multilingual support to it.

In this tutorial we will be learning how to use i18next framework to add internationalization to a react app. The video provides a step by step walkthrough from setting up a react project to creating and fetching language translations with the click of a button.

Timestamps:
00:00 - Intro
00:25 - Setting up a React app
02:23 - Installing and setting up React Router v6
06:25 - Installing Bootstrap v4.6
07:18 - Building the Header
14:08 - Building the Profile page
16:36 - Installing i18next packages
18:05 - Setting up i18next inside the app
25:48 - Adding translation files
29:40 - Adding translations to Home
31:31 - Adding translations & language change handler to Header
36:46 - Adding translations to Profile
39:20 - Outro

⭐️ Hashtags ⭐️
#React #ReactJS #i18next #i18n #localization #internationalization #multilingual #language #frontend #developer #development #software

⭐️ Tags ⭐️
- React
- ReactJS
- i18next

[yasha]

Thank you very much for this video and especially the repo! I was building a multilingual website and this helps a bunch!

[weekendcode]

I followed all the step of this video. This is awesome. Thank you for sharing this great skill.

[gmsadiq]

Thank you! Beginner perspective it's was Amazing

[yaroslavbulavin]

Thank you a lot, man! You save me today :)

[sajithram]

awesome video bro a big thanks for your effort

[ec]

Thank you very much! Really nice explanation and example!
非常謝謝你！
非常感谢您！
どうもありがとうございます！
😂😂😂

[manujose]

Thanks a lot. Tutotial felt inpressive. Can we add some more extended version if these such as loading resources from external api

[shecodeshk]

is there a way to retrieve all the available languages in your app?
for e.g. to dynamically list out all the available languages in the select drop down menu for which the user can then choose to switch to?
i18n.languages won't work unless you explicitly preload all of them in init.. :/

[bohdanshkaran]

Hey, that's a nice video. Have a question. My app gets the data from api. It can be a random text. What to do with translation files in this case? Should the server send them too?

[jmnsujg]

what should i do, if i get data from API?

[vinitagaikwad]

Can we change app URL when we change the language with i18Next?

[shawslayer]

Thank you for the explanation. I have a question with setting up the i18n.js file. I am trying to do this but with typescript. When I add react: {wait:true}, I get the error "No overload matches this call." I am not sure how different the setup is from js to typescript.

[ansriaz]

I follow all the steps but found an error that i18next::translator: missingKey en common you you

[EnglishTurkishExpert]

I tried your code and that's pretty good.
However in my use case, I have a localized paragraph text which I successfully show/render using <Trans /> domponent and I have some sub data (in array format consisting of objects) need to iterate through and render.
While map function successfully iterates through object array (indicated by console.log expressions) the spans I am dynamically creating do not render.
Would you please show us an example for iterating and dynamically creating an array of translations!
TIA

[miguelsousa]

im getting an error, if u could help me would be great
"
./src/Navbar.js 20:43
Module parse failed: Unexpected token (20:43)
You may need an appropriate loader to handle this file type.
|
| useEffect(function () {
> if > 2) {
|
| }
"

ps: the code u writing on the header.json, im writing on app.js, don't know if it matters

[ProMakerDev]

i was really hoping you cover dynamic content, like this <h1>hello mr {username}, welcome</h1> BUT over all it was a really good video, thankss