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

Рет қаралды 23,374

Күн бұрын

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.
🔴 GitHub Repo: github.com/banishnarang/yt-re...
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

Пікірлер: 31

@yasha6466 2 жыл бұрын

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.

@gmsadiq4134 Жыл бұрын

Thank you! Beginner perspective it's was Amazing

@yaroslavbulavin3613 2 жыл бұрын

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

@INSPRDMUSIC 3 ай бұрын

WORKS. THANK YOU.

@ec9386 2 жыл бұрын

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

@sajithram5414 11 ай бұрын

awesome video bro a big thanks for your effort

@Zen-wn3hn 2 жыл бұрын

thnks helped me a lot :)

@umarkhankhodjaev Жыл бұрын

boom!!! Amazing broo !!!!

@manujose9110 Жыл бұрын

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.. :/

@mohamedyoussef8835 2 жыл бұрын

Awesome Video ++++++++++++++++++++ Thank you

@user-jm9ns4uj9g Жыл бұрын

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

@bohdanshkaran2606 2 жыл бұрын

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?

@yousuckatcoding 2 жыл бұрын

Hey! I believe there has to be some form of consistency when it comes to the server response. If you mean for any data that was entered by the user, then it should be entered-saved-returned-displayed in the same language user filled it out in. With regards to your api responses like success, error etc., you can have a file for them. Once you get a response from the server, the client can fetch the translation dynamically from the respective translation file. Eg: key = “profile update successful” for all language files (which the api returns) and the value would be different in each language file which would be rendered on the screen.

@vinitagaikwad3683 Жыл бұрын

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

@shawslayer1 2 жыл бұрын

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.

@gyanendraprakash3656 2 жыл бұрын

did you get any solution, i'm also facing this issue

@shawslayer1 2 жыл бұрын

@@gyanendraprakash3656 I had to remove it.

@gyanendraprakash3656 2 жыл бұрын

@@shawslayer1 I'm facing error missing key can we discuss on telegram, need help

@aditigune7037 11 ай бұрын

@@shawslayer1 i also did the same

@longnhat6405 Жыл бұрын

nice

@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 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

@Said-gn1bm Жыл бұрын

can you maybe share the code i want to do the same.. i want so save the different text in other files and show it then

@EnglishTurkishExpert Жыл бұрын

@@Said-gn1bm Unfortunately, could not solve the problem. In the meantime, I have some other urgent jobs and I cannot return to this project.

@ansriaz1257 Жыл бұрын

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

@navneetjuneja6269 2 жыл бұрын

Please provide source code link

@yousuckatcoding 2 жыл бұрын

There you go! github.com/banishnarang/yt-react-i18next

@aditigune7037 11 ай бұрын

background music is annoying

@miguelsousa483 Жыл бұрын

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 (localStorage.getItem("i18nextLng")?.length > 2) { | i18next.changeLanguage("en"); | } " ps: the code u writing on the header.json , im writing on app.js, don't know if it matters