Internationalization in NextJs 14 with Next-Intl | i18n

in this video I'm going showing you how to implement this nextjs internationalization and we are going to use app router as you can see we are going to follow along this documentation and hopefully this video is really easy to follow and this is what we are going to be building really simple as you can see by default if I go to Just Local Host 3000 it should be redirect me into the which is English for the language and as you can see all this content right here is basically English if I change that to Indonesia as you can see it's Chang even the navigation up here is changed the title the content right here the footer is also changed and also as you can see in the road here we on the ID now and if I remove this as you can see if I hit enter now it still go to ID that is because the value it store inside the cookies so let's go to application and then cookies as you can see we have next local called I right here if I change that to English of course it's change that to en that's why if I remove this it still go to English so yeah that's what we are going to learn and hopefully by following this video you'll be able to implement the nextjs internationalization in your next JS app router all right so without any further Ado let's get started all right so let's start with the create next application so we can say npx create next app at lus say yes for the typescript yes Lin yes TN yes Source yes app rouder yes import alas I'm going to say no all right so let's just wait for that all right so now it's success let's CD into the next lingo folder and from here I'm going to open that inside Visual Studio code we can say code and then dot it will open the visual story code like so and then the first thing is what we need to do as you can see here we have two option we are going to use use this app router so the first thing we need to install this next inl uh package so let's open the terminal and I'm going to paste that right here so hit enter let's close this welcome uh message right here and just wait for that until it's done and then as you can see here I'm I'm going to make it bigger so you can see so we need to create the this folder here file I mean I I acting .ts and the middleware DS and also we need to create these messages right here basically you can put the messages for anywhere you want but we are going to follow along just this documentation all right so now let's try to say npm run def to run the Local Host 3,000 and let's open that I'm going to close this all right this is the default page for the next yes so now let's remove the let's go to Global first Global CSS I'm going to remove all the root right here and also I'm going to remove the faon we don't need that and let's go to the page here I'm going to remove all this content inside the main let's get rid of that and I'm going to say heading one let's say app just like so and then now we should see app right here nice so the first thing is let's go to the documentation as you can see in the root directory we need to create the messages just like the documentation here so let's create the messages folder and inside of that I'm going to create for the English Jason and also I'm going to create ID for Indonesian Jason just like so nice so we are going to just copy the content for now go to English right here paste that like so and I'm going to copy this go to the id. Json for inter nation and I'm going to change this title to hunia right nice so let's go back and let's go to next config MJS this one I'm going to basically just copy all of that and paste that right here so as you can see this is basically will wrapping this next config with variable here which is with next entl this come from the create next inl plugin from the next ENT plugin package all right so let's go back we need to create this file here so we need to create that basically inside a source and the same level with app directory so let's go back to source and let's create a file called I ac. DS and then the content is this one so we need to just copy and paste that right here so this is basically the locals that uh we are going to use n RTE uh this is basically will becoming the road of our application for example if I go to/ ID it should be available if I go to/ it should be available so now I'm going to remove this to ID like so and then as you can see if the local include this one is not uh found right it will return not found page let again see the messages is going to be come from the messages SL local and then the Chason and then default right here of course you can put your messages here to anywhere you want and just make sure you change this directory right here nice so what the next thing we need to do let's go back and we need to create the middleware dods file so let's copy that go to Source create file paste that right here and then we need to just copy all of this copy that paste that in here so and the locals that supported is speciically English and Indonesia by default is English and of course the match only International as path names is going to be ID and English all right I think we're done with all of this and then now we are going to just close all the tab right here and then what we need to do is inside the app right here I'm going to create folder called local like so and just like the documentation I believe this one as you can see so inide in here I'm going to create layout but instead of create that I just want to copy and paste come from this uh Source right here which is the layout and also the page here I'm going to move this two file inside the local let's move oh I forget the global CSS so let's also copy that and paste that to local right here nice so now if I go to the Local Host 3000 um let's try to see as you can see we get this warning here that is because this two file here I actin ands and also the middleware it should be inside the source but same level with the app it's going to be look like that so let's try to say npm run def again and hopefully now it's working so as you can see on the road here it's redirect us into the road so I'm going to remove that and hit enter as you can see it's still en I'm going to remove and change that to ID and hit enter and I'm going to remove the ID and I hit enter as you can see now it redirect us to the ID so basically the value is store inside the let's see or the application and then cookies and then this one next local so the next application store this value inside this cookie right here so now I want when I go to the random something in here the app it should be not found as you can see on the I8 NTS it should be returned this note phone here but it's not working for now that is because inside app we don't have layout so let's create the layout inside the app so I'm going to say layout. SX so as you can see the layout it should be same level with the local folder right here okay so let's just copy all of this inside local I'm going to paste that right here so now I'm going to remove all of that and then here I just want to return children in here just like so so now uh it's still working so now we need to create the not phone so let's say node found. DSX and in here I just want to copy and paste this simple not phone component as you can see this this is just returning hge one let's say something went wrong as you can see when I save and reload still not showing this error I'm not sure let's go to app here and maybe we need to create the page all right so let's say RFC and then in here I'm going to say root page like so and then for this return I'm going to remove that and we can say rate TR into for/ by default so now if I go back to the browser and let's hit enter as you can see we still get this app here we're not showing this not phone here what the problem so let's just close everything and go to source and then I'm going to go to my local and then page here so in here I just want to try to use the use translation so let's try to say cons T set equals to use translation come from the next entl and in here I'm going to use the let's see in the message we are going to use this index key right here so I'm going to copy that and paste that in here so now if I save as you can see now we see something went wrong so now this package know that this road here doesn't access on this locals here so that's why we get this warning here something went wrong this is basically render from this note phone right here so of course we can say class name text to Center as to class name margin top 10 and also one to semi bolt like so and as you can see it's littleit look nice great so now we know that if we typing in the road here something that doesn't match with this locals with this really hard to say this one this locals right here should be returning error right if I go to uh just for the root and it will redirect us to the English version so now I'm going to inspect this and see on this HTML here right here the language is English but if I change that to ID as you can see it's still English that is because on this layout we not specify these languages here so we need to grab that from the params of course so here we can say params of course we need to set the uh props first baram set equals to an object and we can grab the local right here why local that's because the folder name is local if you change that to language of course you can use the language right here and the local it should be string like so and of course you can use um for example props root layout props to just put all of this let me showing you here I can say interface root layout props and I'm going to paste it right here and we are going to use this interface in this object right here just like so and it still work and I'm going to change the right here to the local come from the params so let's put that right here like so and now as you can see it's going to be ID if I change to n should be English great it's working now we need to just add some styling in here so I'm going to remove this children and inside this body here I'm going to create a diff with the class uh let's say say display flex and also I'm going to add the flex column into this diff also the minimum H I'm going to say screen which is 100 view H and also the maximum width I'm going to set that to let's do for XL and MX2 Auto to make it content into the center and then basically in here I'm going to render the header so let's do H1 for now let's say header and under in here we have have another diff and this is basically the children so I'm going to say class name to flex grow and also the margin top I'm going to do 20 and put the children in here just like that and now as you can see we have the header on the top and here we have the app right here great and maybe down here we are going to put some footer maybe something like that as you can see the footer is going to be down here because we set this to flex screw in this children here right we have the header app and then also the footer down here I just want to console lock that so you can see what does t mean so T is basically just a function I can grab the title for example like so and as you can see we get the hello word nice so here I'm going to say the and then title in this uh H one right here so I'm going to save and as you can see we have hello word and then if I go to ID as you can see Hello dunia really cool so now I'm going to update the messages value in here the anglist and then the ID so let's go to with the anglist first I just want to copy and paste come from my final project and paste that right here close the terminal as you can see for the index page we have the title description for the not phone page we have this title description notification and then the footer down here all right so so now let's go to the ID and of course we need to just paste that right here as well but make sure if you create these two file right here just make sure this key here it should be same the index page title and description this is should be same if you put not found page you should put not found page right here you cannot do something different and this maybe you say homes and you say home right here it's not going to be work so let's close that and now it should be index title that is because now we don't have this index here we have just index page all right as you can see we have jto next NL because we own the ID here I'm going change to and as you can see we on the next entl example but instead of just returning H1 I'm going to returning div in here so let's do uh diff and then inside in here I just want to put paragraph and let's put the T and then I'm going to render the description just like so let's styling this H1 a little bit I'm going to say class name text to 4 XL to make it a little bit bigger Marchin bottom to four to make it space and also font to semi bolt let's save and let's take a look as you can see it's look nice great if I change this right here ID it's change if I change to en n it also change the value here great so now that's working with header because in the header here in the right here I'm going to create something like select drop down to select the language that we want nice so now uh we are going to create the header inside the components so inside of source I'm going to create folder called components folder and inside the component folder I'm going to create header. DSX so here you can see RFC and let's remove the name and I'm going to change that to Capital H right here and then just use that inside the local layout and just render that right here so we can say header just like so so in this header here I'm going to just remove this diff I'm going to use header Tech like so and inside the header Tech we have enough and inside this enough We have basically a link come from next link and this basically hold home and then I'm going to say h ref is going to be for/ like that as you can see we have home right here and if we on the Indonesian language of course I'm going to change this to something like Banda as you can see right here so of course we need to grab this navigation home so let's go to header and how do we get that value is pretty simple we can say cons T set equals to use translations and then put the name of the uh key right here I'm going to use this navigation so let's bring this navigation right here and then now we can use it right here we can say t and then put the other name home right here so we can say and then home now we should see home right here if I change that to ID it should be Branda great so let's styling this little bit for the header I'm going to say class name to padding 4 to make it space and uh enough I'm going to say Flex item Center and justify between to put this link home on the left and this local switcher on the uh right here this basically will becoming the drop down so let's create component inside a component folder I'm going to say uh local Des switcher like that to DSX and let's do ourf C and then let's remove the name to local switcher like so and we need to render that inside this na here so let's do local switcher just like so instead of diff I'm going to render a level and this level here let's remove the HTML 4 we don't need that and this lbel here is basically have class name called I'm going to say border to two and also rounded let's say rounded like so and inside this label I have B this is just for uh text maybe the select is not showing up I'm going to say uh let's do change language CH language like so and I'm going to say class name into this is basically for Source only and also down here we going to create the select let's do select like that you don't need this name and ID let's remove that and inside this select I'm going to put the option so the option here basically for now we just have two uh two option English and Indonesia right so you can say English and copy and paste this this is going to be Indonesian and for the value we can say ID all right so let's take a look as you can see here if I refresh we have this anglish and as you can see we have this drop down here great and you can just add some uh class name in here if you want you can say class name to uh background transparent also the padding vertically I'm going to say two inside of Select here I also want to add the on change so let's do on change and I'm going to say on select change this is the function that will handle the change on this select here so let's create a function so I'm going to say cons un select change set equals to error function and because we're working with Tas script I'm going to grab the event and give a type in here this is going to be change event and then I'm going to put the HTML HML change not HTML change HTML select element just like so and in here I can say console log e do target. value all right so let's take look uh we cannot use a function inside the client inside the server component so we need to change this to client component great so we can say use client just like that and it should be work so now I'm going to open my console here and just try to switch as you can see we have ID en n ID nice it's working so in this function here what I'm going to do let's say cons I think we need to just cut this value here and I'm going to create variable call let's say next local and then set it equals to this value and then I'm going to say start transition the start transition is going to become from the uh use transition so I'm going to say cons use transition like so and then inside the use transition we can grab the star transition and now we can use this inside in here we can say star transition and then we can put as a call back the router so here I'm going to say cons router set equals to use router hooks come from next navigation and basically in this call back here I can say router do replace so basically what we need to do is just replace this road here when user go to Indonesian it will replace the value here to Indonesian if user go to English it will replace the road to en n just like that so now let's say rotor. replace and then I'm going to back tick in here let's say for SL and then I'm going to do next local just like so we get this we get this warning here that is because in here we need to grab the is pending all right so if you not use this use transition it's still working by the way so I'm going to comment this one and just uh comment this one as well so now let's try so I'm going to refresh this and just zoom out so you can see zoom in I mean so as you can see by default is Indonesian right I'm going to change that to English as you can see we on the eend right now and inan it's also still working as you can see the text is changed I mean it's working right great but as you can see if I on the Indonesian and I refreshed here the value on this select here is changed that to anglist so we need to set the default value of course in this select right here I'm going to add the default value into the default local that active so how do we get the local active we can use use local hooks so here we can say cons I'm going to say local active set equals to use local come from next in inl and this is basically will have value en or ID it depend on the road that active in here so I'm going to put that right here nice so let's refresh as you can see the the default now is Indonesian if I change to English it should be English Indonesian should be Indonesian when I refresh it's still interation this expanding right here it should be putting inside this select here and we can set the disable when is spending is true that mean when we change these and they're spending we need to just make sure this select here is uh disabled nice so what the next thing we need to do is let's do with this footer right here so let's go to components and I'm going to create file called footer and here we can say RFC and I'm going to change the name to footer like so and then I'm going to close others and then open the local and then layout. DSX we need to render the footer in this layout so we can say footer like so nice let's close that and now that's working with the footer component and in here basically again we can say cons T set equals to use transition and then what we need to get in here simple you can go to the Json file and as you can see we have the footer here of course we need to grab the footer just like so and then in this diff here I'm going to render a pte and then I'm going to return it t and then put the string what the string we need to use which is copyright copy that Bas that in here so now as you can see down here we have that value really cool we can just make sure this is going to be on the center we can say margin top uh margin vertically to 10 and tex Center just like so and now it's in center right here if I change to Indonesian as you can see oh still footer right here I'm not sure why oh this one I think we need to just refresh the browser yep it's working now but I'm going to mention this this is just working with the serfer component if you follow along this tutorial but if you want to put this right here this transition into the client component you need to just follow along this documentation here it's really easy to uh follow along basically this is the documentation as you can see using internationalization in client component we can ping translation to the client component basically this is the serfer component and then the value you send that into the client component it's working and also the option two is just moving state to the serfer site this is also working as you can see this is the way how you do that and also the option three is providing individual message mes that mean for example you want to wrap this footer here with uh use client you need to wrap that with next entl client provider just like so or maybe you need to wrap all the component inside the next entl client provider is also work that's the four option that you can use for uh access the messages this one the messages here inside the client component if you want maybe we are going to create another video about that and yeah thank you so much for watching guys I think now we done hopefully this video helpful and see you in the next one

Channel: Cand Dev

Views: 27,279

Keywords: Next.js 14, i18n tutorial, next-intl, multilingual app, language switcher, i18n in Next.js, localization, server-side rendering, app router, development tips, JavaScript localization, React i18n, frontend development, web development, internationalization best practices, Next.js updates, programming tutorial, coding tips, software development., i18n, Next.js i18n tutorial, Next.js multilingual app, Next.js language switcher, Next.js localization, Next.js app router

Id: uZQ5d2bRMO4

Length: 28min 39sec (1719 seconds)

Published: Wed Jan 31 2024