Translate website content using Next.js internationalization and next-i18next

hey what's up guys how's it going in today's video you're going to learn about internationalized routing in Nexus and how to translate your content from one language to another language using a package called next itin next but before we get started please consider like this video And subscribe to my channel it really helps me a lot so without further Ado let's get started alright guys so I have this basic startup project you can find this project on GitHub I'll put the link on the description use the starter bench for the starter code and get the final Branch for the final code I will open up the package.json file I have only installed an extra package called Next IIT next this package will be used for translating our data but we will go through that later in this video but first let me show you how you can add locals in your next year's project so let's just go over the next year's documentation quickly so this is the documentation page for Nexus internationalized routing now Nexus has built-in support for internationalized routing or i18n since version 10. to get started of internationalized routing we need to set locals now what is a local suppose you live in us and your language is English then your local will be en-us this first part is the language and the second part is the region you don't have to specify a region you can just simply specify the language if the region doesn't matter to you for example here the local name is NL which represents Touch without any kind of specific region now you can add whatever Locus you want you have to add them in your next config file so just go to the next config file actually let me just increase the font size for you okay now I think the font size is big enough so we have this next config object we need to add another property here which is called i18n and inside this object we need to specify the locus so just pass locals and this Locus will be an array of strings the strings are the names of the local so in my case I'm just gonna pass en for English and PN for Bengali and you can also set our default local I'm gonna set default local to English now how do you manage these locals there are two ways you can manage these Locus one is support routing another one is to main routing let me show you the domain routing first now the domain routing will look like this suppose the T4 local is English or slash en then if the user goes to example.com blog then the local will be en or English and if the user go to example.fr then the local will be friends or if the user go to example.nl then the local will be touched so whatever the domain extension will be the local will be equal to that okay now I'm not going to show you how to use the domain routing I'm going to show you how you can use Locus in subpath routing the subpass routing looks like this so if the user goes to domain slash Blog then the local will be the T for local in this case it will be English us if the user goes to slash FR slash block then the user local will be FR or French okay so that's how this subpath routing actually works and you can get the current local using the use router hook okay so let's see what are in the documentation you can also have automatic local detection using uh accept language header you can learn about this from the documentation but I'm not gonna go over them you can also use next year's middleware to manipulate the locals but that is beyond this video and just like I've told you you can access the local information using the user hook which I'll go over in a minute and also there's a transition between locals which I will also go through all right so I've talked enough about the nexius i18n so let's see how we can use them in our code so we have already added these locals and I will close all of these files and let's go to the Pages directory and just go to index.js so in this file we have bunch of code I have commented out most of them so basically we have imported the user hook the next GS link component and we have called the user the hook we've got two properties and a method the local property the locus array which is also a property and the push method which will be used to redirect user from one route to another route then we have this empty hand click function which I'll talk about in a minute then we have this H1 tag which will just print out our current local and if I go to the browser you can see that the local current local is printed out on the browser screen which is en okay and I have commented out most of the codes so I will uncomment this part so basically we have this H3 which says with use router and we have another H1 and we have looped over the locals array and if I go to the browser we have this two button en and BN now this two button are hooked up with this handle click function this handle click function will take l or local as a parameter so yeah so we have passed a local which will return us this up function this function will be used for on click which is totally empty for now so now let's see how we can change our current local there are two ways you can do this one way is to use the use router hook another way you can do this by using the Nexus link component so let's first see how we can do that using the push method so I will go inside this function body so I will call this push method and the first argument of the push method is the URL where you can redirect your user but I don't want to redirect my user to any other route I want to just change the local so I'm just gonna leave it as my current route which is just slash to change the local you need to pass two more argument to the push method the second argument will be a mask URL but we don't need that you can just pass undefined here and the third argument will be an object and inside the object you can specify the local so I'm just gonna pass local and local will be l okay so let's see if that changes our current local or not so if I click on en nothing should happen but if I click on BN the current local should turn it to be in so let's click on it and you can see that our current local is now PN and if you notice the current route the current route is slash BN if I click on en again now our current local is en and the current route is Slash so this is how you can change the local using the push method let me give you another example I will comment this on and I will copy this and this time the redirect URL will be slash about I have already an about.jsx file everything is almost commented out but if you go to slash about it will show you the current local so let's save the file and if I click on slash en it takes me to the slash about page and it says the current locally CN and there is a go to home link using the anxious link component which will take me to the home page and now I'm back again in my home page if I click on PN now my current local ESPN and the route is slash VN slash about and let's go back again now my current local ecn okay so that's how you can change the current local using the push method but you might ask a question what if I specify the local in this route in the first argument well you can do this but it's not recommended because because it might have some weird Behavior so you can do something like this and you don't pass any other arguments and this might work but it is not recommended because it can give you some weird behaviors so that is not recommended so not recommended so now that we know how to change the local using the push method let's see how we can do the same thing using the nexius link component so I will comment this again and I will uncomment this out again so again we have pretty much the same thing but this time instead of button we have used next year's link component the href is slash we have passed another prop which is called local and we have also passed a local here so if you click on this link it will take you to the route that you have specified in the Asia prop and also the local will be changed so let's see if that works or not so we don't have those two button we have this two link if I click on en nothing happens but if I click on PN and now the local is PN and the route is slash BN if I click on en again now our current local is en so that's how you can change the local using the nexgs link component so now that we have learned how to change locals using both Nexus link component and use routers push method now let's see how we can really translate content of our page so I will just comment this out again and I will uncomment this part this is almost same as before but this time the a strip is slash about so this links will take us to the about page using the specified local so if I click on PN now our current route is slash BN slash about that makes sense so let's see how we can translate content that's why we have installed uh this package next i18 next to use it we need to create another file inside the root of our project and the file name will be next Dash i18next.config.js and let's open that up and let's also open up the next config file let's export an object module dot export and inside the object we need to specify the exact same thing this i18n object so I will cut this from here and I'll paste it here and let's just import this entire object to our next config file so import sorry not import const i18n from require from next iitnext dot config and let's add the i18 to our next config so now that we have changed our next config we need to restart the server so yarn Dev to restart the server and let's just refresh the page okay everything is working so I will close these files now let me just quickly show you the documentation of the next IIT next package so this is the GitHub page and if I scroll down here you'll find almost everything that you need to know you need to add translation content in this file structure which I'll go over in a minute we have added this config then you need to go to the underscore app file and wrap your entire app with this app with translation hire the component so let's just copy this and let's go to the package.json sorry underscore app.js let's import that and let's just wrap the my app with app with translation so my app and now we need to add our translation content just like this you need to add the translation to the public directory inside the public directory you need to have a Locus directory and inside the locus directory you need to have more subdirectories and the subdirectory name has to be the local that you are using on the config for my case it is PN and en and if I expand one of this directory it has two file one is common.json and another one is about.json now what are the season files if I open up the about.json it is containing the translation data if I open up the ens about.json file it is the same thing they are just translation data now the keys of the translation has to be same for example here hello world is the key and also on another about the Json file hello world is the key so these Keys needs to match if you don't match the keys translation won't work now why did I name these files about.json it doesn't has to be about.json these files are actually called namespace so you can add different types of translation to different namespaces or Json files you don't have to add all of the translation data in a single Json file for example if you want to store all of the translation related to home page you can create a home.json file if you want to store all of the translation about the about page you can store them in the about.json file now one thing that is required is the common.js in file because when the translation package will not found any translation in the namespaces file then it will look for translation in the common.json file you can totally leave it as empty or you can add some common translation data here it doesn't really matter but the file needs to be there then the next step will be to go to the page that we want to translate so I will go to the about page or the about file you need two things you need this use translation Hook from next height index and the server side translation function from next item slash server side translations then you need to add another function it can be get static props or it can be get server-side props depends on your use case so I will uncomment this one so that get static props function takes a parameter called context and inside the context we have this local property this will be the current local and then you need to return an object and there will be another object called props and inside the props you need to spread out another object which will come from the server side translations function it will return as an object and we need to spread that out we need to pass the current local and then you need to pass an array and this array will be array of namespaces with this you can specify that this page will only get access to the about namespace and it doesn't has to be only one namespace you can add multiple namespaces and if you want to pass more props to the component you can pass them here okay then you need to use that use translation hook I will uncomment this one so we have called the use translation hook and we have passed the namespace that we want to access we want to access the about namespace so that's why we have passed it here and this use translation function will return you an object and that object has a method called t t stands for translation D is the common convention but I don't really like a function name St so I have renamed it as translate so now I want to translate a text called hello world so I have called the translate function and I pass the exact same key that I have added in the namespace file hello world hello world and we have another link which will take us to the Home Route but also it will maintain the current local so let's see if the translation really works or not so let's go to about page with the English local and our text has been printed out hello world let's go to home and let's go again to the about Pitch but this time using Bengali local and now you can see that the translation has been printed out the translation of hello world is ohebisho and if I click on this below link now it takes me to the home but the current local is PN so this is how you can translate the content in next year's there are many other configurations that you can do with the next IIT next package but I won't go over them just read through the documentation okay so um that's all I wanted to show you in this video so if the video has been helpful for you don't forget to like share and subscribe to my channel and I'll see you in the next video goodbye [Music] thank you

Channel: Cules Coding

Views: 39,329

Keywords: coding, programming, trailer, webdevelopment, developer, material-ui, programmer, nextjs, reactjs, javscript, html, css, framework, web, jamstack, static site generation, server side rendering, client side rendering, ssg, ssr, csr, mongodb, dynamic routing, api routes

Id: H9O9HdKNytc

Length: 17min 44sec (1064 seconds)

Published: Sun Oct 30 2022