Translate NextJS 14 with next-intl

hey guys welcome to real life overrated and today  we're going to see how to translate a nextjs app   with an app router using next Intel library and  I'll try to Showcase some of the common usages   as well as some of the common problems that you  might encounter while using this Library so for   our example we will be using this small nextjs  project over here which consist only of an index   page that contains a link to a blog page as for  the code the index page consists only of these   three sections a title a dynamic string and a  link that we will be translating later on and   the blog page has only some placeholder text we  also have a simple layout component that has a   nav bar which I borrowed from one of the nextjs  examples however the most important thing over   here are just these two links that are in the  nav bar so first let's install the library and   for the setup I will be using this documentation  which is really well done and I suggest you do the same and the first thing that the documentation  tells us is that we have to prepare our   app structure so first we have to create a  messages folder in the root folder so let's do that and the messages folder will contain .json  with our translations so English will be the   default and for our second language I will be  using czech so the other file will be called   cs.json then we have to make sure that we have  this next.config.mjs file in the root folder so we   do have that I think it's a file that's provided  by default by the new nextjs projects then we have   to make sure that we have this i8n.ts file in the  source folder and by the way you do not have to   use the source folder you can just do the setup  in the root folder if you do not have this source   folder but I prefer to use it next we have to  have this middleware.ts file in the source folder and finally we need to make  sure that we have this local   subfolder and move all the layouts and pages over there so we will move our blog  there and we will also move our   layout there and our page there  and since our layout is actually   importing the globals.css we will move it there  as well so let's create some default json in our   en.json file just so we have something next  we have to create this next Intel plug-in provider and wrap our next config  with it so my config is empty but   if you are already using some  kind of provider you can just   nest it and it's completely fine next  we have to create this configuration object and what this object does is if the locals  are matching it does provide the request with our   imported translations on our server so let's  just change the German for Czech language   next we have to create our middleware which  will handle redirects and rewrites for the   matching locales and matching paths and again  let's change the German language for Czech so   this will make sure that these path names are  actually translated finally we have to provide   our client components with our translations and  this is done with the help of next int client provider and we can just wrap the  content of of the main with the provider that's it for the setup  let's make sure that everything works and apparently we have a bug in our .json  file so let's check it yeah it's not a valid Json okay so it seems that everything is working  correctly for now so I can go to an English   endpoint I can go to czech endpoint and if I go to  root it should redirect me to my default language   which is English ah it turns out the default  is czech so let's change that one thing that   we forgot is to provide our local dynamically  to our HTML so let's do that however I believe   that the fact the czech language is the default  choice is correct that is because the language   is actually stored in the cookie so it it's  dependent on which language have we visited   last so if I visit last czech the default will  be czech if I visit English the default will be English and if I remove the  cookie and visit the root the   default should be English and let's  start with translation so to start   translation all we have to do is to use a use  translations hook provided by the next-intl library and as an argument you have  to put a namespace which is the key   in the Json so as of right now we actually  have only one namespace and that this index   I usually name my name spaces based on the  components that I actually import them in so   in this case it would be home so let's rename it and now we can just export  the text as an appropriate key   in the Namespace so let's say we could leave the title and call the function  with the appropriate key oops we have a typo and of course we need to   actually export the text to the  czech Json as well so let's do that and let's try that everything works so if I go to English I  see my portfolio if I go to czech I see the czech translation  so everything seems to be working   for now now let's say I want to translate  something Dynamic something that contains a   variable which could be this language over  here for that I will need to use another hook and make this string into a template literal let's first make sure it works so I'm  watching it in CS language and now it's   in English language so it works and now  I need to extract the string with the variable it could be for example Dynamic text this is not the template literal so  let's just remove the dollar sign add a coma and I can supply the variable in another  parameter which is an object like this which is basically the same as  just writing the locale like this seems that it is working now in  order to translate a text containing   jsx you have to use a special  ritch function but first we   have to extract the text so let's do  that let's name this entry block link and let's fix the formatting and you can just  use a custom tag in the text   and remove everything that is inside of the tag like this and you just call the appropriate  key which is a blog link and as a   second parameter you use the name  of the tag that you used in the   extracted string so in this case a link  which will return you a content of the link and you can supply it  like this and put the content inside and currently it actually returns  an error which is caused by the fact that   this link expects a react node but right  now we have a function body of course so   let's fix that and remove the semicolon  and it should be good let's check it works yes now one problem that we have right now  is that if we switch to a czech language we will   see that there is no translation being provided  and that is because the text currently is not   translated the check Json is empty luckily  there is a way how to provide a default   translation so let's do that so when providing  default translations you need to know whether   you are providing the translations to server  component or to a client component because the   server translations are provided in I18n.ts  and the client translations are provided in   the layout so in our case we're talking about  server components because if we log something out it actually doesn't get logged in  a client it gets logged in the server   like this so in our case we will be providing  default translations in the i18n.ts and for   the default translations you need to install a  library so let's do that the library is called merge and once the library  is installed all you have   to do is to import your local messages so let's do that and your default messages which in our case will be English  messages and then you merge them and the default messages have to come first and we can pass our messages like this which  is the same as this now the way the deepmerge   function works is there are no duplicities it  just matches the two Json so English translations   are provided only in cases where the czech  translations are missing here let's try that it works ah we need to run the server and we can see that even on our czech  language endpoint the English messages are   actually provided when czech messages are missing  now this leaves us with one more problem and that   is that our links actually won't work and that is  because the links actually point to unlocalized   endpoint but we needed to point to cs/blog or  en/blog so for that we need to create our own   custom navigation with help of next Intel so let's  do that and we will place it in the source folder so first let's define the locals and now we need to import a special object   from next in library called  create shared path names navigation and we will export our custom link redirect use path name and use  router components from create shared   path names navigation which takes as a  parameter an object with locals and from   now on when we will need to redirect  to a translated endpoint we will need   to import link or redirect or useRouter  from this component so let's go back to   page.tsx instead of importing the link from  next/link let's actually import it from our navigation and let's see that it works yes as you can see it works and now  let's try to create our own custom local   switcher because this is something  that didn't work for me based on the   documentation and that I struggled  with a little bit so let's do that let's create new component and Export it and it will be a select component with two options and cs and let's import it into Navar for example see how it looks okay not  very pretty let's give it some styling this is a little bit better  and let's give it label like this now we also need to give  it a default value and the default   value has to be the the local that we  currently have uh selected so let's do that and we can get the current local from use local hook import it from next Intl let's check it works so on CS  it's Cs and on /en it's en but right   now it doesn't do anything of course so  let's change that let's create a change Handler we'll take event  which will be change event and we need to import router and let's replace the local on change let's use template literal like this and let's try it works ah we have a bug oh yeah we're missing the arrow function here and of course for the use router  this needs to be a client component okay nothing is happening let's see why oh  yeah the change Handler is not assigned to the onchange and right now it's actually  working correctly so one problem that   I actually encountered with this library is  that if you want to translate for example   the nav bar and the text over here there  is actually no nice way how to translate   a text outside of a react component because  the only way to get a translation is to use   the used translations hook and that of course  is only usable in a react component so in order   to translate items like these you have to  move them to a react component which might   be sometimes inconvenient if you for example are  relying heavily on some helper functions that you   share across the components or something like  that you will probably have to rethink the way   how you structure your application or your  components besides that it's a really cool and   really easy to use Library I hope this video has  been useful for you and see you in the next video

Channel: RealLifeOverrated

Views: 477

Keywords: next-intl, translate next, internationalize next, nextjs internationalization, nextjs translateion, react translation, react internalization

Id: _tgNJ_6qlsM

Length: 20min 12sec (1212 seconds)

Published: Sat May 18 2024