Next.js 13 App Directory & i18n - Full Tutorial

in today's video we will take a look on how to add Internet generalization to your Nexus 13 app using the app router we will first take a look on how to add the internet analyzation for Server components and then also how to use the translations in client components so let's get started so in order to add Internet the analyzation for our application we are using this next Intel library and as they say right here they are supporting the Nexus 13 and the app router so let's actually click that open and if that's not there I think you can click to get started and then go down here next to 13 and get started and right here they are saying that with Nexus 13 and the app router there are two major changes when using the next Intel and the first one is the next test has removed their built-in internet the analyzation routing and the second being that next test now supports react server components and in order to leverage these new capabilities of next JS next Intel supports now Cloud components middleware for i18 and routing localized navigation apis and server components and just a heads up that at the time of recording this video the support for Server components is still in beta so that's just something to keep in mind when using them but let's click that server components open and let's see how we can add internet analyzation for our server components so before diving any deeper into this let's first just create a fresh nexjs application that we can add this internet analyzation for so I'm going to open up my terminal and I'm gonna create a new Nexus app using the create next app and once that's run let's open up that in vs code like this and then let's do some cleanup so I'm going to open up the app and page file and just remove everything from the return call and add a div and a paragraph inside of it and says say just hello world like this let's delete those Imports and save it and let's open the terminal and just fire up the dev server like this and I'll switch to the browser and go to localhost 3000 and I'm going to open up my Dev tools also so okay we see Hello World so our application is running which is great so let's hop back into the next Intel tutorial okay so first they're saying that the current data version is this one over here and if you're watching this later on this can be a different version or the support for Server components is already out of beta so just keep an eye on this version and use that in your own project if you are following along so what I'm gonna do is just copy this version over here and switch to the VH code and just add that as a dependency so yarn add and then that version like this okay let's switch back to the browser and scroll down a little bit so to get started we first need this kind of folder structure for our application let me just make this a bit bigger like this so if we look over here we will have a messages folder which holds the actual translations so next it'll uses the term messages for those translations and inside of that folder we will have all our Json files which include the translations then we need i18n configuration file and then we should have the next config file which we already have but I assume we have to do some modifications for that then we need the middleware file and this is important so inside of the app directory we want to create this kind of folder and then put all of our other Pages inside of that folder so that's how the next interlock will know which local we want to use so let's get started by adding the messages file so let's edit for English so I'm just gonna copy it from here so it's the browser and create a new folder called messages and inside of that I will create a new file called en.json and paste in the Json like this then let's see in the browser The Next Step so next let's add this i18n configuration file and I'm gonna actually copy all of this right now and switch to the vs code and create that actual file so it was i18 in and on the website it was TS but I'm just gonna use JS over here that works also and let's paste in the code so what happens in here is that with this configuration file we will Define which translations or messages we want to load for given local so that's used for it let's switch the Deep browser and take the next step so we want to modify the next config JS file and for this I'm gonna actually copy just these four lines over here and go to DBS code and open up my next config file and what I'm going to do is paste in those two lines over here and then I will change this TS to JS because this defines the configuration file we want to use and as we just made it a JS file we want to rename it over here to and then I'm just gonna use this with next Intel and wrap the next config inside of it when exporting it so apply this and let's save it and let's see the next step so the step four is to modify our middleware and again I'm just gonna copy this from here switch to the vs code and create that middleware file and paste in the code and over here what we are doing is we are importing this create middleware from next into middleware and we are giving it parameters over here so with this locals we can Define which locals are allowed in our application and with this default local we can Define what local to use as a default if none other is provide and then this export config stuff is basic next test middleware stuff so right here we are just skipping all the paths that should not be internationally analyzed and I'm gonna actually modify this and add fi so our application will support English and finish so let's save it and now let's switch to the browser and now actually before going to the fifth step let's try to run our application so I'm gonna start the dev server and switch to the browser and localhost 3000 and we are getting actually the not found error so let's see okay so what we actually forgot to do is the one important stuff which was to move all these files in a local folder so let's create that local folder over here and move everything except the icon inside of that folder like this so now let's see the browser and refresh the page and now we get the hello world text so our application is working before we continue any further I just want to quickly tell you about the sponsor of this week's episode brilliant.org if you're anything like me you dream of being that person who learns something new every day but the reality is that it's hard to do and that's where brilliant.org comes in brilliant was built for busy people they have thousands of lessons from python Basics to Advanced Computer Science puzzles and more with new lessons added monthly learning python had been a goal of mine for as long as I can remember but it seemed that I just didn't have the time to commit to it however once I started a python course on brilliant I quickly discovered that the engaging and bite-sized lessons made it easier than ever to learn by studying as little as 15 minutes a day I was finally able to make some real progress and Learn Python to try everything brilliant has to offer free for full 30 days visit brilliant.org tuomo or click the link in the description the first 200 of you will get 20 of Brilliance annual premium subscription so now let's take a look on the next step so what we want to do is modify the layout file and for this I'm just gonna copy these two lines from here let's copy them and paste them into our layout file so the layout.js and up here I will paste those Imports and let's just paste in everything we need and then let's go through it together so we need those and let's copy these lines and they go inside the layout component like this and then the last thing we want to do is pass in the local as a land parameter so let's copy and paste that over there like this so what we are doing here is importing the use local from next Intel and then not found page from the next navigation and inside of the component we can get the current local with this use local hook and that's what we are doing in here and this if Clause just checks that if our local is available and if it's not then we are just gonna show a not found page and then over here we configure that the document language is the given logo and one thing we still need is to add that params into the props like this so this is all we need to do to configure the whole documents language so I'm gonna save this and let's see in the browser that we don't get any errors let's refresh the page okay everything is still working so now we are getting the hello world text but if we look at the page that we are rendering in there so this one over here we are just displaying the hello world text so the next step is actually translate this sentence and let's jump into the browser and see how that's done so we can translate Verge or sentences in our server components by importing this import use translations and then using it like this over here so let's just first import that so I'm gonna go over page.js and import that and then I will copy this line from here to our component like this so now we have this T which is a function available in our component and if we want to translate this word we will call that function with a string parameter saying which word we want to translate or which sentence so let's try it out so T and then we want to translate the title so let's save it and I'll switch to the browser and we can see the hello world still so this is important to note that we are not actually passing the whole sentence or word that we want to translate but we are passing as a parameter the key for that sentence or word that we want to translate and those keys are inside of the Json file right here so in here we wanted to translate the title and we can see that it gets the translation from here if we just add for example one more exclamation mark and save it as we to the browser and I think we need to refresh the page for this so yeah so now it gets to exclamation marks and if we take a one more look at the use translation hook so with this hook we can get the translations and as a parameter we can define a scope which can be a component or other scope that you want to Define and in our case we are using indexed and why we are using index is because in our translation file we Define it right here so if this was something else we would use that in our use translation hook over here so now that we can translate some sentences let's see how we can change the language in our application so let me just write some code and let's go to it together then okay so what I did was to add this section over here so we still have our title rendered over there but then we are rendering two links which will have the text in English and in Phoenix and these are not actually next chance links but they are the next Intel links and if we quickly take a look on the next Intel documentation we can see down here we have the navigation and we can see that the link component actually wraps the next linked component so it uses the next link under the hood but what it does also is it adds this local prop that we can use so let's go back to the vs code and see our links over here so we are passing the href so we just want to go to the root of the website but then we are also passing the local and this is the part that will Define the new local that will be used so with our link with text in English we'll change the English and with infinix it will change it to finish so let's save this and go to the browser and see if it works so I'm gonna refresh the page and right here we have the in English and it finish links so let's start click the in English nothing happens because it's already in English but then if we click the in Finish we will actually get an error right now and that is because we haven't defined our finished translations yet so let's do that next so in our messages folder I will actually just copy this en.json and paste it in over there and rename it as f i Json and in here I will add the finished translation like this let's save it and now let's go to the browser and refresh the page and we can see our translation over there now if we click in English it will change it to English and in Finnish it will change it to finish and you can also notice that the local is added to the URL up here so now let's see if we wanted to add another word to our page or another sentence so right here we wanted to add a subtitle and we can do it like this and then save it and now if we go to the browser we can see that it shows the key for that translation and that's because we haven't defined that translation to our translation files yet so let's do that so I'm gonna open up the English version I will add that over here like this and then I will add also the finished version like this let's say both and go to the browser and we can see that our translations are now displayed so if I click English it shows thing in English and with infinix it shows it in Finnish that's great so that's how we can use translations with the server components but how about client components well let's take a look on the documentation of next Intel and actually down here they are already saying that if you are in a transitioning phase either from Pages directory to the app directory or from client components to server components beta you can apply this next Intel client provider additionally and this is one way to edit but we won't take a look on that in this video if you want to learn more about that way you can check it out from their documentation but what we are going to use is actually what they require meant in the server components section and what they're saying is that the best approach is to pass the labels as props or children from a server component and they have couple of examples over here but let's try that out and let's try to use the translations in client components by passing them as props so I'm gonna switch back to the vs code and let's create a new component in our local folder and I will call this just alert message again dot JS like this and I will export a function from here like this save it and let's import it in our page.js up here like this and then let's use it let's say down here and let's save it and let's just see the browser so everything is working we are getting the message down here and I'm just gonna actually add one ber over there so we get some space like that okay good so we are getting the message down here and that's of course because we just printer it rendered it down here and for our test we wanted this to be client component so let's add that use client up here let's save it and see that everything is still working looks like it but now if we want to translate this text over here the recommended way is to pass this as a prop so what I'm gonna do is add a message prop over here and then use that down here like this so we are getting the message to display as a prop and then we are displaying it over here and this is now a client component because we added the use client up here so I'm going to save this and let's go to the page.js and now we want to pass in that translation as a prop so let's add the message prop and that will be and let's again use the T function as before and let's say this is alert message like this save it and now if we take a look on the browser we can again see that it just displays the key or the name of that translation word or sentence so we still need to add that so I'm going to open up the en.json and at the alert message over here and let's say it was something went wrong like this save it and let's add that same to the finished translations like this let's save it not now see the browser I will refresh the page and now if we have English it says something went wrong and if we change the Finish it looks like it shows the correct translation so that's how you can use the translations in a client component by passing them as props and using the translation function in the server component so that's how you're going to add Internet analyzation to your Nexus 13 app using the app router and I know there are also bunch of other libraries that can help you adding the translations to your next application but I decided to use the next envelope because they already had support for the Nexus 13 app directory and not all of the libraries did have that I truly hope that you found this video at least somewhat helpful and if you did please leave a like and comment down below and if you're not already also subscribe to the channel so you won't miss out on new Nexus videos

Channel: Tuomo Kankaanpää

Views: 6,252

Keywords: nextjs, next js, react, nextjs 13, app router, app directory, server components, next js app directory, next js tutorial, tuomo kankaanpaa, james q quick, web dev simplified, javascript, next js 13 tutorial, next.js 13 tutorial, next js server components, internalisation, internalization, translations, next js languages, nextjs react, next js 13 project, next js 13 fullstack

Id: pKolfZFW3gs

Length: 22min 9sec (1329 seconds)

Published: Mon May 22 2023