React Multi Language App - I18next Tutorial

in this video you will learn how to configure react multilanguage i8n website at some point of developing your website you might want to make it multilanguage which actually means you have not only single language like English but maybe you need several translations of your websites for users from other countries for example let's say you want to translate your website to German how can you do that and typically we're using for this package which is called i18n as you can see this is the official website and this is the most popular framework which is used in different languages and Frameworks in order to bring multilanguage support to you really easy and in this video we are mostly focused on the front end and as an example react and actually for react we are not using IAT next directly we're using it through additional package react I next which is exactly binding of this I8 next package inside react let's try to use it now in order to do that we must install a single package and it is react I8 next but it is not all obviously we must also install the core package I8 next itself now we must jump inside our project and here in source of our react project I want to create a new file and let's name it I8 N.J the main idea is that the most simple case of switching between languages is to store all your translations inside your bundle of client JavaScript then without page reload we can simply switch translations in our website and we will store all our translations as the first step inside this file so first of all here we want to import i8n from I8 next now here we must call i8n do use and inside we must provide a react bindings this is where here on the top we must import in need react I8 next from react I8 next now here inside use we're providing this in need react it next and after this we're calling in need and we're providing inside the object most importantly here is to provide resources which stores all our languages let's say that here we have English and German then we can create a key English this is also an object and inside we must write a key translations and inside this translations key we will store all our translations for example let's say that we have a word welcome that we want to translate so here we're creating a key it can be whatever you can even name it f and the value will be welcome now we must copy paste this part for every single language that you want to install in our case it will be just German so de and here translation of word welcome must be will Common and as you can see the key is staying the same across all our translations in different languages this is extremely important and additionally to resources we can provide here different options this is why here let's write debug through it helps with debugging a lot because we will see some logs from IAT next then fallback language will be English because this is our default language and we want to set here interpolation as an object and we're providing inside Escape value which will be false why is that because react escapes all our values by itself we don't need to do that additionally and the last thing that we need here we want to export here as a default our IAT next configuration so again we're storing all our translations in this file and we want to reuse them everywhere I'm sorry for Interruption but I just want to let you know that I have lots of advanced courses on different web Technologies where we create real applications and prepare for the interviews you can find the link in the description box below now let's jump back into the video and in order to do that let's open our app as you can see this is a simple component and on the top we can import use translation from react I next which actually means from this package we are getting a hook which makes F translations available in any component so what we want to D structure here is a letter T or you can write translate this is a function and we're calling here use translation without any options now inside of H1 I want to render a property and here we want to render t as a function and provide inside a key and our key was welcome because this is the only stream that we created there as you can see in browser we're getting a warning here inside console react I8 next you need to pass an I8 next instance by using init react I8 next what does it mean essentially here we passed it inside but we never used this i8n that we prepared this is why we must jump inside main TS and import it here on the top just like this we're simply importing our file that we prepared and we're good to go as you can see now we don't have any errors and let's reload out the page and this is exactly what I wanted to show you we're getting lots of logs from I8 next and they extremely helpful to debar problems first of all here we can see language changed English because this is our fallback language here is I8 next initialize we see the whole bunch of options inside and after this we're getting errors missing key English translation welcome welcome which actually means we did something wrong with translations of the keys essentially I next does not see our keys at all and actually the problem here is that inside our resources the key should be translation and not translations let's check again where loading the page and we don't get any warnings we're getting here I next initialize and here we see word welcome on the screen which actually means we successfully configured I8 next and it uses our default language but the next question is obviously how we can change our languages and this is why we must build a switch between them and in order to do that inside our app I want to create languages array which will have objects and here first of all I want to store our code for example English and the name here will be our label so here we want to write English now let's do exactly the same but for German so it will be D and here we will write German and now what we can do we can simply render this languages inside as a switch so here I want to Loop through our languages and we're getting access to every single language and here I want to just render a button for every single language so here it will be language. name and here we want a non click event and inside it we want to tell I next that we want to switch our language and in order to do that we must get it next here and then we can use it directly inside our on click so it will be i8n do change language this is a function and we must provide a key code inside and this is our language do code that we just created as you can see here I am missing key this is why we can say that our key is our language code because this is our unique ID we don't have any errors let's open browser no errors here we have two buttons English and German now I'm clicking on the button German and my text was directly changed again it is happening without page reloading simply with JavaScript I'm clicking on English and this text is being changed again so this was the easiest variant how you can use I next inside re The Next Step step that you for sure want is you want to move your translations to external files why that just imagine we're talking here about all our translations and we are writing them in a single file even if we have like 100 translations multiply with the amount of the languages we can have here like 200 300s of lines just for our translations it is much easier to support it if we split it to several files and load additionally which actually means it is not optimal to bundle everything in a single bundle and additionally to this question we have another question it is really tedious to add every single Key by hands and then use it in your code typically what a lot of developers would prefer especially in big teams is simply use some translations like maybe here I want a word Fu this Fu does not exist then I am just calling some command when I'm finished with writing my feature and and all these translations magically must appear inside our I8 next file which actually means we don't need to jump here and add all them by hands it must simply work and in order to achieve that we can use another Library which is called it next scanner and the goal of this library is to scan your code and extract keys from your code this is exactly what we want to do now but in order to do that I want to create inside my front folder a new file which will be a next scanner. config do CJs now here I will paste the whole config and actually this is mostly the default config of this library with small changes first of all here let's look on the inputs this is what files we're looking for we're looking here for JavaScript or GSX files inside our source folder we want for sure to skip here our specs if we're writing test node module folder and I next folder which is situated as you can see inside root our output will be in root in exactly this i8n folder this is why we're ignoring it there are some options for debug compatibility and the list of functions and this is important because this is for what functions this package will look inside our code and as you saw we used T there for translations it might be that you will use I 18 n.t or i next. t if you're using something else then you must write it here additionally we're specifying here what languages do we have it is English and German default language is English and here our name space is called translation and this is where our resources are situated it is i8n then SL language like English or German then here will be translation word. Json now what I want to do inside console we can call npx then I8 next scanner it will install this package and here we're providing our config I8 next scanner config CGS I'm hitting here enter and as you can see first of all we got here the whole config from I8 next scanner and at the end it shows us what it did and here as you can see edit a new translation key welcome to this file i8n English translation and then de translation let's look on these files now inside front end folder there is i8 and folder now and we have here two additional folders te and n and inside we have a file translation Json which actually means we are storing all our translations as a hug Json and here we have a key welcome but no value which essentially means after this scanner somebody need to go and by hands put all these translations but even person without any knowledge of programming can do that because it is simply the Json file so here we must write welcome because this is in English and inside the we want to write willon now we can go back inside of front end Source ATN config and instead of this resources we want to create resources again with two keys English and German but here inside translation we don't want to pack an object we want to pack our ad Json which actually means here on the top we can import our English from and here we can just take this path of 18 next English then translation Json and exactly the same we can do with d e and then it will be 18 next de translation Json now here we can throw inside translation English and translation de which actually means now we're not writing all these translations by hand we simply call our scanner it scans all our keys inside our project and generates them inside this Json file let's check if it's still working I'm load in the page we're getting welcome I'm clicking on German and it is welon but now we're taking this values from external sources let's try with one more keys to check if it is working here at the end I want to write t with word news to create a new key now inside our console I can run this scanner and as you can see it added a new translation key use now I just need to jump inside I next English translation news will be a word news and inside D the translation will be let's look in browser we're getting here on the right news we're switching to German and we're getting which actually means our code is working so now we're storing our translations in external files we can even load them additionally dynamically but it is still not flexible enough typically in huge projects you want to store your translations on the back end to serve via API then you don't need to load any additional chunks and you can load your language on demand how can we do that as you can see here I have a folder backend with just a package log with scores and express so here I want to create a new file index.js and create here an extremely minimal Express project so first of all here we need an Express which we're calling by requiring Express we also need here course so we can make our request from the client and we also need here path because we want to load all our translation files in the API now here let's create our app which will be our Express and we want to call Here app use course and we want to start our API with listen on Port 3005 now this is the smallest Express server that you can write the only thing that we're missing we want to serve our translations here inside this is why here we can write use with/ loales and as a second parameter we can write Express static and here the path will be path join and we want to get our directory name and concatenate it with locales which actually means here inside our backend project we want to create a folder locals where inside we have English folder and German folder just like on the front end and inside English I want to create translation. Json and here let's create just an object with key welcome like we had there and it will be welcome and the same stuff inside D so it will be translation. Json with welcome word but here we will write will Common so actually what our backend does it serves as a static files this loales files which essentially means our client doesn't know anything about translations at all we are simply loading them through API as you can see now in browser I can access these files on Local Host 3000 f/ loales sl/ transation Json now I can write here D and they can access our German translation now the only question is how we can access this CI on our client and in order to do that we must install an additional package on our client so inside fronted I am installing I8 next HTTP back end and this is an additional package which will help us to get our translations from API now inside our front end folder I want to jump inside source I8 next and here on the top I want to import this HTTP backend from I8 next HTTP backend and now here after our use in it react we must try one more use and provide inside HTTP backend our resources is totally fine but additionally here we want to provide a backend path this is where here backend is an object and inside we have a lowed Path property where we must past such construction so here we have our Local Host 3005 loales and here we have two variables it is a language and then n s this is our namespace this is just a word translation the last thing here that we should not forget is to comment out these resources we don't need them anymore because here we specified that we want to load everything through our back end let's check this out I'm reloading the page here we see welcome and news I'm clicking on German and we see will Common and news and it happens because on the back end we didn't translate this new use keyword this is totally fine this is why we're getting here the missing key inside console but most importantly inside our Network we can see the loading of this translation Json it is the get request to our local sl/ transation and now if we want to update our translation of news we can open again our backend loc and create here a key news which will be news and for German it will be news key and here will be now when weo our page we're getting here and from our API but you might also want to know how to implement optimistic updates inside react and why do we need them at all and I already covered that in this video

Channel: Monsterlessons Academy

Views: 5,117

Keywords: react multi language app

Id: IophVqi_SEc

Length: 18min 20sec (1100 seconds)

Published: Tue Jan 09 2024