Next.js + Strapi - #Internationalization (i18n)

in this video we are going to talk about translating your content with strappy and xgs as you may remember we already did an episode about this but at the time of recording that video strep didn't have options for translating the content so we had to create additional fields in our content type that would serve as translations for original fields and so on this is an okay solution if you only have one additional language but imagine that you want to translate your site or app to five different languages that would mean that you would have five additional fields for every translatable field not an elegant solution by any stretch but with version 3.6 of strep you get translation options out of the box and to make things even better nexjs also got internationalized routing in version 10. so in this episode we are going to take a look at how those two features play together [Music] i'm not going to continue with the site that we made in the previous episodes in this episode but instead i installed a fresh copy of strappy so it's version 3.6.3 and also i have a completely vanilla installation of nexjs so as you can see i didn't even remove this from here this is just a fresh installation of neckjs and fresh installation of strappy the next thing that i want to do is i want to turn on internalization for strep so first of all i'm going to create a new content type and i'm going to create a new collection type which i'm going to call pages and just click continue i'm going to add the text component which is going to be called title and add another field this is going to be a rich text component and i'm just going to call it body finish okay save this now we have pages okay so how do you turn on internalization for strep you go to plugins and as you can see in the version 3.6 internet internationalization i can't say that word comes pre-installed with strappy as a plugin if you want to use the site that you were already been building then you need to update strap it to version 3.6 and install this plugin and then i'm just going to go to settings and as you can see i have this internet nationalization option right here i add locally and for me i'm going to add hr so that's going to be croatia and just add that locally english is our default locally so our original content is going to be in english and the translated content is going to be in creation the next thing that we need to do is we also need to go to settings and to roles and then to public and then we go to this application right here and we are going to select count find one and find and save this so that we have access to our content type okay and now let's just create some content so i'm going to create a new page and as you can see right here we don't actually have anything in terms of translation translating that content and this is because we need to go to content type builder again uh click here on this pencil icon and then you go to advanced settings and turn on localization finish now if i go to pages and want to add a new page as you can see the localise is currently english so i'm just going to add some title right here now if we want to translate the this content we just go to locales click creation we get an empty form and now we can start writing our translation so i'm going to write it in creation okay so always transl that's what it says right here so i'm just going to save this and if we go take a look at the pages once again as you can see now we have only one page right here but if i change the locally to creation then we also have this page but translated that's great so how does this look on our api and how do we access that data of course you can go to internationalization documentation page for strappy and take a look at there but i'm just going to open up a new tab and go to the pages api endpoint and as you can see we are not getting anything if i click raw uh there's nothing here and this is because if i go to pages you can see that the page is not actually published it's currently in draft mode so i'm going to publish this page go to the creation translation and publish that also and now if i go to pages as you can see we get this page actually this would be a list of pages but since we created only one page we get this one and if i go to the id of one we get this actual page as you can see here we have this localizations array and in it i have an id of my localization so if i wanna access that localization i can just go to number two right great now the problem with this is and i couldn't get an answer from the strep team about this what i don't understand is why can't we have something like one and then you do locally equals hr and if i do that i will get not found however you do have pages and then you do locally hr and then you would get the list of those pages but translated into creation language or whatever language you chose or if you have multiple languages you would of course just change this language code right here so it could be fr or de or something like that unfortunately as i said this does not work and i don't know why that is we will get just not found so we will have to deal with this in the code and we will do that just a little bit later as i said at the beginning of this video nexjs got internationalized routing in version 10.0 what you have to keep in mind here is that this routing is actually meant to be complementary to other i 18n library solutions like react intel react next which we used in that previous video linguis rosetta and so on so of course read the documentation but to get this feature going in xjs you need to set up your nexjs config file so in our project as you can see i'm currently using next version 10.2.3 we are going to create next dot config dot js file and in it we are just going to add module exports and here we are going to define our options so first of all a itin n and we want to set up our locales which are going to be en us and the other one is just going to be hr which is b which would be creation language and of course if you have more languages you would add the codes for them right here default locally is going to be en us just like in our stripy admin we're going to save this and of course whenever you change something in next.config.js file you need to restart that your server so please do that right now okay so what i want to do right here is i want to create a new file in the pages folder and i'm going to call that file id dot jsx i'm using jsx extension right here because it's going to be easier for your code editor to know what's going on in the file instead of just using js so we are going to create that file and in it we are going to create a function which is just going to be called page and it's going to receive some content that we are going to define a little bit later and in it i just want to return container uh the container is just going to set our content in the middle of the page and now i'm just going to add an h2 tag which is going to say content title so that we can show our title and then i'm going to add a div with a class of body and in it i'm just going to show our content body okay of course we need to export this function and now we already learned about dynamic links so this is actually dynamic paths this is idynamicpath which is going to take an id of a page contact our server and then get the content from it i'm going to do this first just without any localizations whatsoever so we are first going to define our get server site props and in it from context so the context is going to contain the id of a page that we want to access and we are going to do something like this so we are getting the id from context dot params next thing i'm going to call this initial res because you will see later we are going to have to do some calculations to get the translation of this page so i'm just going to do const initial this stands for initial response and we're going to fetch the pages by the id that we got from our server actually the page not the pages okay so we want to cast that to json so initial is going to be initialres.json so we got our initial data now let's just return it as props and we say just props content is going to be initial and we are of course receiving the content right here okay save this let's check out our page and see if this is working so if i go to the id of one remember our page is currently at the id of one so if we go to slash one we get this is page that we're going to translate this is a text that we are going to translate and that's it now how do we translate this page we want to have a button that is going to translate this page of course in the real world situation you are probably going to use context api and create some kind of a language switcher but here we are just going to have a button that is going to translate this one page for us now it would be really nice if we have something like this but we don't and we just get not found right here so we have to calculate the dot on the server side and we do that like this so first of all you can get the current locally from the context okay so we are going to know what locally the user is currently using then i'm going to define a variable called translation okay so this is going to be an undefined variable and what we are doing right here we are always getting the default page so actually the page in the default language as i said it would be much better if we could use that url parameter but we can't so we always have to fetch the default language except if i'm wrong in some way and actually something like this exists and then this whole tutorial is screwed but i don't think it is because i couldn't find anything in the documentation so we are getting the default content which is in english you always have to get it because if we go to our api and that default content we are going to get localizations array which has the id of the translated content so now we know on which locally we are with this so we can say to next so if is equal hr then we want to get the creation translation of that page and do that like this okay so i'm going to call this variable translation response we await fetch for localhost one three three seven pages and then we get this in from initial we get localizations array uh and the first object in that array now if you have multiple languages you will also have to deal with this right so you just can't add zero right here and that's it uh you would have to go with something like find or filter uh through this object right here and then get the translation that you need depending on the language which your user chose and then after that we are just adding translation response we are just casting translation response to json and adding it to the translation array so this translation is not undefined anymore and we can do something like this here so we can just say if the translation exists or is not undefined then we want to show the translation otherwise we want to show initial and that's it save this okay so we did this on the server side now we have to show this on our page and to do that we are going to need to import some things and those things are linked from next linked and use router from next router okay so here we are going to first of all have to define our router and it's going to be just use router and if you cause log that save this go to our page let's just refresh it it still works great so here let me make this bigger if we go to object we have us path which is as path and also we have default locally and we have locales so all of the local is that you currently have and you also have this locally that shows us on which locally the user is currently at okay so we are using use router for that so here i'm just going to nicely add to br tags and i'm going to create a link and in that link i'm going to define hrf okay hrf so we need to go to the path that we are currently on so to do that we are just going to do a router s path and that's it and now for the locally now this is new in nexjs 10.0 and when you add uh that configuration for localization of content then you have this locally parameter that you can add to your links and in here i'm just going to say so if the router locally is equal to en us then we actually want to show the creation version of the page so the local is going to be hr otherwise so if the locally is hr then we want to show the en us version and we are doing this because when somebody clicks on this link it's going to take it to the translation of the current page okay so we add an a tag remove this and also here i'm just going to say something like router locally so if the router locally is enus just like we did for this parameter then we want to check which text do we want to show so if you are on english page we actually want to show the creation text so when somebody comes to that page that knows creation they are going to be able to read this text so we are going to say pricage and if you're on english translation then we want to say show english translation this is kind of a way that you would create a language switcher for your site of course you would probably be using something like context api and so on to get the global language that is currently used on the page save this and let's just check if this works so if i go right here as you can see i get prikashi kharawatski pre-ordered i'm just going to refresh the page okay so preheat here if i click it then i get creation text always write sequential privacy or text question and i have this show english translation so if i click this the page changes and also note that here we are changing the url so by using this locally right here the router is going to take us to a sub path which is going to be hr slash one it's not going to be just one or two or whatever and if we go to english translation then we are going to go to just slash one and that's about it just remember that on the next js side if you are using this new feature uh you would probably need to pair it with something like this right react intel react i 18 next link way and so and so on because right now this is only going to do the localized routing but you won't have stuff like i don't know string translations or something like that so you you would always at least if you're not doing something very very simple like we are doing right here you would only always need to couple this with some other library because nexjs is not going to provide you with everything out of the box so anyway guys this has been it for this video everything we did here will be available free on github the link will be in the description below and as always thank you guys for watching and i will see you in the next one [Music] you

Channel: Watch and Learn

Views: 16,030

Keywords: JavaScript, Nextjs, Strapi, tutorial, Internationalization, translation, localization, multilanguage, React

Id: iqi3ZSp1cpE

Length: 19min 8sec (1148 seconds)

Published: Sun Jun 06 2021